Create and Deploy Fiori Elements Application via Quick Fiori Application generator in ADT

Environment: BTP ABAP, S/4HANA Public Cloud

Introduction

To deliver an ABAP Full Stack application to the Fiori Launchpad, we need

1. a ready and published RAP BO Service
2. Fiori Elements (FE) application generated and deployed to the ABAP Instance
3. Fiori Launchpad Configuration

This article is about step 2. It presents one of the three options to execute step 2. Let’s see it !

Based on the published RAP BO service we can generate a Fiori Elements Application and Deploy it to the (BSP Repository of the) ABAP Instance, which at the same time becomes part of the UI5 Component registry.

To execute generation and deployment steps we have several alternatives, use one of them only. In this article we practice Option A.

• Option A: Quick Fiori Application generator in ADT
  • One shot tool using ADT only
  • Generates and Deploys the Fiori App directly to the BSP repository on the ABAP Instance. No additional Git Repository is involved
  • Use when no additional frontend functionality, adjustment or coding is needed
• Option B: Triggering BAS or VSCode from ADT
  • Opens BAS / VSCode from ADT and hands over some basic information about the BO service to kickstart with the FE application generation in BAS / VScode. Then deploy the application.
    Use when additional frontend functionality, coding or FE template customization is required.
• Option C: BAS / VScode
  Start and do FE application generation in BAS / VSCode then deploy.
  Use when You are a pure FrontEnd developer or when non-standard application generation are used.

Quick Fiori Application generator in ADT

Open the Service Binding and press the Create Fiori App button.

Select the Quick Fiori Application option

Select a Package to store the Fiori Application

Press Next.

Generation and Deployment Details

Be very thorough with the chosen parameters used for generation and deployment. You cannot fix them in ADT afterwards !

Service Binding Details

Main entity is usually the Root entity of the RAP BO. Select a child which should be come first as a Table on the Object Page if any.

Project details

It is about the UI5 artefacts and component registry.

Module Name must be unique including a proper namespace which in whole or part corresponds to the Software Component! The module name is what becomes sap.app.id in the manifest.json.

Application Title goes to the i18n.properties text file. You would find it as appTitle inside. The appTitle text is referenced in manifest.json as sap.app.title for example. In ADT however not possible to examine the content files of the BSP Application.

Deployment Details

Repository Name is the BSP Application Name.

Description is simply the text description for that.

Launchpad Settings

Target mapping is the combination of Semantic Object and Action. This You see in the browser URL after the #. when the application is opened.

Semantic Object: It is possibly the RAP BO Name. It mest be written in Pascal case.

Action: possibly the operation performed on the BO. It must be written in lower camel case.

Title: FLP Static Tile title

Subtitle: FLP Static Tile subtitle

Before the final creation You get a popup about the objects which are going to be created.

Press Next again, and wait the generation process to finish.

Overview of the generated Repository Objects

The most important here is the Launchpad App Descriptor Item, which is not changeable in ADT.

Here the UI5 application is combined with the Navigation information and a Static tile.

Technically the Tile is assigned to the Target Mapping. The Target Mapping is assigned to the UI5 Application.
It means when You click on the Tile the system knows which UI5 Application to load from the BSP repository, which is actually a webserver .

If you need anything else, like to choose an appropriate Icon to be shown on the Tile, you need to create a new and changeable App Descriptor Item manually.

The generated objects are pushed to GitHub using abapGit and gCTS.

Summary

We successfully generated a Fiori Elements application, and deployed it to the ABAP Instance using ADT only.

To see the application on the Fiori Launchpad, we need an embedding Launchpad Page/Space/Section assigned to a Catalog and Business Role.