Introduction
Shell plugins in SAP Fiori launchpad allow you to extend the standard functionality of the launchpad shell. This comprehensive guide walks you through the process of creating and deploying a shell plugin CAP application to the SAP Cloud Portal service.
Prerequisites
SAP Business Application Studio or VS Code with SAP extensionsAccess to SAP BTP account with Cloud Portal serviceBasic knowledge of UI5 and CAP developmentFiori Generator tools installed
Step 1: Create Basic UI Using Fiori Generator
First, generate a basic Fiori application using the Fiori Generator:
Step 2: Clean Up Generated Files
Delete all files except the following essential ones:
manifest.jsonComponent.jsindex.htmli18n folder
Step 3: Modify index.html
Update your index.html file to support the shell plugin configuration:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Shell Plugin</title>
<style>
html, body, #container, #container-uiarea {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script
id=”sap-ui-bootstrap”
src=”https://sapui5.hana.ondemand.com/1.108.4/resources/sap-ui-core.js“
data-sap-ui-theme=”sap_fiori_3″
data-sap-ui-resourceroots='{“shellplugin”: “./”}’
data-sap-ui-onInit=”module:shellplugin/ComponentSupport”
data-sap-ui-async=”true”
data-sap-ui-preload=”async”>
</script>
</head>
<body class=”sapUiBody sapUiSizeCompact” id=”content”>
<div data-sap-ui-component
data-name=”shellplugin”
data-id=”container”
data-settings='{“id”:”shellplugin”}’
data-handle-validation=”true”>
</div>
</body>
</html>
Step 4: Update Component.js – Change to AppComponent
Modify your Component.js file to change the controller from UIComponent to AppComponent:
sap.ui.define([“sap/fe/core/AppComponent”], function (AppComponent) {
“use strict”;
return AppComponent.extend(“shellplugin.Component”, {
metadata: {
manifest: “json”
},
init: function () {
// Call parent init
AppComponent.prototype.init.apply(this, arguments);
console.log(“✅ Plugin is working!”);
// Get DAS service
const oDAS = this.getShellService(“ShellNavigation”);
// DAS not available case
if (!window.das_props_hostname) {
console.warn(“⚠️ DAS not available – das_props_hostname missing”);
return;
}
console.warn(“✅ DAS name not found [das_props_botname missing]!”);
this.waitForShellAndAddStyleButton();
},
waitForShellAndAddStyleButton: function () {
// DAS properties
window.das_env =
“YOUR_ENV_URL”;
// Create script tag
const script = document.createElement(“script”);
script.setAttribute(“data-bot-name”, window.das_props_botname);
script.setAttribute(“data-expander-type”, “CUSTOM”);
script.setAttribute(“id”, “das”);
script.setAttribute(“src”,
“data:text/javascript;base64,<YOUR_BASE64_ENCODED_SCRIPT>”);
script.onload = () => {
if (!window.das?.setClientTheme) {
console.error(“das.setClientTheme not available”);
}
};
document.head.appendChild(script);
}
});
});
Key Changes:
Changed from UIComponent to AppComponentUsed “use strict” for better code qualityExtended plugins.Component in the return statement
Step 5: Write Web Client Bridge Code in Component.js
The web client bridge code (shown above) handles:
Shell service integrationDAS (Digital Assistant Service) properties configurationDynamic script loadingClient theme management
This code checks for DAS availability and dynamically loads the required scripts for integration.
Step 6: Add Cross Navigation Details in manifest.json
Update your manifest.json to include cross navigation configuration:
{
“_version”: “1.49.0”,
“sap.app”: {
“id”: “shellplugin”,
“type”: “component”,
“title”: “Shell Plugin Application”,
“applicationVersion”: {
“version”: “1.0.0”
}
},
“sap.ui5”: {
“rootView”: {
“viewName”: “shellplugin.view.App”,
“type”: “XML”,
“id”: “app”
},
“dependencies”: {
“minUI5Version”: “1.108.0”,
“libs”: {
“sap.ui.core”: {},
“sap.m”: {},
“sap.ui.layout”: {},
“sap.f”: {}
}
},
“contentDensities”: {
“compact”: true,
“cozy”: true
}
},
“sap.fiori”: {
“type”: “plugin”
},
“sap.platform.cf”: {
“oAuthScopes”: []
}
}
Important Properties:
Set “type”: “plugin” in the sap.fiori sectionInclude necessary UI5 library dependenciesConfigure application version and ID
Step 7: Add Shell Plugin Details in CommonDataModel.json
Create or update CommonDataModel.json payload:
{
“appId”: “plugins”,
“vizId”: “Shell-plugin”
},
Step 8: Add Bootstrap Details in ushellConfig
Configure the Unified Shell (ushell) in CommonDataModel.json in businessApps:
“bootstrapPlugins”: {
“BUILT_IN_SUPPORT”: {
“component”: “plugins”,
“url”: “../plugins”,
“self”: {
“name”: “plugins”
}
}
}
},
Bootstrap Configuration:
Define plugin component and URLSet renderer type as RendererExtensionsConfigure application registration in Fiori Launchpad
Deployment to Cloud Portal Service
Step 1: Build the Application
# Build MTA archive
mbt build
Step 2: Deploy to Cloud Foundry
# Login to Cloud Foundry
cf login
# Deploy the mtar file
cf deploy mta_archives/your_app_1.0.0.mtar
Step 3: Configure in Portal Service
Open SAP Cloud Portal serviceNavigate to Provider ManagerAdd a new Content Provider pointing to your deployed applicationCreate a new site or update existing siteAdd the shell plugin to the site settingsAssign roles to users who need access
Step 4: Test the Plugin
Open your Fiori LaunchpadCheck browser console for the “✅ Plugin is working!” messageVerify that the plugin functionality is active
Troubleshooting
Common Issues
Plugin not loading:
Check manifest.json has correct “type”: “plugin”Verify Component.js extends AppComponent correctlyCheck browser console for errors
DAS not available:
Verify das_props_hostname is setCheck script URL in waitForShellAndAddStyleButtonEnsure network access to external resources
Conclusion
You’ve successfully created and deployed a shell plugin for SAP Fiori launchpad. This plugin extends the standard launchpad functionality and can be customized further based on your business requirements.
Happy Coding! 🚀
IntroductionShell plugins in SAP Fiori launchpad allow you to extend the standard functionality of the launchpad shell. This comprehensive guide walks you through the process of creating and deploying a shell plugin CAP application to the SAP Cloud Portal service.PrerequisitesSAP Business Application Studio or VS Code with SAP extensionsAccess to SAP BTP account with Cloud Portal serviceBasic knowledge of UI5 and CAP developmentFiori Generator tools installedStep 1: Create Basic UI Using Fiori GeneratorFirst, generate a basic Fiori application using the Fiori Generator:Step 2: Clean Up Generated FilesDelete all files except the following essential ones:manifest.jsonComponent.jsindex.htmli18n folderStep 3: Modify index.htmlUpdate your index.html file to support the shell plugin configuration:<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <title>Shell Plugin</title> <style> html, body, #container, #container-uiarea { height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> <script id=”sap-ui-bootstrap” src=”https://sapui5.hana.ondemand.com/1.108.4/resources/sap-ui-core.js” data-sap-ui-theme=”sap_fiori_3″ data-sap-ui-resourceroots='{“shellplugin”: “./”}’ data-sap-ui-onInit=”module:shellplugin/ComponentSupport” data-sap-ui-async=”true” data-sap-ui-preload=”async”> </script></head><body class=”sapUiBody sapUiSizeCompact” id=”content”> <div data-sap-ui-component data-name=”shellplugin” data-id=”container” data-settings='{“id”:”shellplugin”}’ data-handle-validation=”true”> </div></body></html>Step 4: Update Component.js – Change to AppComponentModify your Component.js file to change the controller from UIComponent to AppComponent:sap.ui.define([“sap/fe/core/AppComponent”], function (AppComponent) { “use strict”; return AppComponent.extend(“shellplugin.Component”, { metadata: { manifest: “json” }, init: function () { // Call parent init AppComponent.prototype.init.apply(this, arguments); console.log(“✅ Plugin is working!”); // Get DAS service const oDAS = this.getShellService(“ShellNavigation”); // DAS not available case if (!window.das_props_hostname) { console.warn(“⚠️ DAS not available – das_props_hostname missing”); return; } console.warn(“✅ DAS name not found [das_props_botname missing]!”); this.waitForShellAndAddStyleButton(); }, waitForShellAndAddStyleButton: function () { // DAS properties window.das_env = “YOUR_ENV_URL”; // Create script tag const script = document.createElement(“script”); script.setAttribute(“data-bot-name”, window.das_props_botname); script.setAttribute(“data-expander-type”, “CUSTOM”); script.setAttribute(“id”, “das”); script.setAttribute(“src”, “data:text/javascript;base64,<YOUR_BASE64_ENCODED_SCRIPT>”); script.onload = () => { if (!window.das?.setClientTheme) { console.error(“das.setClientTheme not available”); } }; document.head.appendChild(script); } });});Key Changes:Changed from UIComponent to AppComponentUsed “use strict” for better code qualityExtended plugins.Component in the return statementStep 5: Write Web Client Bridge Code in Component.jsThe web client bridge code (shown above) handles:Shell service integrationDAS (Digital Assistant Service) properties configurationDynamic script loadingClient theme managementThis code checks for DAS availability and dynamically loads the required scripts for integration.Step 6: Add Cross Navigation Details in manifest.jsonUpdate your manifest.json to include cross navigation configuration:{ “_version”: “1.49.0”, “sap.app”: { “id”: “shellplugin”, “type”: “component”, “title”: “Shell Plugin Application”, “applicationVersion”: { “version”: “1.0.0” } }, “sap.ui5”: { “rootView”: { “viewName”: “shellplugin.view.App”, “type”: “XML”, “id”: “app” }, “dependencies”: { “minUI5Version”: “1.108.0”, “libs”: { “sap.ui.core”: {}, “sap.m”: {}, “sap.ui.layout”: {}, “sap.f”: {} } }, “contentDensities”: { “compact”: true, “cozy”: true } }, “sap.fiori”: { “type”: “plugin” }, “sap.platform.cf”: { “oAuthScopes”: [] }}Important Properties:Set “type”: “plugin” in the sap.fiori sectionInclude necessary UI5 library dependenciesConfigure application version and IDStep 7: Add Shell Plugin Details in CommonDataModel.jsonCreate or update CommonDataModel.json payload:{ “appId”: “plugins”, “vizId”: “Shell-plugin” },Step 8: Add Bootstrap Details in ushellConfigConfigure the Unified Shell (ushell) in CommonDataModel.json in businessApps:”bootstrapPlugins”: { “BUILT_IN_SUPPORT”: { “component”: “plugins”, “url”: “../plugins”, “self”: { “name”: “plugins” } } } },Bootstrap Configuration:Define plugin component and URLSet renderer type as RendererExtensionsConfigure application registration in Fiori LaunchpadDeployment to Cloud Portal ServiceStep 1: Build the Application# Build MTA archivembt buildStep 2: Deploy to Cloud Foundry# Login to Cloud Foundrycf login # Deploy the mtar filecf deploy mta_archives/your_app_1.0.0.mtarStep 3: Configure in Portal ServiceOpen SAP Cloud Portal serviceNavigate to Provider ManagerAdd a new Content Provider pointing to your deployed applicationCreate a new site or update existing siteAdd the shell plugin to the site settingsAssign roles to users who need accessStep 4: Test the PluginOpen your Fiori LaunchpadCheck browser console for the “✅ Plugin is working!” messageVerify that the plugin functionality is activeTroubleshootingCommon IssuesPlugin not loading:Check manifest.json has correct “type”: “plugin”Verify Component.js extends AppComponent correctlyCheck browser console for errorsDAS not available:Verify das_props_hostname is setCheck script URL in waitForShellAndAddStyleButtonEnsure network access to external resources ConclusionYou’ve successfully created and deployed a shell plugin for SAP Fiori launchpad. This plugin extends the standard launchpad functionality and can be customized further based on your business requirements.Happy Coding! 🚀 Read More Technology Blog Posts by SAP articles
#SAP
#SAPTechnologyblog
