Add custom button in Fiori Launchpad Shell Bar (Header Bar). SAP

This blog post aims at explaining the detailed steps of adding custom button in FIORI launchpad shell bar.

Hope you find it Useful !!!

Introduction:

• Custom button in header bar of Fiori launchpad.
• On click of the button, displays an option list menu.
• The menu will have options to:
  • Navigate to other links such as share-point.
  • Navigate to other Fiori App, e.g. a Chat-bot helper app etc.
  • We can also add other user-required options.

Steps Involved:

Step 1: Create a FIORI application Eg. ZSHELL_PLUGIN.

Step 2: In Model.js file, use a JSON model to store the link and text of the required options in the                   action sheet.

Provide a method to create and return the model to the component.

sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sp/ui/Device"
], function (JSONModel, Device) {
	"use strict";

	return {
		createDeviceModel: function () {
			var oModel = new JSONModel(Device);
			oModel.setDefaultBindingMode("OneWay");
			return oModel;
		},

		createServiceModel: function () {
			var oServices = [{
				"url": "<Sharepoint URL>",
				"name": "Go to Sharepoint"
			}, {
				"url": "<Support page URL>",
				"name": "Go to Support page"
			}, {
				"url": "<Chatbot app URL>",
				"name": "Open ChatBot Helper"
			}];

			var oModel = new JSONModel(oServices);
			oModel.setDefaultBindingMode("OneWay");
			return oModel;
		}
	};
});

Step 3: Create a fragment Eg: ActionSheet which is used to contain the action sheet UI element.

The buttons aggregation in action sheet  is bind to the model. The model can be an ODATA               model. We are using a local JSON model for our example.

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<ActionSheet title="Select a Service" placement="Bottom" buttons="{path: 'service>/'}">
		<buttons>
			<Button text="{servcie>name}" press="onServiceSelected"/>
		</buttons>
	</ActionSheet>
</core:FragmentDefinition>

Fragment

Step 4: Component.js is used when the app is loaded, where all the JS code is written in the                         component file to create and handle the custom button.

Using the shell container’s object, we get the shell renderer object.

Fiori Launchpad has plugin methods to add custom header items. Below are the methods.

Method 1: Init()

Call createLaunchpadButton() in init() hook method of component.

After creating the button we fetch the Service model and set it to the component with model               name as “service”

The model name is same we used in binding in the fragment.

init: function () {
	UIComponent.prototype.init.apply(this, arguments);
	this._createLaunchpadButton();
	this.setModel(models.createServiceModel(), "service");
	this.setModel(models.createDeviceModel(), "device");
},

Component.js – Init()

    Method 2: _getRenderer( ) 

Returns the shell container’s renderer.

getRenderer: function () {
	var oDeferred = new jQuery.Deferred();
	this._oShellContainer = jQuery.sap.getObject("sap.ushell.Container");
	if (!this._oShellContainer) {
		oDeferred.reject("Illegal state: shell container not available");
	} else {
		var oRenderer = this._oShellContainer.getRenderer();
		if (oRenderer) {
			oDeferred.resolve(oRenderer);
		} else {
			this._onRendererCreated = function (oEvent) {
				oRenderer = oEvent.getParameter("renderer");
				if (oRenderer) {
					oDeferred.resolve(oRenderer);
				} else {
					oDeferred.reject("Illegal state: shell container not available");
				}
			};
			this._oShellContainer.attachRendererCreatedEvent(this._onRendererCreated);
		}
	}
	return oDeferred.promise();
},

Component.js – getRenderer()

    Method 3: createLaunchpadButton()

Calls the method _getRenderer( )

If renderer is received successfully, it will call the addHeaderEndItem method and add the                 button with the properties.

_createLaunchpadButton: function () {
	this._getRenderer().fail(function (sErrorMessage) {
		jQuery.sap.log.error(sErroMessage, undefined, "shellExtended.shellExtend.Component");
	}).done(function (oRenderer) {
		oRenderer.addHeaderEndItem("sap.ushell.ui.shell.ShellHeadItem", {
			id: "shellExtend.shellExtend",
			icon: "sap-icon://sys-help",
			tooltip: "Help Panel",
			press: this._showHelpMenu.bind(this)
		}, true, false);
	}.bind(this));
},

Component.js – createLaunchpad()

    Method 4: _showHelpMenu()

Event handler method of button press event to display the fragment (Action Sheet).

_showHelpMenu: function (oEvent) {
	var oButton = oEvent.getSource();
	if (!this._cMenu) {
		this._cMenu = sap.ui.xmlfragment("shellExtend.shellExtend.fragments.ActionSheet", this);
		this._cMenu.setModel(this.getModel("service"), "service");
	}
	this._cMenu.openBy(oButton);
},

Component.js – _showHelpMenu()

    Method 5: onServiceSelected()

Event handler of action sheet select event to navigate to the selected link.

onServiceSelected: function (oEvent) {
	var oBindingContext = oEvent.getSource().getBindingContext("service");
	var sSelectedServiceUrl = oBindingContext.getProperty("url");
	window.open(sSelectedServiceUrl, '_blank');
},

Component.js – onServiceSelected()

Step 5: Tile Creation:

Tile type:	Static Tile
Semantic Object	Shell
Action	Plugin
Application Type:	SAPUI Fiori App
URL	URL of the App index file (/sap/bc/../ZSHELL_PLUGIN/webapp)

1. Create Tile: Create a tile with below details, which allows the tile to be called when the                                           launchpad initiates the Shell bar.

Action plugin defined the type of action this tile will be performing.

Static tile with semantic object as ‘Shell’ and action as ‘Plugin’.

2. Create Target Mapping:

Target Mapping

Final Result:

Custom button available in the Shell header bar.

Custom Button

Tool Tip

On Click Of button

Conclusion:

This document aims in assisting FIORI consultants to understand how a new custom button can be added in the FIORI shell bar, which can be used for multiple purposes and for easy navigations.

Hope it helps !! Would love to receive your feedback which helps to improve my knowledge.

Best Regards,