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.

ColourfulDynamicTileController

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.

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.

Cheers,