Skip to Content
Author's profile photo Jigar Lotia

Customised Tile Types in Fiori Launchpad – Part 3

Part 1 of the blog here, Part 2 of the blog here

Part 3 : The Tile Controller and the Configuration Screen

In this part, we will look at the ColourfulDynamicTile Controller and the Configuration screen. The controller determines whether the Tile is being displayed in the end user mode i.e. on Fiori Launchpad screen or in the configuration mode i.e. Fiori Launchpad Editor mode.  Depending on the mode, the different UI and different actions are available.


The ColourDynamicTile controller is the copy of the standard DynamicTile controller and we use that as our starting point.  The controller determines whether the tile is opened in the configuration mode or the end user mode and depending on that displays different UI.


As a first step, the above piece of code in the controller determines whether we need to have the configuration UI and if yes then the name of the configuration view.  The controller also implements onPress event i.e. when the even when user clicks on the tile and thats where it is determined whether the tile is running in the config mode or the end user mode where it launches the tile.


Configuration UI

The configuration UI allows the launchpad designers to set the properties of the tile such as Tile title, subtitle, icon, oData URL (in case of dynamic tile), what app to launch etc.  We will also need to the have the configuration UI for our ColourfulDynamicTile which can support all the standard properties of the DynamicTile (as the ColourfulDynamicTile is the extension of DynamicTile) and also in addition should also support setting of the colour properties of the tile.

The standard configuration view is similar to below.


To support our colourful tiles, we also need to enhance the configuration UI to be able to set the colour property of the tiles.


Again, similar to the concept shown in Part 2 of the blog, we can use Google Chrome developer tools and get the original configuration view and configuration controller files which are the main view and controller of the Configuration UI and use it as our starting point.  The Configuration UI, will then be enhanced to add the additional controls for selecting the colours of the tile.

Project Structure 2.png

In the below screen, the configuration view has been enhanced to include the new controls of the different colours.  Do note that, the values are bound with the “config” model which could be traced back to ColourfulDynamicTile Controller where the model is read and written.


So we also need to adjust the ColourfulDynamicTile controller to handle these new properties.


Similar changes also need to be done when reading the configuration in the controller so that when the user has saved once and next time opens the configuration UI again, the changes are visible there.  When the tile is saved, a new instance of the tile is the created.  The instance id can be viewed in the Fiori Launchpad designer.  The properties that we write and read such as icon, colour, title, subtitle, oData URL are stored within the tile instance.


So at this point, we have got the new tile type ColourfulDynamicTile which displays the tile with background colour, the ColourfulTile control which is added in the ColourfulDyanmicTile view, ColourfulTile control renderer which renders the tile with background and  the Configuration UI which allows the launchpad designer to specify tile properties such as Tile Colours in the configuration mode.

Now we need to add this new tile type on Fiori Launchpad so that it appears as an option along with News Tile, Static AppLauncher Tile an Dynamic AppLauncher tile when the launchpad designer adds the new tiles on the launchpad.

We will explore this in last and fourth part of the blog where we will create a chip.xml which refers to our new ColourfulDynamicTile, register this chip and add it on the Fiori Launchpad.

Happy Fiorifying.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

      Thanks Jigar. Where is the next part? 🙂

      Author's profile photo Former Member
      Former Member

      Hi Jigar,

      It's a great series. Hope we can see the part 4 soon!



      Author's profile photo Former Member
      Former Member

      This is great, Jigar! Will you also share the "register this chip and add it on the Fiori Launchpad" part? I'm struggling a lot get this done since a while...

      Thanks a lot.


      Author's profile photo Former Member
      Former Member

      hi Jigar,

      Very interesting...

      I am just starting with UI5 dev and fiori. Is it possible to get your source code ?

      And is it possible to know where is the last part of the blog...


      Author's profile photo Naseem VP
      Naseem VP

      Hello All,

      Was anybody able to achieve the final result of this approach?

      if so, please share some details on the final part.

      @ Jigar Lotia

      , Krishna Kishor Kammaje, Jaime Ojeda González and Alfred Lee any update on this?

      Thanks & Regards,


      Author's profile photo Wouter Lemaire
      Wouter Lemaire

      You can find details on the final part in this blog:

      Kind regards,


      Author's profile photo Naseem VP
      Naseem VP

      Hi Wouter,

      Thanks a lot for sharing. I was stuck in at some places, when trying to achieve this. I will try this out.

      Much appreciated and i have bookmarked it 🙂 .. !!