Fiori Customization

Posted by Thorsten Müller on April 6, 2021 at 9:31 AM
Thorsten Müller
Find me on:

TL;DR: With a custom-theme as well as with the key-user tools we are able to quickly make changes that our Fiori apps or our Fiori Launchpad appear in a new brilliance. With a bit more time we can start an adaption project to enhance the functionality of a Fiori app.

Introduction

This is the second post of this blog series. In this blog post I want to show you which customization options there are for Fiori apps. We will focus on the UI, since there are several interesting opportunities to modify the UI.

There are three options:

  • We can create a custom-theme
  • We can leverage the key-user tools to modify the UI during runtime
  • We use the Web IDE or Business Application Studio to manually write a small extension via an adaptation project.

Custom-theme

The first option to modify the UI is to make use of a custom theme. To create a custom theme we use the ‘Theme Designer’. You can start the theme designer with transaction UI5/THEME_DESIGNER (important: use chrome as a browser since it doesn’t work in every browser).

The start screen of the theme designer looks like the following picture. From here you can modify or create a new theme.

UI5 Theme Designer

When you create a new theme you will be asked to enter a link, which points to the app. Here you can enter the link of your Fiori Launchpad. By doing so all apps on the launchpad will appear in the same theme once the theme is set.

Fiori Launchpad

When the theme is created and built (via safe & built in the picture above) it is available on the chosen apps. All users can access it from the launchpad settings in the user menu. Moreover, it can be set as a default theme. To set a theme as the default theme on the Fiori launchpad there are further transactions. The first one is used to set a created theme as default theme for the system UI2/NWBC_CFG_CUST. The second transaction is for the administration of the themes UI5/THEME_TOOL.

Key-user tools

The key-user tools are a set of apps which provide different extensibility options. The key-user apps were developed by SAP to make extension projects easier and more cost efficient. In some parts, this works well. One example is that with the key-user tools we are able to modify the UI of an app during runtime. With the UI adaptation it is possible

  • to sort sections of an app via drag and drop
  • to combine fields (or split combined fields)
  • to hide fields
  • to change labels
  • as well as to add new fields to the UI.

When you want to play around with them assign the role SAP_UI_FLEX_KEY_USER to your user and activate the ICF node /sap/bc/ui2/flp. Once this is done, you can start the key-user tools via the user menu.

P.S. we set a custom theme and hence the apps in our Fiori Launchpad look different.

Fiori key-user tools

The changes you’ve made can be added to a transport request and hence they can be made available for specific systems.

UI5 Adaption

Adding new fields to the UI can be a bit tricky, as it depends on the fields the OData service sends to the app. If the desired field is not available in the app, the OData service has to be extended. Even though the key-user tools are a strong tool, sometimes it is not suitable and we need to manually extend the app ourselves. To do so, we will take a look at adaptation projects.

Adaptation project

Another way to customize the UI or the application logic of an app is via an adaptation project. This can be in the Web IDE or the Business Application Studio. With an adaptation project it is possible to see which extension points are available. Extension points are kind of predefined interfaces. With those extension points it is possible to quickly extend the existing app.

Another way to discover the extension points is to check the section ‘Extensibility’ in tab ‘Implementation Information’. In the section is a link to a documentation page about the different extensibility options for the specific app.

In order to extend apps this way, we have to make sure that they are developed with UI5. You can see this when you select an app in the Fiori apps library and then check the application type.

Employee Lookup

With the presented customizing options we can quickly make useful changes as well as let Fiori apps appear in our own theme. When more changes on a Fiori app are desired an adaption project might be the correct choice. In the next post we will take a look towards a more technical extensibility feature which comes handy into place when the adaption project does not provide enough extensibility features.

 

 

Topics: Fiori

Thorsten Müller

Written by Thorsten Müller

Thorsten experiences different types of front-end technologies within the SAP cosmos. Open to learn new technologies to be able to choose the correct technique for the desired outcome.

Feel free to leave a comment!

Recent Posts