Customised Tile Types in Fiori Launchpad – Part 2
This is part 2 of the blog. Part 1 can be found here
Part 2: The Tile UI
In this part, the Tile UI will be developed. The Tile UI is basically a custom UI5 application that will define how our tile will look like and what data it will display.
As a starting point, instead of developing the UI from scratch we can get the tile UI that is available in the standard and build on it. I use Google Chrome Developer Tools to get the source of the file that is loaded. Also the parameter sap-ui-debug=true needs to be included in the URL to get the full source code of the standard tiles. The resulting URL will be something like this http(s)://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CUST&sap-ui-debug=true
After this, you could look at the developer tools and see the standard tiles were loaded by the browser. In standard, there are two main AppLauncher tiles, Static and Dynamic. We used the Dynamic Tiles as our base we need to get the tile colour from the oData service.
We will now create our UI5 tile UI that should represent our tile. In this example, the aim is to have a background colours on tiles. Effectively, it is full UI5 project so you could make the tile whatever you want for e.g. circular tile, or a standard tile with only big icon in it and nothing else.
I have used eclipse to create the UI5 project in this example. The UI5 project has one view and one controller and they are based on standard’s DynamicTile.view.js and DynamicTile.controller.js. In my case, I had named the view as ColourfulDynamicTile.view.js and ColourfulDynamicTile.controller.js.
The standard DynamicTile.view.js initialises the DynamicTile control (which is the tile that we see on the Fiori launchpad with titles, subtitles, icons, numbers etc) as the main content body. The DynamicTile view has no other UI logic but only to display this control on screen.
For our requirement, we will create a new tile control which inherits from DynamicTile Control and we will add the additional properties of background colour and other colours such as title colour, icon colour etc.
So the control looks will look like as below. The control ColourfulDynamicTile inherits from standard SAP delivered DynamicTile and extends it to add the properties of background colour (bgColour) and few other colours.
Now we still need to define how this control will render on the screen or how the control will look when added to a view.
Thats where the TileRenderer comes in. The TileRender defines the UI logic on how the tile will render on screen and this is the most important part of the whole project. Here we define whether we need to have colourful tiles, or we need to have tiles that only displays the big icon and nothing else. The ColourfulDynamicTileRenderer is the copy of the DynamicTileRender and has been modified to suit my requirements such as adding the background colour which is defined as the property of the ColourfulDynamicTile Control.
So effectively this is what is happening,
- Our UI5 view is initialised and it places the our ColourfulDynamicTile Control in the content. So the view only consists of a single control.
- The ColourfulDynamicTileControl is extension of the DynamicTile control that SAP delivers with the addition of colour properties.
- The Renderer of ColourfulDynamicTile Control defines how this control will render (or look like) on screen. It has the html coding embedded with dynamic code. Here we could make the tile whatever we want to look like by adjusting this dynamic HTML code under render method of renderer.
At this point, we have defined our UI5 view for the tile, the tile control and its renderer. Now we to add more bits to it so that we can configure it in the launchpad editor and specify properties such as tile title, subtitle, background colour, oData URL for dynamic data etc.
In the next part Part 3, we will look at the ColourfulDynamicTile controller which controls the view and the Configuration UI which is the UI that is launched when we configure the tile in the launchpad editor.