Skip to Content
Author's profile photo Jigar Lotia

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:

Launchpad Editor.png

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

Configuration of AppLauncher.png

Configuration of AppLauncher2.png

End User View:

Employee View.png

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



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Good job Jigar. SAP should deliver this as part of standard. It would help if you could share the project files with the community.

      Author's profile photo Sridhar k
      Sridhar k

      Hello Jigar,

      Thanks for the blog. I am interested in knowing more about this approach - Chaging Colors to Tiles. Is there any way to reach out to you?



      Author's profile photo Michael Appleby
      Michael Appleby

      Please open a new Discussion marked as a question.  If the thread you originally posted to has material related to your question, include a link.   It is recommended to read the Rules of Engagement and other documents in the Getting Started link at the top right. 

      If you have any questions after visiting the Getting Started link, feel free to respond to send me a DM (Direct Message) and I will be happy to try to assist.

      NOTE: Getting the link is easy enough for both the author and document.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url. 

      Regards, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Sridhar k
      Sridhar k

      My post / question is directly related to approach author explained, but i need more detail answer for the same approach as i am new into Fiori. I do not have any more new links...

      Author's profile photo Michael Appleby
      Michael Appleby

      I would still suggest that you create a new Discussion and link to both the author and his blog using the techniques I explained in my earlier post.  You have not posted any specific questions which you need to do.

      Cheers, Mike (Moderator)

      SAP Technology RIG