Skip to Content
Author's profile photo Mike Doyle

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

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Nice!

      Author's profile photo Greg Carino
      Greg Carino

      Nice blog Mike. Indeed, the shell plugin is a great little solution. I had the chance to use it recently to add custom buttons to my shell header. Only comment is we are restricted to the control types we can add (e.g. ShellHeadItem). It would be nice if the renderer can support more control types and flexibility in the future, for example, moving the branding logo in the center in place of the header title (I currently did this using custom css in the theme designer)

      Author's profile photo Christophe Noël GANDIN
      Christophe Noël GANDIN

      Great, I've experimented it by adding a logout button.

      Is it possible to access odata in the plugin. I have an error 404 currently.

      Author's profile photo Mike Doyle
      Mike Doyle
      Blog Post Author

      Hi Christophe, you should be able to access OData services.  If you are getting a 404 I suggest you run with the developer tools open and check on the network tab for the URL it’s trying to use.  You might want to raise a new question with some more details of what you are trying to do.

      Author's profile photo Christophe Noël GANDIN
      Christophe Noël GANDIN

      Here is my question

      If you have any idea.

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      HI Mike, Very nice summary!

      I was particularly interested to hear that you have used this to show the system info in the header e.g. DEV, QA, TST. That's a request we are asked about from time to time.  It would be great if you could add a blog explaining what you used to make that happen.

      Cheers

      Jocelyn

      Author's profile photo Mike Doyle
      Mike Doyle
      Blog Post Author

      Thanks Jocelyn, I’ll add that to the backlog.  The honest truth is that I did this some time ago using a very low tech solution.  I created an OData service that simply returned the SYSID of the ECC box along with a user-friendly text, like 'Development' for DEV.  The plugin just called the OData service.  Doing it now I would investigate an API which would get a text from the current sub-account.

       

      Author's profile photo Christophe Noël GANDIN
      Christophe Noël GANDIN

      I've done that on the logon launchpad. I've created a personalized page and put system information on the footer. As we are on the gateway, we can know easyly if we are in test environment or quality. But as the user is not logon, I'll try to consume a Rest information to say for exemple (back-end is in maintenance, no access possible)
      I'm currently doing the same on the launchpad. I'll post an answer as I'll reach to do it.

      Author's profile photo RAHUL MALANI
      RAHUL MALANI

      Hello Mike,

      Did you got any any workaround/alternative API to "addFloatingButton"? I am facing the same issue as you mentioned and requirement of my client is to have a floating button.

      Best Regards,
      RM

      Author's profile photo Mike Doyle
      Mike Doyle
      Blog Post Author

      Hi Rahul, I'm afraid I haven't been back to this topic for a while and don't anything more to add.  If you have SAP support then I suggest you raise an incident