Creating a Plugin for SAP Fiori Launchpad

This post discusses how to extend the functionality of the SAP Fiori Launchpad. Such an extension can be achieved by creating a plugin.

See: Developing Plug-Ins

To display a popup window with an informational message to the user upon loading the SAP Fiori Launchpad.

By default, plugin development is available in the SAP Web IDE Full-Stack version.

See: SAP Web IDE Full-Stack
See: Creating SAP Fiori Launchpad Plugins in SAP Web IDE

This option is not available in SAP Web IDE Personal Edition.

See: SAP Web IDE Personal Edition

However, this limitation should not prevent a consultant from completing the assigned task. All of the following steps will be performed in SAP Web IDE PE.

Create a new application in SAP Web IDE, keeping the following folder structure for your plugin.

See: Creating SAP Fiori Launchpad Plugins in SAP Web IDE

Note: You will likely need to clean up the manifest.json file, which may be filled with unnecessary attributes.

See: Descriptor for Applications, Components, and Libraries

Create a fragment that will open upon Launchpad load. Add the code to load this fragment in the init function of the newly created component

Component.js source code:

init: function() {

  if (!this.oFragment) {
                this.oFragment = sap.ui.xmlfragment("demo_plugin.fragment.Welcome", this);
                sap.ui.getCore().byId("closeBtn").attachPress(function() {
                    this.oFragment.close();
                }.bind(this));
            }
 
  this.oFragment.attachAfterClose(function() {
         this.destroy();
   });
   this.oFragment.open();
 
  }

Welcome.fragment.xml source code:

<Dialog contentHeight="100px" contentWidth="250px" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core">
    <buttons>
        <Button id="closeBtn" text="Close"></Button>
    </buttons>
    <html:div style="color: #007cc0; font-size: 25px; padding-bottom: 15px; border-bottom: solid #cdcdcd 4px; font-family: Georgia, serif; ">What\'s New here?</html:div>
    <html:p style="color: #666; font-family: Georgia, serif;">Description of what\'s going on here...</html:p>
</Dialog>

Deploy to the backend system.

Create a tile catalog in which, in the Target Mapping settings, select the following semantic object and action pair:

• Semantic Object = Shell
• Action = plugin

See: Activating Plug-Ins on the ABAP Platform

Create a custom role and add to its menu the tile catalog created in Step 3. Assign this role to your user.

Test the implemented changes by launching the SAP Fiori Launchpad (/ui2/flp transaction).

Thank you for your attention.