Fiori Launchpad: add custom buttons to FLP Shellbar

[chrmon]

Hi All,

We got a request for extending the Fiori Launchpad (FLP) Shell Bar adding 2 custom buttons. The function of these buttons is the integration of resources already available as HTML/Web for all employees, so out of the context of any role, task or business process. In our case the resources are an already available online documentation a web chat tool for live support. Both are web app. We implement the buttons available on the Shell Bar of the FLP because of its easy access. Alternatives we considered are adding an entry in the action sheet of the Account / Settings Button and adding a Tile in the FLP home page but the buttons in the Shell Bar better fulfilled our requirements.

Here we describe the code we used. Maybe helps other developers.

Our playground is a S4HANA System (lib 1.28.6). At first copy your FioriLaunchpad.html and add the following script code in the head tag of the copied html file:

The buttons are displayed on the right and on the left part of the shell bar

The code:

/**

* ADD Chat Support Button

*/

            var oRendererExtensions = jQuery.sap.getObject('sap.ushell.renderers.fiori2.RendererExtensions');

            var oSupportHeaderItem = new sap.ushell.ui.shell.ShellHeadItem('supportChatBtn', {

                icon: sap.ui.core.IconPool.getIconURI( 'travel-request' ),

                tooltip:'Support Chat',

                showSeparator: true,

                press: onSupportHeaderItemPress

            });

            function onSupportHeaderItemPress(){

                window.open('http://server/chatTool.html', 'ChatSupportWindow', 'width=400,height=400,status=yes,scrollbars=yes,resizable=yes');

            }

  // add button to the right side of the shellbar

            oRendererExtensions.addHeaderEndItem(oSupportHeaderItem);

/**

* ADD Online Help Button

*/

            var oDocumentationHeaderItem = new sap.ushell.ui.shell.ShellHeadItem('sharepointBtn', {

                icon: sap.ui.core.IconPool.getIconURI( 'sys-help' ),

                tooltip: 'Online Help',

                showSeparator: true,

                press: onDocumentationHeaderItemPress

            });

            function onDocumentationHeaderItemPress (){

                window.open('http://server/OnlineHelp.html', '_target');

            }

            // add button to the left side of the shellbar

            oRendererExtensions.addHeaderItem(oDocumentationHeaderItem);

We simply open the URL’s as a new Page or Tab but if it makes sense for you, you can use a sap.m.Popover embedding an iframe. Just take care of browser restrictions like mixed content.

/**

* ADD Chat Support Button

*/

            var oRendererExtensions = jQuery.sap.getObject('sap.ushell.renderers.fiori2.RendererExtensions');

            var oSupportHeaderItem = new sap.ushell.ui.shell.ShellHeadItem('supportChatBtn', {

                icon: sap.ui.core.IconPool.getIconURI( 'travel-request' ),

                tooltip:'Support Chat',

                showSeparator: true,

                press: onSupportHeaderItemPress

            });

            var oHTML = new sap.ui.core.HTML({preferDOM : false,content:

               "<div><iframe src='http://server/chatTool.html'></iframe></div>"

            })

            var oSupportPopoverContainer = new sap.m.ScrollContainer({

                // if you set the size here also set the size of the iframe accordingly

                //width : "250px",

                //height : "300px",

                horizontal : true,

                vertical : true,

                content: [oHTML]       

            });

            oSupportPopoverContainer.addStyleClass('sapUiContentPadding');

             var oSupportPopover = new sap.m.Popover("configuration_popover", {

                title: "Support Chat",

                placement: sap.m.PlacementType.Bottom,

                content: oSupportPopoverContainer

            });

            function onSupportHeaderItemPress (){

                if(oSupportPopover.isOpen()){

                    oSupportPopover.close();

                }else{

                    oSupportPopover.openBy(oSupportHeaderItem);

                }

            }

Hope it helps

Regards

Robert Kleger and Christian Montagner