Dear Fiori Experts,
I was asked to add a Fiori app to the Fiori launchpad but with a total different tile layout than all the standard tile types. This meant I had to create a custom tile type. First I didn’t tought it would be possible to create custom tile types but than I came across the following blog series:
So it is possible! 🙂
The blog series helped me very well to figure out how to create my custom tile. But I was missing the part to add my tile to the Fiori launchpad. Based on the blog series I’ve found I want to share a full end to end tutorial.
1) The Tile
I started by following the blogs to create my own Fiori tile type. I only wanted a tile with a title and a list. The title should be configurable from the Fiori launchpad designer. The list should come from an oData service. This meant I only need two fields. I removed all the unneeded fields from the configuration view and changed the layout of the tile view. You can find the full code on github:
My project looks like this:
- CustomTile view
- This contains the layout of the tile type
- CustomTile controller
- Controller for the tile type
- Configuration view
- View for the configuration in the launchpad designer
- Configuration controller
- Controller of the configuration view
CustomChip.xml should contain the path to the tile type
<implementation> <sapui5> <basePath>./</basePath> <viewName>view/CustomTile.view.js</viewName> </sapui5> </implementation>
Deploy the sapui5 app to your system
2) Register the tile type as a chip
This part will show you how to create a chip which you’ll need to create a tile type. The chip will contain a name and url. The url will aim to the BSP application that contains the Custom Tile.
Go to transaction /n/ui2/chip
Create a chip:
The url should aim to the xml in the UI5 app of the tile type
3) Register the chip as tile type
Now we’ll register the chip as a tile type by using the name of the CHIP.
Go to transaction SE84 –> Web Dynpro –> Web Dynpro-application
Search for CUSTOMIZE_COMPONENT and execute:
Double click on CUSTOMIZE_COMPONENT
Run the web dynpro application
Fill in the component name and configuration id –> click on New
Fill in a description
Add a new value to the parameterMultiVal
Select “parameterMultiVal” –> New –> values
Enter “X-SAP-UI2-CHIP:ZCUSTOM_APPLAUNCHER” –> Should be the same name as the name of the chip
4) Use the new Tile type
Finally we can use the tile by configuring the Fiori Launchpad designer.
Go to transaction /n/ui2/flpd_cust
Add a new tile to a catalog and you’ll see the custom tile type. (If not showing up, clear cache)
Fill in the title, service url for the list and the target url.
Preview in the launchpad designer:
5) Example of the oData service
Just a basic list of person with name and icon:
6) Result in the Fiori Launchpad
Now you can create your own custom Fiori Tile type. This opens a lot of possibilities!