Ui5con blr fe
- 1. Prasita Prabhakaran, Product Owner – Overview Pages Ashish Anand, Tech Lead – Overview Pages Rajashree Raghavendra, Dev Manager – Analytical List Page Shwetha Kamath, Quality Expert – LROP and Worklist July 20, 2018 Fiori Elements OVP, ALP, LROP & Worklist
- 2. 2 Framework to quickly build user interfaces with SAPUI5 with predefined templates for common application use cases Incorporates Latest SAP UI5 recommendations and is a starting point for developing apps according to the SAP Fiori design guidelines. Up-to date Design Consistency Works with OData and OData annotations, independent of the backend technology Offers the following SAP Fiori elements floorplans List Report Object Page Overview Page Analytical List Page What are Fiori Elements?
- 3. 3 Why Fiori Elements SAP UI5 Capabilities SAP Fiori elements UI/Views Predefined templates, limited flexibility Controller logic Offers generically CRUD, draft pattern. Limited extensibility Design guidelines Incorporated UX Consistency Incorporated Time to develop Less, depends on extensions Knowledge needed Basic App: Odata annotations Extensions: JavaScript/SAPUI5
- 4. 4 Fiori Elements - How it works Bird’s-eye view (10,000 ft) At Runtime… Application Developer Semantic Information What is displayed? UI5 Views + UX + Central Template Dev Fiori Elements Application Templates How is it displayed?
- 5. 5 Fiori Elements - How it works Bird’s-eye view (1,000 ft) At Runtime… Application Developer Design Time… Web IDE Annotation Modeler Plugin Project Template Wizard ABAP Dev Tools in Eclipse Core Data Service Definitions Gateway Service Builder (Exposure via SADL) Application Developer OData Service exposes data & relations OData Annotations apply terms to service elements OData Vocabularies define semantics through terms What is displayed UI5 Views + UX + Central Template Dev UI5 XML View Templates based on Vocabulary Terms using UI5 Smart Controls & generic controller logic How is it displayed
- 6. 6 Entry level view of content on cards Side by side information on various aspects for the given role Support for different information formats Data from multiple sources Easy filtering Support for micro actions Overview Pages
- 7. 7 Overview Pages Extension Capabilities Custom Cards Custom Filters Custom Navigation parameters Custom Navigation targets Custom global actions Custom quick view actions
- 8. 8 Side by side information on various aspects for the given role Key performance indicators on the header area as KPI tags. Filter data sets used for the main content area through different filter modes where users need to see the impact of their filter settings in a chart representation (visual filter). Users need to interact between charts and table views (hybrid-view) Users need to find and act on relevant items out of a large set of items by searching, filtering, sorting, grouping, drilling down Analytical List Page
- 9. 9 ALP Extension Capabilities Refresh API Smart Table Extensions Chart Extensions Creating Custom Filter (Compact Filter) Defining Custom Actions
- 10. 10 The list report allows the user to work with a large list of items. It combines powerful functions for filtering large lists with different ways of displaying the resulting item list. It supports CRUD (Create, Read, Update , Delete)operations List Report template can be used when: The list is huge. There is need of filter bar and search in order to create your own list ListReport floorplan focuses on filtering the content to create a list. List Report
- 11. 11 The object page allows users to display, edit and create objects, as well as to save drafts. It is suitable for both simple objects and more complex, multi-faceted objects. Object Page
- 12. 12 LROP Extension Capabilities Object Page Extension points for : Header facets Section/Subsection Forms Adding Columns to Responsive/Grid/Analytical table in the Object Page Action List Report extensions: Column extension Action Filters in smart filter bar
- 13. 13 A worklist displays a collection of items that are to be processed by the user i.e., the primary focus of the user is on processing the items. Worklist template can be used when: The list is limited . The list usually involves reviewing details of the list items and taking appropriate actions, unlike ListReport floorplan, which focuses on filtering content to create a list. Worklist
- 14. Demo
- 15. 15 List of UI Annotations List Report Object Page UI.LineItem UI.HeaderInfo UI.SelectionFields UI.FieldGroup UI.Identification UI.Facets - UI.CollectionFacet - UI.ReferenceFacet
- 16. 16 SAP Fiori elements: essential enablement information Design Guidelines Developer Documentation SAP Fiori elements on SCN
- 17. 17 Fiori elements developer documentation Developer documentation for SAP Fiori elements Development of OData services with annotations on ABAP In the SAPUI5 Demo Kit Fiori programming model documentation (ABAP) On help.sap.com
- 18. Thank you. Contact information: Prasita Prabhakaran, Product Owner – Overview Pages Ashish Anand, Tech Lead – Overview Pages Rajashree Raghavendra, Dev Manager – Analytical List Page Shwetha Kamath, Quality Expert – LROP and Worklist
Editor's Notes
- #3: High development efficiency to cover what 80% of all apps need You do not need to build the UI again and again. Just reuse the common features required by most applications The metadata-driven development model uses semantic annotations and significantly reduces the amount of front-end code. Developers can focus on the business logic. Predefined floorplans, views, and controllers ensure UI consistency within and across similar apps