Implementing a UI Plug-In

One of the most common use cases for plug-ins is to add user interface elements to the SAP Fiori launchpad. This example shows how to implement such a plug-in.

The SAP Fiori launchpad renderer provides an API which can be used for adding UI elements. This example focuses on a single extension possibility. For information on extending the SAP Fiori launchpad renderer, see the JSDocs in the SAPUI5 demo kit at http://<host>:<port>/sap/public/bc/ui5_demokit/#docs/api/symbols/sap.ushell.renderers.fiori2.Renderer.html.

The launchpad does not guarantee any order when plug-ins are loaded and initialized. Therefore, a UI plug-in has to register on an SAPUI5 event before it can get the shell renderer from the container.

The UI extension API is specific to the "fiori2" shell renderer implementation, which is the standard renderer for SAP Fiori launchpad.

Example UI Plug-in in SAPUI5 Demo Kit

You can find an example for a UI plug-in in the SAPUI5 demo kit. This example shows how to create a UI plug-in which adds buttons to the shell header bar. This is realized with a single, re-usable SAPUI5 component that can be dynamically configured. The example configuration adds a customized action button at the beginning of the launchpad header. This will be the result:

You can find the Component.js file for the plug-in at the following location in your SAPUI5 demo kit:

http://<host>:<port>/sap/bc/ui5_demokit/test-resources/sap/ushell/demoapps/UIPluginSampleAddHeaderItems/Component.js

Note that the component which acts as shell plug-in is a plain component, not a UIComponent. It should only have minimal dependencies and load very fast. The main functionality of the plug-in should rather be loaded when the button is pressed. Depending on the use case, the press handler may instantiate a separate UIComponent which implements the plug-in functionality.

Activating and Configuring the Example UI Plug-In

For configuring 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`
Action	`plugin`
Application Type	`SAPUI5 Fiori App`
Title	`UI Plug-in Test`
URL	`sap/bc/ui5_demokit/test-resources/sap/ushell/demoapps/UIPluginSample`
Component	`sap.ushell.demo.UIPluginSampleAddHeaderItems`
Information
Device Types	All device types must be selected.
Parameters	Specifiy configuration parameters as shown in the table below.

Table 2: Parameters
Name	Default Value
position	begin
icon	globe
message	Hello