The easy way to customise your Fiori Launchpad

Often customers want some kind of customisation of their Fiori Launchpad.  I’m not talking about the colour scheme or logo, which can be tailored to your needs using theming.  Rather, I’m thinking of an extra button or help link, for example.  An easy way to fulfill these kinds of requests is a Launchpad plugin (also known as a Shell plugin).  It’s now easier than ever to create these plugins, so read on to find out how…..

What is a launchpad plugin?

Launchpad plugins are UI5 components which are called each time the Fiori Launchpad home-screen is loaded.  They can call Launchpad APIs to add controls to the launchpad.  Or they could show a message ‘toast’ or call outside services like Google Analytics.  Each launchpad can have zero, one or many plugins registered and the plugin will only be run if the user is granted access to the relevant catalogue.  That means that you can build a plugin that only runs for certain users.

The first plugin I created (a couple of years ago) showed a message toast to remind users that they were in the dev or test Launchpad, and to inform them of the current UI5 version.  Recently I created another plugin to add a simple log out button to the home page.

What’s the easiest way to create a plugin?

Web IDE Full Stack now has a template for Launchpad plugins.  Ultimately the plugin is just a component, but you need to take care that the shell renderer is initialised before you try and call it.  Happily, the template code includes this logic (it’s implemented using promises).  Here’s the template you need to choose:

The template can even show you how to add buttons or a footer to the Launchpad (using the Launchpad API I mentioned earlier):

You should only need to add code to the Component.js.  There is usually no need to modify the _getRenderer function which has been generated for you.  Instead you can use the following pattern in the init function (this is from the template, not my own invention):

init: function () {
  var rendererPromise = this._getRenderer();
  rendererPromise.then(function (oRenderer) {
    oRenderer.[do something]


  });
}

If you don’t need to alter the Launchpad UI then you can just add your logic to the init function without worrying about the shell renderer.

The shell renderer (sap.ushell.renderers.fiori2.Renderer) is documented in the usual place.  The only issue I came across was with the floating action buttons (addFloatingButton).  I couldn’t get it working. Interestingly, that feature is in the documentation but not in the Web IDE template options.

How do I deploy my plugin?

The plugin must be deployed to the Fiori Launchpad, much like a regular app.  Of course, the details depend on whether your Launchpad is on on-prem (e.g. on a Netweaver Gateway Hub) or running on the SAP Cloud Platform Portal Service.  If you create a new catalogue for your plugin, don’t forget to assign the catalogue to your users (via a role).  To remove your plugin from service you can simply undo this assignment.

Lets write plugins!

This is a great feature of the Fiori Launchpad with a really nice template implementation in Web IDE. Next time your company (or one of your customers) wants to customise the Launchpad, why not give it a try?

Further Reading

Create a Welcome Popup for Fiori Launchpad and Freestyle Portal Sites by Ido Shemesh

Tracking SAP Cloud Portal Sites Usage Data with Google Analytics by Ido Shemesh