This blog post aims at explaining the detailed steps of adding custom button in FIORI launchpad shell bar.
Hope you find it Useful !!!
Introduction:
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.
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.
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.
Method 2: _getRenderer( )
Returns the shell container’s renderer.
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.
Method 4: _showHelpMenu()
Event handler method of button press event to display the fragment (Action Sheet).
Method 5: onServiceSelected()
Event handler of action sheet select event to navigate to the selected link.
Step 5: Tile Creation:
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.
2. Create Target Mapping:
Final Result:
Custom button available in the Shell header bar.
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,
Imran Khan Mohamed
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,
Imran Khan Mohamed
- SAP Managed Tags:
3 Comments
