BTP - Fiori Elements App (Creation)

Table of contents

• Introduction
• Creation
• Template
• Data source
• Project Attributes
• Deployment Configuration
• Fiori Launchpad Configuration
• Structure
• Extension
• Translation
• Icon for tile
• Auto Load
• Conclusion

In the RAP series we built a simple app, today we want to create the app using the Business Application Studio and deploy it to the ABAP Environment. We went into the various steps up to the authorization in the ABAP Environment Launchpad.

 

Introduction

In the last article we looked at the BAS and how it works, we will build on this knowledge and continue in this article. The aim will be to create an app from your OData service as a Fiori Elements app, adapt it at crucial points, deploy it to the ABAP environment and set up authorization so that a user can use it.

 

Creation

As a first step you have to switch to the Business Application Studio, here you can create a template project directly via the "Get Started" tab. The tab will appear every time you start the BAS unless you have already hidden it. If you have already closed it, you can display it again using the search function:

• Click on the search bar at the top of the window (with magnifying glass)
• Enter ">Get Started"
• Selection of the point in the list

 

On the new page you can then start creating a new app using the "Start from template" option:

 

Now the configuration of the Fiori Elements app follows with a wizard. This wizard normally includes the following steps that we want to go through:

 

Template

Then select the item "SAP Fiori application" and press "Start". In the next window we then select "SAP Fiori elements" as the type of the new application and then have the option of choosing the different templates. We have built a "List Report Page" and therefore use this template. This template has an entry page and an object page with details on the selected line.

 

Data source

In the next step we have to choose the system, a destination and the OData we want to work with:

 

The settings should have already been created by you or your BTP administrator, we use this as a prerequisite for the further steps. Next, the entity must be selected from the OData Service and, if available, another entity for the navigation. The system automatically suggests the right entity to us:

 

Project Attributes

Now we define the project attributes, the list is relatively long, so here is a brief explanation of the most important points:

• Module name - name of the folder under projects, so you can find your app later.
• Application namespace - Specifies the namespace for development, this consists of the module and the namespace. The ID should always be unique.
• Project folder path - It's already on your "projects" folder and doesn't need to be changed.
• Minimum SAPUI5 Version - The minimum version that is supported. If you are in the BTP, you can always leave the current version here.
• Add deployment configuration - If the item is selected, the deployment configuration is automatically queried and generated in the next step.
• Add FLP configuration - Then also creates a Fiori Launchpad configuration, which is important to include the app in the FLP of the ABAP Environment.

 

Deployment Configuration

In the next step we create the deployment configuration, this is a file in the app that contains all the settings for the release. The most important fields are explained again here:

• Target and Destination - Since we want to deploy to an ABAP environment, ABAP and the corresponding destination should be assigned here.
• SAPUI5 ABAP Repository - Is the name of the object that is created in the package and under which all files of the BSP application are stored. The name can be up to 15 characters long and can consist of letters and underscores.
• Package - Package in which the app and the launchpad configuration is created. It makes sense to create a new package for all Fiori apps of the project.
• Transport Request - specification of a transport request in which the deployment takes place, but be careful here a transport request and not a task must always be specified.

 

Fiori Launchpad Configuration

The last configuration includes the data for the Fiori Launchpad of the ABAP Environment and the appearance of the app, the points of the configuration are briefly explained here:

• Semantic Object and Action - Semantic object under which the app can be called, the object and the action are always to be regarded as the key. The action can be assigned freely, but terms such as "display" or "manage" have become established.
• Title and Subtitle - Specifies the caption of the tile in the launchpad.

 

The configuration of the app is completed with the "Finish" button and the IDE creates the folder and all files, this may take some time depending on the size.

 

Structure

The app has now been generated in the typical Fiori way, in this section we want to explain the folder structure and bring you closer to the most important objects. The folder structure should now look like this:

 

The most important folders and files are explained here:

• /node_modules - Includes all NodeJS modules and objects required for the app, is automatically generated and reloaded
• /webapp - Contains all app-related files
• /webapp/i18n - Contains the translation files for the multilingualism of the app
• /webapp/manifest.json - configuration of the Fiori app, contains among other things the service, the structure and other configurations
• /ui5-deploy.yaml - Deployment configuration

 

Extension

The app has now been created so far, but we should still adjust a few points to finalize it. We want to store an icon, translate the tile and set the data to be loaded automatically when the app is opened.

 

Translation

The tile is currently maintained in English, but we would still like to translate it into German so that a user receives a translation if he logs on to the FLP in German. To do this, we need to create a file in the i18n folder for the German translation. The folder currently contains an "i18n.properties" which contains the default and fallback language. For German we create another file called "i18n_de.properties", copy the content of the original file and adjust the translation:

# This is the resource bundle for test.bs.zbsdemopartner
#Texts for manifest.json

#XTIT: Application name
appTitle=Demo: Partner App

#YDES: Application description
appDescription=Verwaltung der Partner

flpTitle=Partner
flpSubtitle=Partner verwalten

 

There should now be two files available in the i18n folder:

 

Icon for tile

Without this step, the tile in Launchpad is without an icon, but we would like to add an icon to our app for better visualization. To do this, we first look for a suitable icon using the Icon Explorer of SAP, which we want to see on our tile. In the manifest.json you are now looking for "icon" or "semanticObject" and the icon is inserted at the appropriate place, the file now looks like this:

 

Auto Load

If you now call up the app, nothing would normally be displayed and you would first have to start selecting the data using the "Go" button. However, we would like to display the first data as soon as the app is called up. We can implement this relatively easily with "Guided Development", since as ABAP developers we may have little experience with UI5. To do this, you can right-click on your app's folder and select "Open Guided Development" in the context menu at the bottom, the wizard will then start. In the search you can then search for "auto load":

 

Clicking on "Enable table to auto load data" takes you to the next step. Here you can then immediately select "Step 1" and only have to set "Always" under Mode. This loads the list whenever the app loads.

 

With the "Insert Snippet" button, the corresponding coding of the app is then adjusted without us having to make the adjustments manually. The description of the step also explains what exactly is done.

 

Conclusion

A few steps are necessary for the creation and generation of the Fiori Elements app, but in the end you will be rewarded with little rework and a stable application.