Fiori elements

The Smart Template approach to rapid creation of SAP Fiori Apps for common use case patterns.
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.

Search:

Search, Questions&Answers, Archives, Blogs

Create:

Question, Blog

New and Updated in the last 3 months:

• YYYY-MM-DD Please share your documents and blogs.
• 2018-11-12 Added blog by Prasita Prabhakaran
  • Fiori OVP Create Custom Cards using Web IDE extension
• 2018-11-05 Added 2 blogs by Prasita Prabhakaran
  • Fiori OVP Create Custom Filters using Web IDE extension
  • Fiori OVP Create Other Extensions using Web IDE extension
• 2018-11-02 Added 3 more blogs by Prasita Prabhakaran
  
  • Stack Cards, Quick View Cads and Actions 
  • Navigation Concepts
  • Unveiling Key User Tools in SAP Fiori Elements - Overview Pages
• 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 
  Fiori elements - How to create an Object Page Extension
• 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

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.

• Getting Started with ABAP Programming Model for SAP Fiori Apps in SAP S/4HANA
• Be prepared for the new ABAP programming model in SAP S/4HANA

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

List Report

• Beacon Bit: SAP Fiori elements - Still Smart as Ever
• 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

Analytical List Page

• Beacon Bit - a look at the Analytical List Page
  

CoPilot Quick Views

• Creating 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)

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

Object Page

• Fiori elements - How to Design an Object Page
• Fiori elements - How to Develop an 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

Overview Page

• How to create SAP Fiori Overview Page
  
• 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

• 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

Other blogs...

• 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

Also see SAP Fiori Overview Page wiki 

Analytical List Page

• 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

Worklist

• Fiori elements – Introducing Worklists for Multiple Item Processing

General Annotations 

For those using OData Services created using txn SEGW

• How to add annotations to an OData service using code based implementation

Extension Options

• Export to Microsoft Excel via the UI Adaptation Editor
• Working with the UI Adaptation Editor
• Fiori Variant Management: Set a Variant as default to ALL users

 

Lessons Learned:

• Some Best Practices derived from the SAP Fiori Templates in SAP Web IDE

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

 

Source: https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+Elements