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:

Framework_Page_Configuration.png

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

FLP_Result_2.png


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.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

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

    or

    Custom Plugin URL: /com.sap.portal.resourcerepository/repo/FLP_Extension/CustomHelpPlugin.js

     

    Thanks

    Patrick

     

    (0) 
    1. Michael Günther Post author

      Hi Patrick,

       

      sorry for my late response.

      You have to maintain the following entry:

      /com.sap.portal.resourcerepository/repo/FLP_Extension/CustomHelpPlugin/

       

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

       

      Best regards,

      Michael

      (0) 

Leave a Reply