Skip to Content
Author's profile photo HP Seitz

Launchpad Navigation with UI5 Boilerplate

A Launchpad is now (as of version 0.8.0) included in the UI5 Boilerplate, similar to the famous Fiori Launchpad. In contrast to the Fiori Launchpad it is part of the App itself and enables Launchpad Navigation within the App, which could be of interest in case you build a more extensive App.

As before the navigation items are generated automatically from the menu definition file (menu.json), in the case of the Launchpad Navigation mode, Tile objects are created and placed on Launchpad of the UI5 Boilerplate.

There is nothing special necessary to switch and use the Launchpad, simply update to the current version of the UI5BP. The Launchpad Navigation is now the default navigation mode of the UI5 Boilerplate, although the LeftMenu Navigation (via Master Page) is still available and can be activated via configuration or by a URL parameter at any time.

Launchpad Navigation

So how does it look like? Here some screenshots of the Launchpad on a tablet:


On the detail pages there is now a Home Icon in the upper right corner which allows navigation back to the Launchpad:


To add further pages and therefore Tiles to the Launchpad within the UI5 Boilderplate nothing has changed. You simply maintain a new entry in the menu.json file and add the corresponding ui5 view and controller file. That is all! More details can be found in the dedicated post “Add Page to UI5 Boilerplate”

Configuration of Navigation Mode

The configuration of the navigation mode is done via the file app/config.js:


Besides this, it is possible with the URL Parameter mode=LeftMenuNavi to overrule the configuration and start the App in LeftMenu Navigation mode:


Screenshots on tablet with Left Menu Navigation:


As I was asked just yesterday, yes you can use the UI5 Boilerplate for our own purposes and you could do almost everything with it, whatever you like, as it is licensed by Apache 2.0 license, which is a very friendly license.

Related Information:

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Beni Madhab Kayal
      Beni Madhab Kayal

      Do you have any idea how to make your launchpad similar to BELOW/wp-content/uploads/2016/09/fiori_1037543.png

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      Hi Beni,

      the UI5 Boilerplate Launchpad simply uses Standard TileContainer (sap.m.TileContainer) and Standard Tiles (sap.m.StandardTiles) for Navigation within the App to different Pages.

      There is no option to used this as full-blown Fiori Launchpad, which has also backend components to provide it's functionality.

      If you only want to mimic the look and feel of the Fiori Launchpad, I recommend you to have a look in the source of it and you could adapt it accordingly. So far I myself did not done it.

      All the best, HP

      Author's profile photo Beni Madhab Kayal
      Beni Madhab Kayal

      Thank you Seitz