There are three options:<\/p>\n\n\n\n
- \n
- We can create a custom-theme<\/li>\n\n\n\n
- We can leverage the key-user tools to modify the UI during runtime<\/li>\n\n\n\n
- We use the Web IDE or Business Application Studio to manually write a small extension via an adaptation project.<\/li>\n<\/ul>\n\n\n\n
What kind of customization can users do on their launchpad?<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
The Plugin can be build with the Web IDE. Sure today there will be several options to do so.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Custom-theme<\/h2>\n\n\n\n
The first option to modify the UI is to make use of a custom theme. To create a custom theme we use the \u2018Theme Designer\u2019. You can start the theme designer with transaction
UI5\/THEME_DESIGNER<\/code> (important: use chrome as a browser since it doesn\u2019t work in every browser).<\/p>\n\n\n\nThe start screen of the theme designer looks like the following picture. From here you can modify or create a new theme.<\/p>\n\n\n\n
![\"UI](\"https:\/\/www.js-soft.com\/wp-content\/uploads\/2022\/05\/Fiori5-1024x363.webp\")
<\/figure>\n\n\n\nWhen 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.<\/p>\n\n\n\n
![\"Fiori](\"https:\/\/www.js-soft.com\/wp-content\/uploads\/2022\/05\/Fiori6-1024x574.png\")
<\/figure>\n\n\n\nWhen 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 a default theme for the system UI2\/NWBC_CFG_CUST. The second transaction is for the administration of the themes UI5\/THEME_TOOL.<\/p>\n\n\n\n
Key-user tools<\/h2>\n\n\n\n
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<\/p>\n\n\n\n
- \n
- to sort sections of an app via drag and drop<\/li>\n\n\n\n
- to combine fields (or split combined fields)<\/li>\n\n\n\n
- to hide fields<\/li>\n\n\n\n
- to change labels<\/li>\n\n\n\n
- as well as to add new fields to the UI.<\/li>\n<\/ul>\n\n\n\n
When you want to play around with them assign the role
SAP_UI_FLEX_KEY_USER<\/code> to your user and activate the ICF node\/sap\/bc\/ui2\/flp<\/code>. Once this is done, you can start the key-user tools via the user menu.<\/p>\n\n\n\nP.S. we set a custom theme and hence the apps in our Fiori Launchpad look different.<\/p>\n\n\n\n
![\"transport](\"https:\/\/www.js-soft.com\/wp-content\/uploads\/2022\/05\/Fiori7-1024x343.png\")
<\/figure>\n\n\n\nThe changes you\u2019ve made can be added to a transport request and hence they can be made available for specific systems.<\/p>\n\n\n\n
![\"Adding](\"https:\/\/www.js-soft.com\/wp-content\/uploads\/2022\/05\/Fiori8-1024x463.png\")
<\/figure>\n\n\n\nAdding 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.<\/p>\n\n\n\n
Adaptation project<\/h2>\n\n\n\n
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 \u2018Extensibility\u2019 in tab \u2018Implementation Information\u2019. In the section is a link to a documentation page about the different extensibility options for the specific app.
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.<\/p>\n\n\n\n![\"Application](\"https:\/\/www.js-soft.com\/wp-content\/uploads\/2022\/05\/Fiori9.png\")
<\/figure>\n\n\n\nWith 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<\/a> 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.<\/p>\n\n\n\n
<\/p>\n\n\n\n
This post is part of a blog series.<\/p>\n\n\n\n
Read also<\/p>\n\n\n\n
part I: Fiori Introduction<\/a><\/p>\n\n\n\n
part III: Extensibility Scenario With Key User Tools<\/a><\/p>\n\n\n\n