The Smart Template approach to rapid creation of SAP Fiori Apps for common use case patterns.
PLEASE NOTE: If you need to raise a SAP Incident relating to general Fiori elements behaviour then please use the support component CA-UI5-ST.
If you need to raise a SAP Incident for a specific Fiori app or other Fiori behaviour, please follow the advice in the Guided Answer: How to create the perfect Fiori incident.
ANNOUNCEMENT: You can now request a SAP Code Jam on the topic "ABAP for SAP HANA with Fiori"
 |
This is a collaborative document to share lessons learned contents for SAP Fiori elements (formerly known as Smart Templates) in the community SAP Fiori.
Please feel free to insert the link of your document or blog by selecting the edit button from Actions. You can also search information and open a discussion if you can't find required information. Please don't forget to put the tag Fiori.
New and Updated in the last several months:
- YYYY-MM-DD Please share your documents and blogs.
- 2021-05-25 Added by Uladzislau Pralat
- 2021-04-22 Added
- My experience with Fiori Elements: Custom App Development & Standard App Extensibility by Mohit Bansal
- My experience with Fiori Elements: Custom App Development & Standard App Extensibility(Part2) by Mohit Bansal
- My experience with Fiori Elements: Custom App Development & Standard App Extensibility(Part 3) by Mohit Bansal
- 2020-12-15 Added
- Complex Tree Hierarchical Fiori Elements based List Report – Challenges & Technical Solution Design by Mohit Bansal
- S/4HANA Fiori Extension Real Time Scenario – Extending Display Line Item in General Ledger by Mohit Bansal
- Keeping S/4HANA Fiori Overview Page System Resources Utilization Under Control by Uladzislau Pralat
- 2020-11-27 Added
- 2020-08-03 Added Fiori Element’s List Report : Dynamically control table display based on the device type by Mohit Bansal
- 2020-06-24 Added
- 2020-02-14 Added news section for Fiori tools and customer experiences, added blogs
- 2019-12-18 Added Fiori elements Feature Map - which features are supported in which Floorplans - from the SAPUI5 SDK
- 2019-12-17 Added Fiori Elements extensibility using CDS and KUE (Key User Extensibility Tool) by Mohit Bansal and SAP Fiori Overview Page – Intelligent Top N List Card by Uladzislau Pralat
- 2019-12-05 Added SAP Fiori Overview Page – Custom Info Card by Uladzislau Pralat
- 2019-12-04 Added Overview Pages in SAP S/4HANA – a good place to start by Jocelyn Dart + the available videos from Getting started with SAP Fiori elements video series
- 2019-11-21 Added Linde uses SAP Fiori elements to reduce pressure on their development pipeline by Conrad Bernal
- 2019-10-24 Added Fiori Elements – A Journey of Building an Action Dialog on a List Report using Annotations by Peter Jirsak and SAP Fiori for SAP S/4HANA – Adding Export to Excel to a standard SAP Fiori elements app using a Adaptation Project
- 2019-09-01 Added Fiori elements Usage Guide and Extending Fiori elements by Peter Spielvogel
- 2019-08-21 Added a new ALP blog series by Anish Anand
- 2019-08-15 Added Fiori elements: Tips and TricksFiori elements: Tips and Tricks and Fiori elements actions and function imports in List Reports by Joseph Berthe, Fiori elements utilizing CDS with Virtual elements by Mohit Bansal, and Authorization checks in apps using Fiori elements by Saraubh Sharma
- 2019-07-26 Added Fiori Element: Collective / Multiple value help on selection field by Mohit Bansal
- 2019-06-20 Added Getting Started with Fiori Elements Video Series
- 2019-06-21 Added Fiori Elements-Value help on a selection field within a value help dialog by Mohit Bansal
- 2019-06-06 Added 10 interesting hacks for Fiori elements (List Report, Object Page) by Saurabh Sharma
- 2019-05-16 Added SAP Fiori Elements Analytical List Page - The anatomy and SAP Fiori Elements Analytical List Page - Creating the basic App by Prasita Prabhakaran
- 2019-04-30 Added Ordering of Visual Filters in Analytical List Page by Anuj Bhai Mehta
- 2019-04-11 Added Fiori Elements Tree Table with SAP Annotations by Sumit Kunar Kundu
- 2019-03-27 Added the Extending a SAP Fiori Elements application using Adaptation Projects video - re the new option for extending SAP delivered Fiori elements apps with breakout extensions
- 2019-03-27 Added a bunch of new blogs from customers. Thanks to Akshaya Parthasarathy Mahesh Kumar Palavalli Kiran Israni Saurabh Mathur Pawan Kesari Abyson Joseph Mahesh Kumar Palavalli Ravikant Ranjan
- 2019-03-04 Added blog Fiori for S/4HANA – Tips for Fiori Element based Developments by Tejas Chouhan
- 2019-01-14 Added blog by Prasita Prabhakaran
- 2018-11-12 Added blog by Prasita Prabhakaran
- 2018-11-05 Added 2 blogs by Prasita Prabhakaran
- 2018-11-02 Added 3 more blogs by Prasita Prabhakaran
- 2018-10-11 Added SAP Fiori Elements Overview page (OVP) blog series by Ashish Anand
- 2018-08-30 Added Fiori OVP: Navigation with context by Krishna Kishor Kammaje
- 2018-08-30 Added Fiori Variant Management: Set a Variant as default to ALL users by Krishna Kishor Kammaje
- 2018-08-30 Added Fiori OVP Defaulting Values into Global Filters by Krishna Kishor Kammaje
- 2018-07-12 Another one by Felipe on Understanding possibilities and limitations when working with Fiori elements
- 2018-07-09 added more blogs by Fellpe de Mello Rodrigues and others
- 2018-06-19 updated Beacon links and added Learning FloorPlans and Layouts too
- 2018-05-09 added Creating CoPilot Quick Views
- 2018-04-17 added SAP Note ES: Annotations for CDS-based search connectors
- 2018-04-05 added Create an analytical model based on ABAP CDS views and Create an Analytical List Page using ABAP CDS views and annotations by Felipe de Mello Rodrigues
- 2018-03-11 Added Turn your List Report into a Master-Master-Detail app with Flexible Column Layout
- 2018-03-10 Added Adding a Contact Quick View to a table without CDS by Joseph Berthe and How to add annotations to an OData service using code based implementation by Andre Fischer
- 2018-01-25 Added Create KPIs with data points and criticality in a SAP Fiori Overview Page
- 2018-01-25 Added blogs by Prasita Prabhakaran on Overview Page e.g. SAP Fiori Overview Page - Table Cards in Detail
- 2018-01-25 Added Fiori elements – Introducing Worklists for Multiple Item Processing and links to Annotation Modeler + relevant Beacon bits videos
- 2018-01-19 Added 3 blogs on custom list report options by Phanipoorna Avula
- 2018-01-11 Fiori elements - List Report Sorting, Grouping, and Table Types
- 2017-12-19 Added 2 blogs on custom extensions by Ananthanarayanan P
- 2017-12-14 Added ABAP Programming Model for SAP Fiori blogs for end-to-end programming perspective.
- 2017-10-29
- 2017-10-29 Added new article to Overview Stay Smart with SAP Fiori Elements
- 2017-08-27 Fiori elements - Export to Microsoft Excel via the UI Adaptation Editor
- 2017-08-22 Fiori elements - How to Develop an Object Page
- 2017-08-13 Fiori elements – Percentage Progress Indicators
- 2017-08-09 Fiori elements – Status Icons and Semantic Colors
- 2017-08-06 Fiori elements - How to design an Object Page
- 2017-07-19 Added 3 Youtube videos for List Report
- 2017-07-12 Added links to official documentation re the programming model for Fiori elements
Overview:
- Stay Smart with SAP Fiori Elements
- Introduction to SAP Fiori Elements - Fiori Design Guidelines
- Learning FloorPlans and Layouts too
- Fiori Elements – Why cookie cutters make me happy
- Fiori Elements – Even List Reports need Design
- Understanding possibilities and limitations when working with Fiori elements
- Fiori for S/4HANA – Tips for Fiori Element based Developments
- Fiori elements Usage Guide
- Fiori elements Feature Map - clarifies which features are supported in which Fiori elements floorplans
- Linde uses SAP Fiori elements to reduce pressure on their development pipeline
News and customer experiences:
- SAP Fiori Tools generally available
- Tutorials for SAP Fiori Tools
- Planned SAP Fiori tools will simplify SAP Fiori elements development – call for beta
- Yorkshire Water uses SAP Fiori Elements to build Fiori apps quickly
- VIDEO: Partners Share Real-World Development Experiences with SAP Fiori elements
ABAP Programming Model for SAP Fiori
The ABAP Programming Model for SAP Fiori is the end-to-end programming model of which Fiori elements is the frontend UI component. Combining the ABAP Programming Model with Fiori elements allows rapid, scalable, creation of Fiori apps on top of SAP NetWeaver AS ABAP environments (SAP AS NetWeaver ABAP 7.5 and above).
This programming model is the strategic approach that SAP both uses and recommends in SAP S/4HANA.
NOTE: However Fiori elements can be used with other (non-ABAP) OData Services ... with some limitations, and provided suitable semantic annotations and related OData features are available.
Official Documentation:
- Developing Apps with Fiori elements
- ABAP Programming Model for SAP Fiori
- Developing List Reports with Search and Analytical Capabilities
- Developing New Transactional Apps - using List Reports/Object Page and Business Objects
- Developing New Transactional Apps with Draft Capabilities
- Defining CDS Annotations for Meta-driven UIs
- UI Annotations reference
- SAP Note ES: Annotations for CDS-based search connectors
Videos:
Why Fiori Elements mattter - from the Design team
Getting Started with Fiori Elements Video Series - from the SAP UX Engineering Youtube Channel
Extending a SAP Fiori Elements application using Adaptation Projects - how to add breakout extensions to SAP delivered Fiori elements apps
List Report
- Beacon Bit: SAP Fiori elements - Still Smart as Ever
- Getting Started with SAP Fiori elements: Introducing List Report and Object Pages
- Getting Started with SAP Fiori elements: Creating List Report and Object Pages
- Creating a List Report Application with SAP Fiori Elements
- Adding Fields to a List Report Table with SAP Fiori Elements
- Adding a Default Filter to a List Report with SAP Fiori Elements
Object Page
- Adding a Field Group to an Object Page with SAP Fiori Elements
- Fiori elements - How to create an Object Page Extension
Overview Page
- Beacon Bit - a look at the Overview Page
- Getting started with SAP Fiori elements: Introducing Overview Pages
- Getting started with SAP Fiori elements: Creating Overview Pages
Analytical List Page
- Beacon Bit - a look at the Analytical List Page
- Getting Started with SAP Fiori elements: Introducing Analytical List Pages
- Getting Started with SAP Fiori elements: Creating an Analytical List Page Application
CoPilot Quick Views
Using the Annotation Modeler
- Getting started with the SAP Web IDE annotation modeler
- Annotating Entity Sets in SAP Web IDE
- Annotation Modeler: Applying Annotations to Entity Type Properties
- Defining Annotation Properties with the Annotation Modeler
- Defining Expression Type for Annotation Properties
- Defining Path Values with the Annotation Modeler
Searching for annotations in SAP Web IDE
How to Guides:
List Report
- Fiori Elements - How to Develop a List Report - Basic Approach
- Fiori Elements - How to Develop a List Report - using Local Annotations
- Annotating and Extending Fiori Elements Applications
- Annotating and Extending Fiori Elements List Report Part 1
- Annotating and Extending Fiori Elements List Report Part 2
- Annotating and Extending Fiori Element Applications: List Report Part 3
- Creating an SAP Fiori Smart Template Application - BYO Fiori App in the Cloud (2016)
- SAP FIORI ELEMENT: List Report For Beginners
Special techniques to enhance your List Report
- Turn your List Report into a Master-Master-Detail app with Flexible Column Layout
- How to add a new column to a responsive table under ListReport and ObjectPage of a Smart template application
- Adding a Contact Quick View to a table without CDS
- Fiori elements – Status Icons and Semantic Colors
- Fiori elements – Percentage Progress Indicators
- Export to Microsoft Excel via the UI Adaptation Editor
- Fiori elements - List Report Sorting, Grouping, and Table Types
- Custom List Report FIORI Functionalities – Part 1 – Navigation Toggle
- Custom List Report FIORI Functionalities – Part 2 – Outbound Navigation
- Custom List Report FIORI Functionalities – Part 3 – Default Settings
- How to call a GUI transaction from Fiori List report template based application
- Fiori List Report:Creating multiple Object Pages and Navigation
- Fiori list report application showing data in multiple tabs
- Fiori Elements – Bullet Micro Chart in List Report
- Dropdown List in Fiori Elements
- Fiori Elements List report- Selection fields(Smart Filterbar) sharing filter values
- Fiori Elements- Extension and Customization- Step by Step
- Fiori Elements Tree Table with SAP Annotations
- 10 interesting hacks for Fiori elements (List Report, Object Page)
- Fiori Elements-Value help on a selection field within a value help dialog
- Fiori Element: Collective / Multiple value help on selection field
- Fiori elements: Tips and Tricks
- Fiori elements utilizing CDS with Virtual elements
- Fiori elements actions and function imports in List Reports
- Authorization checks in apps using Fiori elements
- Fiori Elements – A Journey of Building an Action Dialog on a List Report using Annotations
- SAP Fiori for SAP S/4HANA – Adding Export to Excel to a standard SAP Fiori elements app using a Adaptation Project
- Using Virtual Elements with CDS in Fiori elements
- Multiple Level/Multiple Child Draft Enabled FIORI Elements List Report
- Fiori Element’s List Report : Dynamically control table display based on the device type
- Complex Tree Hierarchical Fiori Elements based List Report – Challenges & Technical Solution Design by Mohit Bansal
- S/4HANA Fiori Extension Real Time Scenario – Extending Display Line Item in General Ledger by Mohit Bansal
Object Page
Special techniques to enhance your Object Page
- How to add extension points to smart template application using ReplaceFacet via breakouts
- Smart Charts in a SAP Fiori Object Page using ABAP CDS Views and Annotations
- Fiori Elements extensibility using CDS and KUE (Key User Extensibility Tool)
Overview Page
- How to create SAP Fiori Overview Page
- Overview Pages in SAP S/4HANA – a good place to start
- SAP Fiori Overview Page blog series by the Product Owner
- Table Cards in Detail
- List Cards in Detail
- All about Chart Cards - Part 1
- Stack Cards, Quick View Cads and Actions
- Navigation Concepts
- Unveiling Key User Tools in SAP Fiori Elements - Overview Pages
- Fiori OVP Create Custom Filters using Web IDE extension
- Fiori OVP Create Other Extensions using Web IDE extension (Includes Custom Navigation Parameters, Custom Navigation Targets and Modify Startup Parameters extensions)
- Fiori OVP Create Custom Cards using Web IDE extension
- Fiori OVP Analytical Cards Part 1
- Fiori OVP Analytical Cards Part 2
- SAP Fiori Elements Overview page (OVP) blog series
- Overview Page whats and hows
- Overview Page create a bare bones OVP application
- Configuring Smart Filter Bar of an Overview Page
- Overview Page Card Headers
- Overview Page Card Navigation and Authorization
- Overview Page List and Table Card
- Overview Page Stack Card
- Overview Page Linklist Cards
- Overview Page Custom Cards
- Overview Page Developer Extension
Special techniques to enhance your Overview Page
- Create KPIs with data points and criticality in a SAP Fiori Overview Page
- Replace relative dates with real dates in your SAP Fiori Overview Page
- Create your own custom card in a SAP Fiori Overview Page
- Fiori OVP Defaulting Values into Global Filters
- Fiori OVP: Navigation with context
- SAP Fiori Overview Page – Custom Info Card
- SAP Fiori Overview Page – Intelligent Top N List Card
- Keeping S/4HANA Fiori Overview Page System Resources Utilization Under Control by Uladzislau Pralat
- Column Stacked 100% Chart with S/4HANA Fiori Elements Overview Page
- Tip of a day: Switching Fiori Overview Page Pie Chart Value and % of Total
Also see SAP Fiori Overview Page wiki
Analytical List Page
SAP Fiori Analytical List Page blog series
- SAP Fiori Elements Analytical List Page - The anatomy
- SAP Fiori Elements Analytical List Page - Creating the basic App
- Create an analytical model based on ABAP CDS views
- Create an Analytical List Page using ABAP CDS views and annotations
- Create an Analytical report in 5 minutes
- Ordering of Visual Filters in Analytical List Page
- SAP Fiori Elements Analytical List Page (ALP) : what and hows
- Configuring filters area of an Analytical List Page (ALP) application
- Configuring chart content area of an Analytical List Page (ALP) application
- Configuring table area of an Analytical List Page (ALP) application
Worklist
General Annotations
For those using OData Services created using txn SEGW
Extension Options for delivered SAP Fiori apps
Customer experiences with extensions:
- My experience with Fiori Elements: Custom App Development & Standard App Extensibility
- My experience with Fiori Elements: Custom App Development & Standard App Extensibility(Part2)
- My experience with Fiori Elements: Custom App Development & Standard App Extensibility(Part 3)
Related Links:
- SAP Fiori Overview Page wiki on SCN
- Sample Applications based on Fiori Elements
- Fiori Element Prototypes in BUILD Help Center
- Introduction to SAP Fiori Elements in Fiori Design Guidelines
- ABAP CDS Annotations reference in help.sap.com
- CDS Annotations for Metadata-Driven UIs
| Brought to you by the SAP Technology RIG |