Launchpad Navigation with UI5 Boilerplate

[HPSeitz]

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:

http://....../index.html?mode=LeftMenuNavi

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:

• UI5 Boilerplate Source on Github
• UI5 Boilerplate explained