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';
            jQuery.sap.declare("conet.CustomHelpPlugin");
            jQuery.sap.require("sap.ffp.utils.ExtensionUtils");
            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='/com.sap.portal.resourcerepository/repo/FLP_Extension/qm3.png' style='max-width: 100%'></img></div>");
                                   $( this ).append(newDiv);
                                  
                                   newDiv.click(function (event) {
                                               alert("Display some help for tile " + index + " here!");
                                   });
                                  
                        });
            };
            sap.ui.getCore().getEventBus().subscribe("launchpad","contentRendered",renderFunction);
            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 (/com.sap.portal.resourcerepository/repo/FLP_Extension/qm3.png)).

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: /com.sap.portal.resourcerepository/repo/FLP_Extension/CustomHelpPlugin/

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.