Programming

What Are SAP Fiori Elements?

To reduce the amount of front-end code while developing an SAP Fiori app and to keep the design consistent, SAP introduced a framework to generate UIs; it’s called SAP Fiori elements.

 

SAP Fiori elements uses metadata annotations and predefined templates to generate an SAP Fiori app. With the latest release of SAPUI5 (version 1.44), the floorplans shown below are available with SAP Fiori elements.

 

New Overview Page Application

 

Types of SAP Fiori Element Floorplans

Overview Page

The SAP Fiori overview page application is a type of floor plan with a UI framework that provides quick access to vital business information at a glance. This is in the form of actionable cards on a single page, enabling users to make faster decisions and focus on their most important tasks.

 

Procurement Overview

 

Cards are containers for app content, and they represent an entry-level view of the most relevant app data for a given topic. The SAP Fiori overview page contains five types of cards, shown in this figure:

 

New Card

 

Each type of card allows users to visualize information in an interactive and efficient way:

  1. List: List cards display items in a vertical list.
  2. Link list: Link list cards display items as links or images that can navigate to a target or open a pop-up window with additional information.
  3. Table: Table cards display items in a table format.
  4. Stack: The stack card is a special type of card that displays a collection of single object cards. This type of card has two clickable areas; the left area navigates to the parent app, and the right area opens the object stream.
  5. Analytic: Analytic cards consist of two areas: a header area that displays the aggregated values of a KPI and a chart area that displays data in a graphical format.

List Report Floorplan

The second type of floorplan is the List Report application, a reusable floorplan template that allows users to work with large lists of items and act on each one.

 

Manage Products

Object Page Floorplan

Object Page (as seen below) is another type of floorplan template, which allows users to display, create, or edit an item. The Object Page floorplan can be implemented using the pre-built SAP Fiori element.

 

Object Page Floorplan

 

Exercise: Developing SAP Fiori Apps with SAP Fiori Elements

Now that you understand the different floorplans available with the latest SAPUI5 release, we’ll walk step-by-step through how to develop SAP Fiori apps using SAP Fiori elements.

 

In this exercise, we’ll cover the end-to-end scenario of developing a basic SAP Fiori overview page using SAP Web IDE and the deployment to your SAP Fiori launchpad. All the data in the overview page is based on the Supplier List OData service. Let’s get started; follow these steps.

To Create an Overview Page:

1. Login to SAP Web IDE.

 

2. Create a new project, and choose New Project from Template.

 

3. Select SAP Fiori Elements from the Category dropdown, select Overview Page Application, and click Next.

 

New Overview Page Application

 

4. Enter a Project Name and click Next.

 

Naming Overview Page

 

5. Select the Service Catalog and the Server.

 

6. Select the OData service on which you’d like to build the app, then click Next. In our example, we selected the Supplier Invoice OData service.

 

Connecting Data

 

7. In the Annotation window, for now, just click Next (see below). An annotation file is a semantic description of an OData service; in general, an annotation file should be populated, and you can create your own annotation file and upload it in this step in the future.

 

Annotation Section

 

8. Enter Technical and General details, such as the App Title and App Description, then click Finish.

 

Template Customization

 

You’ve successfully created an SAP Fiori overview page project from a template. Next, let’s create a card.

To Create a Card

1. Right-click the project and select New, then click Card.

 

Creating a Card

 

2. Verify the data source and click Next.

 

Configure Datasource

 

3. Select List from the list of cards and click Next.

 

Select Card

 

4. Select the Entity Set from the dropdown, and enter the Title and Subtitle.

 

Template Customization

 

5. Scroll down to view Annotations and Card Properties (see below). Annotations are usually pre-selected. Select the card properties, then click Next.

 

Annotation

 

6. Click Finish.

 

7. Right-click the project and select Run, then select Run Configurations.

 

Configuration

 

8. Select Run Component.js, then click Save and Run.

 

Run Configuration

 

9. You should now see the list card that you created in this exercise.

 

Supplier Invoices List

 

To add more cards to the overview page, you can follow the same steps and add different types of cards. Once your overview page is ready to deploy, right-click the project and select Deploy, then select the destination (e.g., SAPUI5 ABAP Repository or SAP Cloud Platform).

 

Conclusion

Now you know how to utilize SAP Fiori elements in your development processes. Ready to take the next step? Learn even more about SAP Fiori elements at https://sapui5.netweaver.ondemand.com. Choose the Developing Apps with SAP Fiori Elements option.

 

Editor’s note: This post has been adapted from a section of the book SAP Fiori Implementation and Development by Anil Bavaraju.

Recommendation

SAP Fiori Implementation and Development
SAP Fiori Implementation and Development

The SAP Fiori 2.0 design concept is here. See how to take your UI to the next level with this all-in-one resource to implementing and developing analytical, transactional, and fact sheet apps. Get the low-down on SAP Fiori's all-new look, SAP S/4HANA support, and more. This guide to Fiori has your back—implement, create, and customize!

Learn More
SAP PRESS
by SAP PRESS

SAP PRESS is the world's leading SAP publisher, with books on ABAP, SAP S/4HANA, SAP C/4HANA, intelligent technologies, SAP Cloud Platform, and more!

Comments