Hello World Plug-In

This example illustrates the the plug-in concept.

Note

This example is for education purposes only. Productive UI extension plug-ins should use the example described in the section Implementing a UI Plug-In as template.

Component Implementation

The following component shows a "Hello World" message toast when the plug-in is initialized. As you can see, the plug-in might already be initialized in a phase when the DOM is not yet ready. For this reason, the UI call has to be done in a handler for the SAPUI5 init event.

This example is available in the SAPUI5 demo kit at https://<host>:<port>:44355/sap/bc/ui5_demokit/test-resources/sap/ushell/demoapps/HelloWorldPluginSample/Component.js.

Sample Code Component.js

(function () {
  "use strict";
  /*global jQuery, sap */

  jQuery.sap.declare("sap.ushell.demo.HelloWorldPluginSample.Component");
  jQuery.sap.require("sap.ui.core.Component");

  sap.ui.core.Component.extend("sap.ushell.demo.HelloWorldPluginSample.Component", {
    metadata : {
      "manifest": "json"
    },
    init: function () {
      // just for demo - do NOT directly trigger UI actions for productive plug-ins
      // SAPUI5 is available, but DOM might not be ready yet
      if (sap.ui.getCore().isInitialized()) {
        this._sayHello();
      } else {
        sap.ui.getCore().attachInit(this._sayHello.bind(this));
      }
    },
    _sayHello: function() {
      sap.m.MessageToast.show("Hello World from SAP Fiori launchpad plug-in");
    }
  });
})();

Activating the Hello World Plug-In

For activating the plug-in, create a target mapping with the configuration below, then assign the catalog to a role.

Table 1: Target Mapping Configuration
Field	Value
Semantic Object	`Shell` This value is mandatory and needs to be written exactly like this.
Action	`plugin` This value is mandatory and needs to be written exactly like this.
Application Type	`SAPUI5 Fiori App`
Title	`Hello World UI Plug-in`
URL	`/sap/bc/ui5_demokit/test-resources/sap/ushell/demoapps/HelloWorldPluginSample`
Component	`sap.ushell.demo.HelloWorldPluginSample`
Information
Device Types	All device types must be selected.
Parameters	None

Passing Parameters

The simple example above can be extended by passing a greeting string and the duration of the message toast as parameters to the component. In the component implementation, this set of parameters can be accessed with the getComponentData() method.

Sample Code Evaluating plug-in parameters

_sayHello: function() {
  var oConfig = this.getComponentData().config,
    sMessage = (oConfig && oConfig.message) || "Hello World from SAP Fiori launchpad plug-in",
    iDuration = oConfig && oConfig.duration;

  sap.m.MessageToast.show(sMessage, {
    duration: iDuration
  });
}

In your target mapping, you can define values for the configuration parameters as follows:

Table 2: Parameters
Name	Default Value
message	Hello World from SAP Fiori launchpad plug-in
duration	5000