Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Arvind
Product and Topic Expert
Product and Topic Expert
What is Fiori Elements?

SAP Fiori elements is a framework for generating uniform patterns of UI screens. The framework consumes metadata and annotations to provide the predefined templates and could be used for most of the application. The motive is to maintain design consistency and  to reduce the amount of frontend code for building SAP Fiori apps.

Note: Fiori Elements was earlier referred as Smart Template.

Fiori Elements are classified into four broad categories;

  • List Report

  • Object Page

  • Analytical List Page

  • Overview Pages


 

List Report (LR):

List Report enables user to list the object details in a tabular fashion and has a refined filtering provisioning, which could enable variety way of displaying desired results.



Picture#1: List Report and features

 

Object Page (OP):

Objects Page in Fiori Elements provides options to detail/ create/ delete objects. The Object Page consists of object header, facets(sections), toolbar, footer toolbar, personalization settings - to enable  columns to be shown / hidden.

Object page supports image, micro charts, progress bar and rating indicators

 



Picture#2: Object Page

The object pages could contain sub-object pages / child pages as per business requirements. The object pages also offer draft functionality, wherein a edited / unsaved data could be revisited at later point in time for respective actions.

 

 

Analytical List Page (ALP):

As the name suggests Analytical List Page provides option to display analytical data in combination with charts and transnational data. ALP has extended features from List Report, which makes it more dynamic and hybrid in nature.



Picture#3: Analytical List Page

 

Overview Page(OVP):

Overview page are responsive page and provides an option to user to see all the details in a single page. OVP is represented in cards like pattern and covers various information in a single screen.



Picture#4:Overview Page

 

Fiori Elements is a precise way of enabling users to maintain consistency and uniformity in UI screens across applications and provides all major features as an out-of-box solution, reducing in development efforts, ROI and TCO.

The objective / goal is to achieve simplified UI with better performance with very little efforts to achieve desire format of representation.

 

For further information and details regarding Fiori Elements refer,

https://help.hana.ondemand.com/webide/frameset.htm?22042f4fecfe4c6eab0a1509c85d01ff.html

https://experience.sap.com/fiori-design-web/smart-templates/