Explaining SAP Fiori Development


After completing this lesson, you will be able to:

  • Explain ABAP programming models
  • Use ABAP Development Tools
  • Explain SAP Fiori elements

ABAP Programming Models

The three phases of the development of an SAP Fiori application are data modeling, service building, and UI development.

Watch the video explaining the key steps of SAP Fiori development. 

ABAP Programming Models

Let's look at how ABAP programming model evolved.

ABAP Development Tools for On-Premise

The ABAP Development Tools (ADT) are a collection of plug-ins for Eclipse supporting development projects reaching beyond pure ABAP. Eclipse is a development environment, originally conceived for Java, that offers a framework for which vendors - including SAP - can provide plug-ins that support development in any given language.

Because different languages and platforms have different requirements, developers need a different set of tools within the same Eclipse window. Such a set of tools is called a perspective combining views and functions suiting for one purpose. There are views showing the source code, structural outline, properties, errors, and many more. Every perspective can be customized, new ones can be created, or existing ones can be reset to the last saved state.

The development objects or source code is organized in projects. Each project defines the frame for the (development) task. The files comprising this task are saved in a local folder.

Install ABAP Development Tools in Eclipse

To install the plug-ins of ADT, proceed as follows:

  1. Get an installation of Eclipse from https://www.eclipse.org/downloads/packages (for example Eclipse IDE for Java Developers).
  2. In Eclipse, choose HelpInstall New Software....
  3. Enter the URI https://tools.hana.ondemand.com/latest.
  4. Choose Enter to display the available features.
  5. Select ABAP Development Tools and choose Next.
  6. On the next wizard page, you get an overview of the features to be installed. Choose Next.
  7. Confirm the license agreements and choose Finish to start the installation.

Create ABAP Project in ABAP Development Tools

Let's look at how to create an ABAP project in ABAP development tools.

Several ABAP projects can be opened in parallel allowing parallel work in several ABAP repositories. Closing Eclipse will log off from every repository. The connection will be re-established when accessing the ABAP project again asking for logon credentials.

The developer needs suitable user authorizations to work via ADT in an ABAP system. A list of roles and authorization objects is available in the following guide:


To enable ABAP developers to share HTTP links between themselves, activate the /sap/bc/adt ICF service. The receiver of the link can then render the target development object in his or her default Web browser

To make documentation available to ABAP developers connected to an AS ABAP lower 7.55, activate the following ICF-services:

  • /sap/bc/abap/docu
  • /sap/bc/abap/toolsdocu
  • /sap/public/bc/abap/docu
  • /sap/public/bc/abap/toolsdocu

ABAP Development Tools in Eclipse

Time to explore the interface of ABAP development tools.

Development Paradigm Shift

SAP HANA is more than just a database. SAP HANA can perform calculations on a data level much faster than any previous technology, including ABAP programs. In the SAP Business Suite, the data was brought to the code. It was read from the database and processed in ABAP. With SAP HANA, it is more efficient to bring the code to the data, by pushing down calculations from the ABAP Platform in SAP HANA and only returning the results.

Moving calculations to the database to benefit from its features is not new to SAP HANA. Stored procedures could be used previously for calculations in many databases. However, they were rarely used in ABAP. They only run in the database they are developed in and are not transportable. With SAP S/4HANA, the ABAP repository was extended with two new database objects: ABAP Core Data Services (CDS) Views and ABAP Managed Database Procedures (AMDP). ABAP CDS Views are deployed as SAP HANA views in the SAP HANA Database (HDB), and the AMDPs are deployed as stored procedures. This is comparable to deploying a transparent table of the ABAP repository as a database table in any DB.

ABAP Database Objects

Test ABAP CDS Views

Business Scenario

You want to examine and test a DDL SQL and ABAP CDS view in the ABAP Development Tools (Eclipse).

This exercise requires an SAP Learning system. Login information are provided by your system setup guide.


  1. Start Eclipse and create an ABAP project connecting to your SAP S/4HANA (S4H) system.

    1. In the Windows start menu, choose Eclipse IDE.

    2. Close the Welcome screen.

    3. Choose Open Perspective in the upper right corner.

    4. Select ABAP and choose Open.

    5. Choose NewABAP Project.

    6. Choose the SAP GUI SNC entry of your S4H and choose Next >.

    7. In the Connection Settings, choose Next >.

    8. In the Client field, enter the client of your S4H.

    9. In the User field, enter your user.

    10. Choose Finish.

  2. Examine and test the DDL SQL view UX100CPROD in Eclipse on your S4H.

    1. In Eclipse, choose FileNavigateOpen ABAP Development Object....

    2. In the Search field, enter ux100cprod.

    3. Select UX100CPROD (Dictionary View) and choose OK.

    4. Examine the SQL view.

    5. In the Data Dictionary tool, choose MoreContents.

    6. Choose Execute.

    7. Examine the list of products in the Data Browser.

  3. Examine and test the CDS view UX100_C_Product in Eclipse on your S4H.

    1. In Eclipse, choose NavigateOpen ABAP Development Object....

    2. In the Search field, enter ux100_c_product.

    3. Select UX100_C_Product (Data Definition) and choose OK.

    4. Examine the CDS view.

    5. Choose RunRun AsABAP Application.

    6. Examine the list of products in Eclipse.

