8.4    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.

Figure 8.50    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 in Figure 8.50 are available with SAP Fiori elements.

8.4.1    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 in the form of actionable cards on a single page, enabling users to make faster decisions and focus on their most important tasks (see Figure 8.51).

Figure 8.51    SAP Fiori Overview Page

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 Figure 8.52; 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.

Figure 8.52    Card Types

8.4.2    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 (see Figure 8.53).

Figure 8.53    List Report

8.4.3    Object Page Floorplan

Object Page (as seen in Figure 8.54) 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 prebuilt SAP Fiori element.

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.

Figure 8.54    Object Page

8.4.4    Exercise

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.

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 (see Figure 8.55).
4. Enter a Project Name and click Next (see Figure 8.56).
5. Select the Service Catalog and the Server.
   

   Figure 8.55    Overview Page Template

   

   Figure 8.56    Project Name

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 (see Figure 8.57).
7. In the Annotation window, for now, just click Next (see Figure 8.58). 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.
   

   Figure 8.57    Data Connection

   

   Figure 8.58    Annotation File

8. Enter Technical and General details, such as the App Title and App Description, then click Finish (see Figure 8.59).
   

   Figure 8.59    Template Customization

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

1. Right-click the project and select New, then click Card (see Figure 8.60).
   

   Figure 8.60    Adding New Card

2. Verify the datasource and click Next (see Figure 8.61).
   

   Figure 8.61    Datasource

3. Select List from the list of cards and click Next (see Figure 8.62).
   

   Figure 8.62    List Card

4. Select the Entity Set from the dropdown, and enter the Title and Subtitle (see Figure 8.63).
   

   Figure 8.63    General Details

5. Scroll down to view Annotations and Card Properties (see Figure 8.64). Annotations are usually preselected. Select the card properties, then click Next.
   

   Figure 8.64    Annotations and Card Properties

6. Click Finish.
7. Right-click the project and select Run, then select Run Configurations (see Figure 8.65).
   

   Figure 8.65    Run Overview Page

8. Select Run Component.js, then click Save and Run (see Figure 8.66).
   

   Figure 8.66    Run Configuration

9. You should now see the list card that you created in this exercise (see Figure 8.67).

Figure 8.67    SAP Fiori Overview Page

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 desitination (e.g., SAPUI5 ABAP Repository or SAP Cloud Platform).

SAP Fiori Elements Help

For more information on SAP Fiori elements, go to https://sapui5.netweaver.ondemand.com and click Developing Apps with SAP Fiori Elements.