Technical Articles
Fiori Launchpad Plugin / Extension with HeaderItem disappears – Solution and configuration options
Problem
Buttons added by custom Fiori plugins / Extensions to the Fiori Shell header disappear after opening a Fiori app. This behavior starts from SAPUI5 version 1.60.xx (part of FES 5.0). On lower versions like 1.52.xx , this wasn’t a problem and the buttons were always visible.
This behavior happens independent from the way you configure the plugin, using target mappings or global config.
Depending on the use case, Fiori plugin header buttons should not be visible in each app but at least always on the home page. With this solution it’s possible to show the button only (and always) on the homepage and/or in apps.
Let me show you how to reproduce this bug and how to solve it.
Reproduce
Generate a Fiori Launchpad Plugin in SAP Web IDE for an ABAP environment with the latest UI5 version
Provide a name for the plugin
Add a namespace and select “Add button to launchpad header”. This will provide sample code that causes the issue!
Change the run configuration to test the plugin
Add configuration for “Run as SAP Fiori Launchpad Sandbox”
Select “/fioriSandboxConfig.json” as the “File Name” to run the app:
Set “#Shell-home” as URL Hash Fragment:
Running the sandbox launchpad with the generated plug will show an additional button in the shell header. This button will disappear as soon as you navigate to an app, which could be acceptable. When you navigate back to the Fiori Launchpad, the button of the plugin is not coming back… this is not that nice…
This behavior is caused by the code that that adds the button header, it’s using the wrong parameters.
Solution
Based on the API documentation, it’s possible to change the behavior: https://ui5.sap.com/#/api/sap.ushell.renderers.fiori2.Renderer/methods/addHeaderItem
The button will be always visible on the home page of the Fiori Launchpad by changing the code to the following example:
The result looks like this:
The following code will show the plugin button always (on the home page and in the apps):
Or simply like this (will have exactly the same behavior):
Result:
Thanks Wouter.
Solution also works a treat for the Header End Item if you want a pre-Fiori 3.0 Product Launcher/Switcher button:
Cheers,
Matt
Thanks! Good to hear this keeps my plugins safe in the future 🙂
Hi Wouter,
I made a Header End Item using a plugin but it seems to work only on SAPUI5 version 1.79+. It doesn’t work on launchpads with version 1.71. Is there anyway I can get it to work?
Thanks,
Ashok
var oRendererExtensions = jQuery.sap.getObject('sap.ushell.renderers.fiori2.RendererExtensions');
var oSupportHeaderItem = new sap.ushell.ui.shell.ShellHeadItem('supportChatBtn', {
icon: "sap-icon://globe",
tooltip:'Globe',
showSeparator: true,
press: onSupportHeaderItemPress
});
function onSupportHeaderItemPress(){
sap.m.MessageBox.alert("Test Hello");
}
// add button to the left side of the shellbar
oRendererExtensions.addHeaderItem(oSupportHeaderItem);
Hi Wouter,
I made a plugin using "setFooterControl" method. which does not support LaunchpadStates. how can i show footer only on home page of launchpad.
Thanks in advance.