SAP Fiori Elements

SAP Fiori elements is a metadata-driven development of SAPUI5 applications and distinguishes the following floorplans:

List Report
Object Page
Overview Page
Analytical List Page

SAP Fiori Elements Data Flow

The main source of the metadata for SAP Fiori elements are metadata extensions in the Core Data Services (CDS). Although you can add UI-annotations directly in data definitions, it is recommended to separate the definition of the UI from the data model definition.

The metadata of the SAP Gateway service providing the business data provides the parts of the UI definition suitable to the OData standard. On top of that the /IWFND/CATALOGSERVICE of the SAP Gateway framework provides all other parts, which are not allowed to be part of the metadata of an OData service.

In the SAPUI5 development environment, you can enrich the UI definition by adding annotations in the annotation.xml or by mapping page config files. These JSON-files describe certain parts of the UI in more detail.

Core Data Services Metadata Extension Example

Let's go through an example of a code data services metadata extension.

This example shows the definition of a list report combined with an object page. At the top, some general header information for both SAP Fiori elements are set. Then an object page facet is created defining a frame for the data. The ProductUUID is hidden from the user. Product is the semantic key defined as line item in the list report. Finally Price is set as an identifier in the object page.

ABAP Development Tools - Preview in Service Binding

Without using any SAPUI5 development environments, a preview of the list report can be provided via a service binding in the ABAP Development Tools (ADT). This preview directly runs on the ABAP system the ADT is connected to but does not perform any deployment. Only the UI-annotations in data definitions and metadata extensions are taken into account, the metadata available on the ABAP-level.

SAP Fiori Tools - Guided Development

The SAP Fiori tools as part of the SAP Business Application Studio and available in Visual Studio Code are the recommended tool for developing the SAP Fiori elements artifacts on UI-level. The Guided Development of the SAP Fiori tools offers many guides to add additional features to the application. A guide offers a documentation of steps, screenshots of the expected result, code-snippets, and often a wizard for applying the feature directly in an application in the workspace.

Perform the steps to navigate the Guided Development of the SAP Fiori tools.

Test SAP Fiori Elements List Report

Business Scenario

You want to examine the source of an SAP Fiori elements list report and test it in the SAP Fiori launchpad.

This exercise requires an SAP Learning system. Login information are provided by your system setup guide.


  1. In Eclipse connected to your SAP S/4HANA (S4H) system, examine the UI-definition in the metadata extension of the UX100_C_PRODUCT data definition.

    1. In Eclipse connected to your S4H, open the UX100_C_PRODUCT data definition.

    2. In the Outline, right-click UX100_C_PRODUCT.

    3. Choose Get Where-used List.

    4. In the Search view, double-click UX100_M_PRODUCT (Metadata Extension).

    5. Examine the @UI-tags in the metadata extension.

  2. Check the source name of the data exposed by the UX100_UI_PRODUCT_LIST service definition. Examine the data provided by the list report preview of the UX100_UI_PRODUCT_LIST service binding.

    1. In the Search view, double-click UX100_UI_PRODUCT_LIST (Service Definition).

    2. Check the exposed data source name.

    3. In the Outline, right-click UX100_UI_PRODUCT_LIST.

    4. Choose Get Where-used List.

    5. In the Search view, double-click UX100_UI_PRODUCT_LIST (Service Binding).

    6. In the Entity Set and Association list, select Product.

    7. Choose Preview....

    8. In the Select a certificate popup, select your certificate and choose OK.

    9. In the list report, choose Go.

    10. Examine the list of products.

  3. In the SAP Fiori launchpad of your S4H, test the Display Products app of the UX100 - SAP Fiori Elements catalog.

    1. In the SAP Fiori launchpad of your S4H, choose Home in the upper left corner.

    2. In the Navigation Menu, choose UX100 - SAP Fiori Elements from the list of catalogs.

    3. Choose Display Products.

    4. Choose Go.

    5. Operate the app as you wish.

Log in to track your progress & complete quizzes