Customize menu options for fiori launchpad

When you select a drop down to logout in fiori launchpad, you see 3 options by default. "Contact Support", "User Preference", "Logout". Let's say you r client wants to add a new option called "hello" and shows "hello world" popup on click of it (Not exactly a real life scenario :) but good enough to explain menu option customization in fiori). To acheive above scenario you have to customize fiori launchpad, Follow below steps to achieve this scenario.

Import /UI2/USHEL into webIDE, Expand USHELL-> shells -> abap to locate FioriLaunchpad.html file.

Add the script as below in FioriLaunchpad.html file to add additional menu options -



                sap.ui.getCore().getEventBus().subscribe("sap.ushell.renderers.fiori2.Renderer", "rendererLoaded", applyRendererExtensions, this);
                function applyRendererExtensions(){
                        var button1 = new sap.m.Button({text:"Hello",icon:"sap-icon://hello-world",press:function(){
                            alert("hello Wold");
                        }

                        });
                    var rendererExt = sap.ushell.renderers.fiori2.RendererExtensions;
                    rendererExt.addOptionsActionSheetButton(button1,rendererExt.LaunchpadState.Home,rendererExt.LaunchpadState.Catalog,rendererExt.LaunchpadState.App);

In above code we are adding new menue item with button named "Hello" and with icon "sap-icon://hello-world". This button on-click presents an alert with text "Hello world".

Commit these changes to /UI2/USHELL/ repository and refresh fiori launch pad home page. Click on menu button to get action items, you can see "Hello" button in the action item. Click on the button, you should see "Hello world" alert as shown in below screen shot.

hello world

To add menu options at app level fiori

To add menu options at app level use below code, we would need to define buttons and there functionality, and these buttons are added to "AppConfiguration" with the help of "addApplicationSettingsButtons" method which accepts array of buttons. (Source - Standard Fiori My Inbox app, and Main-debug.controller.js ).


 var aDropDownButtons = [];

        if (!jQuery.device.is.phone) {
            this.oRouter = sap.ui.core.UIComponent.getRouterFor(this);

            var oSubstButton = new sap.m.Button({
                text: sap.ca.scfld.md.app.Application.getImpl().AppI18nModel.getResourceBundle().getText("substn.navigation_button"),
                icon: "sap-icon://citizen-connect",
                press: (jQuery.proxy(function() {
                    this.oRouter.navTo('substitution', {} , false);
                }, this))
            });

            aDropDownButtons.push(oSubstButton);

        }

        var oSupportInfoButton = new sap.m.Button({
            text: sap.ca.scfld.md.app.Application.getImpl().AppI18nModel.getResourceBundle().getText("supportinfo.navigation_button"),
            icon: "sap-icon://message-information",
            press: function(oEvent){
                        sap.ca.scfld.md.app.Application.getImpl().getComponent().getEventBus().publish("cross.fnd.fiori.inbox", "open_supportinfo",{source:"MAIN"});
                        cross.fnd.fiori.inbox.util.SupportInfo.open();
                    }
        });

        aDropDownButtons.push(oSupportInfoButton);

        sap.ushell.services.AppConfiguration.addApplicationSettingsButtons(aDropDownButtons);

Add any number of options at dropdown launchpad level or app level.