Extending SAP Fiori Launchpad

Objective

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

SAP Fiori Launchpad Plug-Ins

Watch this video for an overview on possible extensions.

Developing a plug-in involves the following steps:

  1. Implementing the plug-in
  2. Activating and configuring the plug-in
Screenshot of SAP Fiori basic generator in SAP Business Application Studio on the left. On the right, directory tree shows items to delete in pink and to keep in green.

To start developing an FLP plug-in, 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 plug-in. 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 plug-in. 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 plug-ins automatically during startup. 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");
  });
},

...

The SAP Note 3085381 – Developing SAP Fiori launchpad plug-ins with SAP Fiori Tools provides a full description of the process.

Note

Plug-ins are loaded and instantiated asynchronously. When multiple plug-ins are loaded, do not assume any specific instantiation order of the components.

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

Watch the video to see how plug-ins can be activated via customizing.

Activate a Plug-In for the SAP Fiori Launchpad

Business Example

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

Solution
SAP_UX100_BC_S_FLP_PLUGIN (Business Catalog)
SAP_UX100_TC_S_FLP_PLUGINS (Standard Catalog)

Note

This exercise requires an SAP Learning system. Login information is 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 the exercise Create SAP Fiori Spaces and Pages.

Task 1: Examine a Plug-In in the Definition of FLP Settings

ExerciseStart Exercise

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 plug-in 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 Launchpad Plug-Ins on the left.

    3. Double-click UX100_FLP_PLUG in the Launchpad Plug-in ID column.

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

Task 2: Create an App Descriptor for an SAP Fiori Launchpad Plug-In

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad application manager of your S4H, create the empty standard catalog Z_##_TC_FLP_PLUGINS with title Z## - SAP Fiori Launchpad Plugins as local object.

    1. In the SAP Fiori launchpad of your S4H, choose the Launchpad App Manager tile or start transaction /UI2/FLPAM.

    2. In the SAP Fiori launchpad application manager, choose New Technical Catalog.

    3. In the Technical Catalog ID field, enter Z_##_TC_FLP_PLUGINS.

    4. In the Technical Catalog Title field, enter Z## - SAP Fiori Launchpad Plugins.

    5. From the Technical Catalog Type dropdown, select Standard Catalog.

    6. Select Create empty technical catalog only.

    7. Choose Local Object.

  2. Add an SAPUI5 Fiori app descriptor for the UX100_FLP_PLUG plug-in in your Z_##_TC_FLP_PLUGINS catalog using the following values:

    FieldValue
    Semantic ObjectShell
    Actionplugin
    SAPUI5 Component IDsap.ux100.flp.plugin
    ICF Path/sap/bc/ui5_ui5/sap/ux100_flp_plug
    Suppress Tilechecked

    1. In the Search Term field, enter z_## and choose Go.

    2. In the Technical Catalogs table, choose Z_##_TC_FLP_PLUGINS.

    3. Choose Edit in the upper left.

    4. In the Select Transport Request popup, choose Local Object.

    5. Choose Add App→SAPUI5 Fiori App.

    6. In the Target Application Fields tab, enter the following values:

      FieldValue
      Semantic ObjectShell
      Actionplugin
      SAPUI5 Component IDsap.ux100.flp.plugin
      ICF Path/sap/bc/ui5_ui5/sap/ux100_flp_plug
      Suppress Tilechecked

    7. Choose Save.

      Result

      The warning Transaction code is not entered is displayed. This is solved in the next step.

    8. Close the warning message.

  3. For the app descriptor, create the transaction code Z##_FLPPLUG with FLP Plugin ## as text.

    1. Choose Edit in the upper left.

    2. In the SAP Fiori ID field, enter Z##_FLPPLUG.

    3. For the Transaction Code, choose Click for creation.

    4. In the Warning popup, choose OK.

    5. In the Create / Display Transaction window, in the Transaction Text field, enter FLP Plugin ##.

    6. Choose Create Transaction.

    7. Close the Create / Display Transaction window.

    8. Choose Save.

Task 3: Copy the Catalog, Assign It to a Role, and Test the Plug-In in the SAP Fiori Launchpad

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad content manager for customizing of your S4H, copy the Z_##_TC_FLP_PLUGINS catalog using ID Z_##_BC_FLP_PLUGIN and title Z## - SAP Fiori Launchpad Plugin.

    1. In the SAP Easy Access menu of your S4H, search for SAP Fiori launchpad content manager or start transaction /UI2/FLPCM_CUST.

    2. In the SAP Fiori launchpad content manager for customizing, select the Z_##_TC_FLP_PLUGINS catalog.

    3. Choose Copy.

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

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

    6. Choose Continue.

    7. Choose the transport request provided to you.

  2. In the SAP Fiori launchpad content manager of your S4H, assign the Z_##_BC_MIG_DATA_STATUS catalog to the Z_##_BC_FLP_PLUGIN role.

    1. In the SAP Fiori launchpad content manager for customizing, select the Z_##_BC_FLP_PLUGIN catalog.

    2. Choose Show Usage in Roles.

    3. In the Roles containing Catalog Z_##_BC_FLP_PLUGIN table, choose Assign Role.

    4. In the Assign Role to Catalog popup, for the Role ID field, open the value help.

    5. In the popup, in the Single Role field, enter z_##*.

    6. Double-click Z_##_BR_TRAINING.

    7. In the Assign Role to Catalog popup, choose Continue.

  3. 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.

Learning

SAP FacebookSAP YoutubeSAP LinkedIn