Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ui5con blr fe

test

  • Login to see the comments

  • Be the first to like this

Ui5con blr fe

  1. 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. 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. 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. 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. 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. 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. 7 Overview Pages Extension Capabilities  Custom Cards  Custom Filters  Custom Navigation parameters  Custom Navigation targets  Custom global actions  Custom quick view actions
  8. 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. 9 ALP Extension Capabilities  Refresh API  Smart Table Extensions  Chart Extensions  Creating Custom Filter (Compact Filter)  Defining Custom Actions
  10. 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. 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. 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. 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. 14. Demo
  15. 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. 16 SAP Fiori elements: essential enablement information Design Guidelines Developer Documentation SAP Fiori elements on SCN
  17. 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. 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

×