Create and use custom tile type

[WouterLemaire]

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:

http://scn.sap.com/community/fiori/blog/2015/05/25/customised-tile-types-in-fiori-launchpad

So it is possible! :smile:

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:

GitHub - lemaiwo/CustomTile

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

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!

Enjoy!

Kind regards,

Wouter