Skip to Content

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.

TileController.png

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.

TileControllerOnPress.png

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.

ConfigUIStandard.png

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

ConfigUIColourful.png

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.

ConfigurationView.png

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

TileConfigurationSave.png

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.

TileInstnace.png

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,

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Jaime Ojeda González

    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.

    Jaime

    (0) 
  2. Guillaume Bruyneel

    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…

    Thanks.

    (0) 
      1. 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 🙂 .. !!

        Regards,

        Naseem

        (0) 

Leave a Reply