Skip to Content
Technical Articles
Author's profile photo Imran Khan

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

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

Hope you find it Useful !!!


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

], function (JSONModel, Device) {
	"use strict";

	return {
		createDeviceModel: function () {
			var oModel = new JSONModel(Device);
			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);
			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>/'}">
			<Button text="{servcie>name}" press="onServiceSelected"/>


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.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 ="sap.ushell.Container");
	if (!this._oShellContainer) {
		oDeferred.reject("Illegal state: shell container not available");
	} else {
		var oRenderer = this._oShellContainer.getRenderer();
		if (oRenderer) {
		} else {
			this._onRendererCreated = function (oEvent) {
				oRenderer = oEvent.getParameter("renderer");
				if (oRenderer) {
				} else {
					oDeferred.reject("Illegal state: shell container not available");
	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) {, undefined, "shellExtended.shellExtend.Component");
	}).done(function (oRenderer) {
		oRenderer.addHeaderEndItem("", {
			id: "shellExtend.shellExtend",
			icon: "sap-icon://sys-help",
			tooltip: "Help Panel",
			press: this._showHelpMenu.bind(this)
		}, true, false);

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");

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");, '_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



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,

Imran Khan Mohamed

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Hi Imran,

      Thanks for the blog! It would be good to add your example to the Fiori launchpad plug-in showcase

      Kind rgds


      P.s.  the official name is SAP Fiori.

      You can see this confirmed in official documentation such as the SAP Community topic page for SAP Fiori, the SAP Fiori Design Guidelines, the SAP Fiori Overview product page in SAP Help , etc., etc. etc.

      You might be interested to know that Fiori is a name - it means flower in Italian - it's not an abbreviation.


      Author's profile photo Imran Khan
      Imran Khan
      Blog Post Author

      Hi Jocelyn,

      Thank you for your comment.!!!

      Sure. I will add it in Fiori launchpad plug-in showcase.


      Thanks & Regards,

      Imran Khan Mohamed

      Author's profile photo Vishnu Kant Raman
      Vishnu Kant Raman

      Hi Imran, thank you for the blog post.

      Do you know a way to add button with badge on the header bar ?

      I see that controlType is deprecated. Looking for alternative for button with badge functionality.