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';
            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.

Assigned tags

      6 Comments
      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. 

      FLP.png

      Regards,

      Gururaj

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

      Hi,

      please check this Note:

      http://service.sap.com/sap/support/notes/2031108

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

      Best regards,

      Michael

      Author's profile photo Former Member
      Former Member

      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

       

      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:

      /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

      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?

      Regards,

      Sajith

       

       

       

      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:

      https://help.sap.com/viewer/f2f3f4b4543a4803b9023e8c31f1e72a/7.5.9/en-US/95c96973b8484a6f83ab60142b81cc12.html

       

      Best regards,

      Michael