Skip to Content
Author's profile photo Former Member

How to make use of the Fiori Framework Page Extensions

As described in this Note the usage of Fiori Framework Page Extensions is possible from SAP NetWeaver Portal 7.4 SPS12 and SAP NetWeaver Portal 7.5 SPS01 on.

So the question is how can I use these extensions and how am I able to extend the Fiori Launchpad on the Portal?

My first use case was to integrate a help to each tile that is available on the homepage of the logged in user. For this a help-icon should be added to each tile. What do we need for this?

1. Create a custom plugin which adds a question mark image to each tile

Content of CustomHelpPlugin.js:

(function () {
            /* global sap, jQuery, fioriTrial, eula */
            'use strict';
            console.warn("FLP Extension loaded...")
            var renderFunction =             function () {
                        $('.sapUshellTile').each(function( index ) {
                                   var newDiv = $("<div style='position: absolute; top: 1rem; right: 1rem; width:20px; height: 20px; z-index: 9999'><img src='/' style='max-width: 100%'></img></div>");
                                   $( this ).append(newDiv);
                          (event) {
                                               alert("Display some help for tile " + index + " here!");
            sap.ui.getCore().getEventBus().subscribe("launchpad","moveTile",function() {setTimeout(renderFunction, 1000)});
            sap.ui.getCore().getEventBus().subscribe("launchpad","actionModeInactive",function() {setTimeout(renderFunction, 1000)});

2. Upload this File to the Web Repository

Navigate to Content Administration -> Web Resource Repository and upload the CustomHelpPlugin.js to the FLP Extension Directory. Additional I have uploaded the image for the question mark inside this folder (referenced by the image tag (/

3. Configure the Framework Page Extension

Navigate to Content Administration -> Portal Display -> Framework Page Configuration and configure the Fiori framework page to use the extension:


Custom SAPUI5 Module Plugin Name: CustomHelpPlugin

Custom Plugin URL: /

4. Run the Fiori Framework Page and check the result


So what does the custom plugin do?

It defines a new function “renderFunction” which uses jQuery to search for elements of class “sapUshellTile”. This is the base class for every div in which a tile is rendered. For each of these divs a new div is appended which includes a question mark as an image. To these new divs a “click”-function is added which now can be used to display some additional information to each tile. In this example only an alert box is used but it would be easy to integrate an overlay popup which loads a webpage with additional help to an application for example.

Afterwards this defined function is subscribed to the corresponding events on the Launchpad. I have used the event “contentRendered” in first place which seemed to be enough because this event is triggered after the Launchpad is rendered. But after rearranging the tiles on the Launchpad or adding a new tile from the catalogue a rerendering of the tiles take place. So I have subscribed to additional events “moveTile” and “actionModeInactive”. There I had to use a timeout function because after the event is triggered another rerendering of the tiles take place so that the displayed image disappears. Using the timeout is just a workaround because I didn’t find an appropriate event for this…

If there are any comments or hints on this, feel free to comment this blog.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Guru Raj
      Guru Raj

      Hi Michael Günther,

      In "Framework Page Configuration" i am not getting all these options, getting only "SAPUI5 Library Source". How to enable all options. 




      Author's profile photo Former Member
      Former Member
      Blog Post Author


      please check this Note:

      and check if your portal matches the required version so that you can use the extensions.

      Best regards,


      Author's profile photo T. P. Team Portal
      T. P. Team Portal

      Hi Michel,


      I have tried the same but changes not refelcted,

      let me know whether i need to maintain like this as below.

      Custom Plugin URL: /


      Custom Plugin URL: /





      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Patrick,


      sorry for my late response.

      You have to maintain the following entry:



      If you receive an error, open the Browser Console and check the Network stream if a ressource is requested which fails.


      Best regards,


      Author's profile photo Sajith Nair
      Sajith Nair

      hi Michael,

      May I know what all events are available in Launchpad to subscribe other than "contentRendered".

      Is there any link that I could refer to for the details?






      Author's profile photo Michael Günther
      Michael Günther

      Hi Sajith,


      sorry for my late response. A list of events can be found here:


      Best regards,