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.
What kind of customization can users do on their launchpad?
There are several possibilites to create as well as to customize the Fiori Launchpad (FLP). With an Plug-In it is possible to add custom coding to the FLP. This might be useful to alert user of upcoming events or system downtime. With the Plugin it is also possible to add icons to the headerbar of the FLP. To do so an renderAPI has to be used within the plugin.
The Plugin can be build with the Web IDE. Sure today there will be several options to do so.
The created plugin is based on SAP UI5. Hence, it consits of an Component.js and a manifest.json file as well as the lifecycle methods of an UI5 app. With the lifecycle methods and the UI5 infrastructure we can develop our own coding. E.g. create a model and attach it to a datsource to retrieve or send data to an oData service.
If your intend is to simplay brand the FLP in a certain with (e.g. with your company colors) then there is the possibility to create a custom them, which will be discussed in the next section.
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.
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.
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.
The changes you’ve made can be added to a transport request and hence they can be made available for specific systems.
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.
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.
This post is part of a blog series.
Read also
part I: Fiori Introduction
part III: Extensibility Scenario With Key User Tools
Part IV: SAP UI5 Adaptation Project
