Skip to Content
0

how to add the menu button in ShellHeadItem

Nov 27, 2017 at 07:56 AM

56

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Arjun Biswas Nov 29, 2017 at 09:15 AM
0

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.

Share
10 |10000 characters needed characters left characters exceeded
Anil Thammisetty Nov 27, 2017 at 01:26 PM
0

I want something menu like below


menu.png (17.8 kB)
Share
10 |10000 characters needed characters left characters exceeded