Skip to Content

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

FioriBlog_rechts.png

FioriBlog_links.png


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.


FioriBlog_rechts_popover.png


/**
* 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

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. SAP Seeker

    Nice blog. Thanks for sharing.

    In the blog you mentioned to copy the FioriLaunchpad.html file. Can you please let me know, how this new custom file is configured to be called instead of standard file ? Also, any screenshot’s showing, where this added code is placed within the file will also be helpful.

    (0) 

Leave a Reply