Customised Tile Types in Fiori Launchpad – Part 1

Hi Folks,

In this blog, I intend to show the capability and approach using which you can create your own tile types for Fiori launchpad.  I initially started writing one blog where I describe the whole process.  But it seems it going to be a very long blog.  So instead I am now creating a multi-part blog series.

In this part, I will provide the introduction to problem or requirement that we have and what the solution will look like to meet that requirement.

Part 1: Introduction

The Fiori Launchpad allows to add new tiles to the launchpad using a pre-defined tile type.  The standard system allows to have one of the following tile types:

1. Static AppLauncher : AppLauncher with static info where you can specify icons and titles
2. Dynamic AppLauncher : AppLauncher with dynamic info such as number of approvals, missing days for timesheet etc and can be different colour such as Critical, Negative, Positive or Neutral as defined by the oData service dynamically.
3. News tile : For displaying the news using the RSS feed.

Sometimes in a real world scenarios these types may not be enough.  What if we need to have some tiles square and some circle (may not be pretty looking but there might be requirements for such).  This cannot be handled by CSS as we need to have different look for different tiles and CSS will be applicable for all tiles.  We might want to have the tiles look different than the current default look (different UI) for e.g. we only want to display the icon in the middle and a dynamic number next to it (such as number of pending approvals).

In one of our client, we had the requirement to have the different background colours for different tiles for e.g. Payslip tile to be green and Leave tile to be orange colour. Furthermore, the colour could be defined by backend oData service.  So we decided to create our own tile type where we can specify the initial tile colour and if oData service also specifies the colour then we use that colour as the tile background colour.

The help link Implementing a Custom Tile Type – User Interface Add-On for SAP NetWeaver – SAP Library provides the overview on how to achieve this but does not specify in detail.  So I am hoping this blog will provide steps and direction if you need to create your own tiles types.

To achieve this, we created a new tile type “Colourful AppLauncher”.

Below screenshots depicts the end result of the whole process.

Tile Types with a new tile type “Colourful AppLauncher”:

Fiori Launchpad where tiles are added:

Enhanced Configuration Screen for new tile types where we can select the default colour tile and other fonts on the screen:

End User View:

In the part 2 of the series, I will cover the following:

• Define new tile type using CHIP XML
• Build the Tile UI (or extend / enhance the existing Tile UI) and tile properties.
• Tile Renderer for rendering the UI of the tile.

More in part 2 which can be found here

Cheers,

Jigar