Extending SAP Fiori Launchpad

Objective

After completing this lesson, you will be able to extend SAP Fiori launchpad

SAP Fiori Launchpad Plugins

The SAP Fiori launchpad (FLP) can be extended in its functionality through plugins.

Watch this video for an overview on possible extensions.

Developing a plugin involves the following steps:

  1. Implementing the plugin
  2. Activating and configuring the plugin

To start developing an FLP plugin, generate an SAPUI5 freestyle application in the SAP Business Application Studio (BAS). Then delete all unsupported or unnecessary folders and files.

The next step is to define the SAPUI5 project as an FLP plugin. This is done in the manifest.json file:

Code Snippet
1234567891011121314151617181920212223242526272829303132

{
  "_version": "1.37.0",
  "sap.app": {
    "id": "project1",
    "type": "component",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    }, 
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "sourceTemplate": {
      "id": "@sap/generator-fiori:basic",
      "version": "1.6.7",
      "toolsId": "4ef10253-5957-4a76-863b-06d7fd654689"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.flp": {
    "type": "plugin"
  }
}

Generally, there are no views in a plugin. All changes to the FLP are defined by accessing the renderer of the FLP in the Component.js file. This enables the FLP to load and instantiate the plugins automatically during start-up. A typical initial Component.js looks like this:

Code Snippet
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

sap.ui.define([
  "sap/ui/core/Component",
  "sap/m/Button",
  "sap/m/Bar",
  "sap/m/MessageToast"
], function (Component, Button, Bar, MessageToast) {

  return Component.extend("project1.Component", {

    metadata: {
      "manifest": "json"
    },

    _getRenderer: function () {
      var that = this,
          oDeferred = new jQuery.Deferred(),
          oRenderer;

      that._oShellContainer = 
          jQuery.sap.getObject("sap.ushell.Container");
      if (!that._oShellContainer) {
        oDeferred.reject(
          "Illegal state: shell container not available; 
           it must be executed in a unified shell runtime context.");
      } else {
        oRenderer = that._oShellContainer.getRenderer();
        if (oRenderer) {
          oDeferred.resolve(oRenderer);
        } else {
          // renderer not initialized yet 
          // listen to rendererCreated event
          that._onRendererCreated = function (oEvent) {
            oRenderer = oEvent.getParameter("renderer");
            if (oRenderer) {
              oDeferred.resolve(oRenderer);
            } else {
              oDeferred.reject("Illegal state: shell renderer 
                                not available after recieving 
                                'rendererLoaded' event.");
            }
          };
          that._oShellContainer.attachRendererCreatedEvent(
            that._onRendererCreated);
        }
      }
      return oDeferred.promise();
    }
  });
});

In the FLP documentation on https://help.sap.com, many code-snippets are available as template. A code changing the shell header looks like this:

Code Snippet
123456789101112131415
...

init: function () {
  var rendererPromise = this._getRenderer();

  /**
   * Set header title
   */
  rendererPromise.then(function (oRenderer) {
      oRenderer.setHeaderTitle("SAP Education");
  });
},

...

Note

Plugins are loaded and instantiated asynchronously. When multiple plugins are loaded, do not assume any specific instantiation order of the components.

Every plugin must be defined in transaction /UI2/FLP_CONF_DEF before it can be activated via customizing.

Watch the video to see how plugins can be activated via customizing.

Activate a Plugin for the SAP Fiori Launchpad

Business Scenario

You want to extend the SAP Fiori launchpad by adding a plugin to the configuration.

Solution
SAP_UX100_BC_S_FLP_PLUGIN (Catalog)

Note

This exercise requires an SAP Learning system. Login information are provided by your system setup guide.

Note

Whenever the values or object names in this exercise include ##, replace ## with the number of your user.

Prerequisites

The role was created in exercise Create SAP Fiori Spaces and Pages.

ExerciseStart Exercise

Task 1: Create a target mapping for an SAP Fiori launchpad plugin.

Steps

  1. In the Definition of FLP Settings (/UI2/FLP_CONF_DEF) of your SAP S/4HANA (S4H) system, check the technical information of the UX100_FLP_PLUG FLP plugin and note down the UI5 Component ID and URL.

    UI5 Component ID:____________________________________________________________

    URL:________________________________________________________________________

    1. In the SAP Easy Access menu of your S4H, search for Definition of FLP Settings or start transaction /UI2/FLP_CONF_DEF.

    2. Double-click Define FLP Plugins on the left.

    3. Double-click UX100_FLP_PLUG in the FLP Plugin ID column.

    4. Note down the UI5 Component IDsap.ux100.flp.plugin and URL/sap/bc/ui5_ui5/sap/ux100_flp_plug.

  2. In the SAP Fiori launchpad designer for customizing your S4H, create the catalog Z_##_BC_FLP_PLUGIN with the title Z## - SAP Fiori Launchpad Plugin.

    1. In the SAP Fiori launchpad designer of your S4H, choose Catalogs.

    2. Choose + beneath the list of catalogs.

    3. In the Title field, enter Z## - SAP Fiori Launchpad Plugin.

    4. In the ID field, enter Z_##_BC_FLP_PLUGIN.

    5. Choose Save.

  3. Create a target mapping in your catalog Z_##_BC_FLP_PLUGIN with semantic object Shell and action plugin targeting the FLP plugin with the UI5 Component ID and URL you noted down.

    1. In your catalog Z_##_BC_FLP_PLUGIN, choose Target Mappings.

    2. Choose Create Target Mapping.

    3. In the intent pane, enter the following values:

      FieldValue
      Semantic ObjectShell
      Actionplugin

    4. In the Application Type menu, choose SAPUI5 Fiori App.

    5. In the Target pane, enter the following values:

      FieldValue
      TitleFLP Plugin
      URL/sap/bc/ui5_ui5/sap/ux100_flp_plug
      IDsap.ux100.flp.plugin

    6. Choose Save.

Task 2: Assign the catalog to a role and test it in the SAP Fiori launchpad.

Steps

  1. Add the Z_##_BC_FLP_PLUGIN catalog to the menu of the Z_##_BR_TRAINING role in the Role Maintenance (PFCG) of your S4H.

    1. In the SAP Easy Access menu of your S4H, search for Role Maintenance or start transaction PFCG.

    2. In the Role field, enter Z_##_BR_TRAINING.

    3. Choose Change.

    4. Choose the Menu tab.

    5. Expand the Insert Node button.

    6. Choose SAP Fiori Launchpad → Launchpad Catalog.

    7. In the Catalog ID field, enter z_##* and use the value help.

    8. In the dialog box, double-click Z_##_BC_FLP_PLUGIN.

    9. Choose Continue.

    10. Choose Save.

  2. Search for changes in the SAP Fiori launchpad of your S4H.

    1. Start or reload the SAP Fiori launchpad of your S4H in the client of your choice.

    2. Choose Important Information in the footer.

    3. Choose Add bookmark in the header on the left.

    4. Choose your user in the upper right corner.

    5. In the User Actions Menu, choose Help for FLP page.

    6. Choose any tile starting an SAPUI5 application.

    7. Choose your user in the upper right corner.

    8. In the User Actions Menu, choose Help for App page.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn