Skip to Content

how to add the menu button in ShellHeadItem

Hi Gurus,

Can anyone tell me how to add the menu to the ShellheadItem please ?

I would like to add 5 links in the dropdown of the Header item and i have managed to add the icon in the header

if (oRendererExtensions) {
var oLinksItem = new sap.ushell.ui.shell.ShellHeadItem('links', {
icon: "sap-icon://message-information",
height: "100%",
tooltip: ' Links',
press: function(oEvent) {
// behavior/functionality of click event
}
});
console.log("Inside New Header: ");
oRendererExtensions.addHeaderItem(oLinksItem);
}

Can anyone throws some light on this requirement ?

KR,
Anil

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Nov 29, 2017 at 09:15 AM

    Hi Anil,

    You can use an responsive popover fragment to achieve that.

    Create an fragment for responsive popover :

    <core:FragmentDefinition
    	xmlns="sap.m"
    	xmlns:core="sap.ui.core">
    	<ResponsivePopover
    		title="Settings and Options"
    		class="sapUiPopupWithPadding"
    		placement="Bottom" >
    		
    		<content>
    			<List>
    				<items>
    					<ObjectListItem title="Profile" press="onClickProfile" type="Active" />
    					<ObjectListItem title="Change Password" press="onClickChangePassword" type="Active" />
    					<ObjectListItem title="Logout" press="onLogout" type="Active" />
    				</items>
    			</List>
    		</content>
    	</ResponsivePopover>
    </core:FragmentDefinition>
    

    Now in your view, declare the shell header item :

    <u:Shell>
    			<u:headItems>
    				<u:ShellHeadItem
    					tooltip="{i18n>Admin_home}"
    					icon="sap-icon://home"
    					visible="false"
    					press="handlePressHome" />
    			</u:headItems>
    			<u:headEndItems>
    				<u:ShellHeadItem
    					icon="sap-icon://log"
    					tooltip="Logoff"
    					press="handleLogoffPress" />
    			</u:headEndItems>
    			<u:user>
    				<u:ShellHeadUserItem	id="userNameItem"
    					image="sap-icon://person-placeholder"
    					press="handleUserItemPressed" />
    			</u:user>
    			<u:search>
    				<Label text="{i18n>Admin_Portal}" design="Bold"/>
    			</u:search>
    			</u:Shell>
    

    Now implement the foll. code to display the popover on click of the header item:

    /**
    			 * To open the popover.
    			 * @public
    			 */
    			handleUserItemPressed:function(oEvent){
      				this._oPopover = sap.ui.xmlfragment("sap.ui.myApp.frag.userPopover", this.getView().getController());
      				this.getView().addDependent(this._oPopover);
      				this._oPopover.openBy(oEvent.getSource());
      			},
    

    Hope this helps,

    Regards.

    Add comment
    10|10000 characters needed characters exceeded

  • Nov 27, 2017 at 01:26 PM

    I want something menu like below

    Add comment
    10|10000 characters needed characters exceeded