Hello and welcome to the forth part of the SAP Fiori Customization Samples tutorial series. In this video I am going to show you how to create a custom Fiori tile for the Fiori Launchpad.
This tile can be used in order to display dynamic data in an intuitive way in order to provide information at a glance from the moment you open the Fiori Launchpad. This is the first video of a two-part episode and will be focusing on the structural part of the process.
First of all, let’s take a look over the steps of that you will follow next.
You will need to gather certain files from the SAPUI5 framework that will be used as a base for your custom tile.
The second step will be to modify the files in order to fit your desired outcome. Afterwards register the application as a CHIP and include it in the Fiori Launchpad designer component. Near the end of the video I will try to add the new tile to the launchpad.
For this tutorial I will assume that you have admin access to the SAP system because you will need to modify a standard SAP component. Also, I assume that the SAp WebIDE landscape is set up and running as you will be using it for the development and the deployment. Other methods can be used as well, like manual uploading or using of the Eclipse IDE but this will not be covered in the tutorial.
First of all, you need to log into the SAP system that you wish to modify and start the transaction for the Fiori Designer. This is done using the transaction code /ui2/flpd_CUST.
Once the designer is loaded, open the developer console using the F12 key and navigate to the Network tab.
At the end of the URL you need to add sap-ui-debug=true in order to force the UI5 engine to load all the files. Due to the magic of editing, you do not need to wait at these very moment, but beware this is a long wait time.
Now that the files were loaded, you need to filter by the word “Dynamic”. You should have three files left in the list. Save the content of the files to a temporary folder using your favorite text editor.
After you saved these three files, click one tile and wait for the next batch of files to be loaded. Now you should filter by the word “Configuration” and repeat the saving process for files configuration.view.xml and configuiration-dbg.controller.js.
After having the files saved, you need to create an SAP WebIDE project.
Please open your WebIDE and create a new project from template. Select SAPUI5 Application and enter the required fields. This will be the project that you will be working on.
Next, you need to delete the unnecessary files and import the files that you have saved earlier. They can be uploaded as a batch if you add them to a .zip file.
Create a new folder inside the webapp folder and name it myKpiTile. In this folder you will move both the views and the controller files.
Rename the app._launcher file to kpiLaunchar_dynamic.chip.xmland. Edit it in order to change the view path and the name of the custom tile.
Now set the view name to mykpitile.myTile.view.js and the title of the tile to “mydynamictile “and the description will be created by tutorial.
Now you need to rename the view and the controller to match the new name that you chose. Therefore, you will rename the view to myTile.view.js and the controller will be myTile.controller.js
Rename the configuration controller also and get rid of the debug tab in the name.
You will need to update the namespace and the name of the view in the actual files as well, this can be done using the search and replace function by pressing ctrl+f . Using this you will change the previous namespace with ypur current path that is myKpiTile and the name of the View to myTile. This needs to be changed in the controller file as well and can be done in the same way.
In order to register the application as a CHIP you will need to deploy it as a BSP application in the SAP system. As you can see here, I had some issues while deploying the application because I forgot to delete some unnecessary files. You only need the files that you saved to be present in the project, or else it will crash while deploying.
You will now move to transaction se80 to check if the application was successfully deployed. After making sure that the deployment was successful, you can move on to registering it as a CHIP. This will be done using transaction code /ui2/chip.
Fill out a name and create the CHIP. Fill in the URL for the BSP application, the display name and the description. As this is a CHIP and not a regular UI5 application, don’t forget to include the path to kpilauncer_dynamic.chip.xml.
Now that the CHIP was successfully registered, you can move ahead and include the new CHIP in the Fiori launchpad designer component. This can be done by launching the CUSTOMIZE_COMPONENT from transaction code se80 or by following the URL provided in the description.
You will need to have admin permissions in order to modify the standard component. Adjust the component chip_catalog_config and the configuration id will be Fiori Launchpad catalogue.
As you can see, there are already custom tiles that I have created in the past. Here you need to add a new value. Be careful because the value of the parameter needs to be exactly as the one in the previous entries. You will add x-SAP-ui2:
Let’s check again the name of the CHIP that you created, Z_mytuttile. Be careful, there is no whitespace there. Now you can save it, assign it to a transport and it will be added to the system.
Let’s go back to the Fiori Launchpad designer and try to add a new tile. As you can see, my custom tile: mY tutorial TILE is now present as an option to be added. Unfortunately, there is nothing different from the standard dynamic tile at the moment, but that will be changed in the second part of this tutorial.
A few words for summing up
I hope these first part of the two-episode tutorial was helpful for you. Do not miss the following part, in order for you to get a general understanding of the process. If you have any questions about this tutorial, don’t hesitate to contact me. I will happily answer them.
As mentioned at the beginning of this article, this video is the third part of the tutorial series SAP Fiori Customization Samples.
The first part of this series shows you how to create an SAP Fiori Launchpad on the SAP Cloud platform and add apps on the Fiori Launchpad (German version available here).
The second part explains you how to customize your Fiori Launchpad.
The third part exemplifies you how to configure Single Sign-On between a Fiori Launchpad deployed on a BW system and SAP Business Objects.