I want to add "Employee to-do" and "knowledge" pages to the header of the employee center like shown in image in HTML but i am not good at scripting. so please kindly help me.
This is the script which i have
<!-- Nav bar menu items starts-->
<nav class="navbar-inverse" aria-label="Primary" role="navigation">
<!-- Piece above searchbar -->
<div class="clearfix">
<div class="navbar-header nav-container">
<!-- Logo -->
<a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}" aria-label="{{::portal.title}}"><span>{{::portal.title}}</span></a>
<a class="navbar-brand navbar-brand-logo"
ng-if="::portal.logo" href="?id={{::portal.homepage_dv}}"
aria-label="{{::portal.title}}${ - Home Page}"
data-toggle="tooltip"
data-placement="bottom"
data-title="{{::portal.title}}${ - Home}">
<img ng-src="{{::portal.logo}}" alt="{{::portal.title}}${ - Home Page}"/>
</a>
<!-- Search Bar Desktop -->
<div ng-class="mobileDevice ? 'header-search-mobile' : 'header-search'" ng-if="showSearchBar && !mobileDevice">
<sp-widget widget="data.typeahead"></sp-widget>
</div>
<!-- Mobile Navigation View -->
<div class="mobile-top-navigation" ng-if="showMobileMenuOnDesktop || mobileDevice">
<!-- Toggle Button (Hamburger Menu for Mobile View) -->
<button type="button"
class="sub-navbar-overflow-entry-button"
ng-class="isMobileViewOnDesktopExpanded ? 'close-icon-visible' : ''"
aria-label="{{isMobileViewOnDesktopExpanded ? '${Hide menu primary navigation}' : '${Show menu primary navigation}'}}"
data-toggle="tooltip"
data-placement="auto bottom"
data-original-title="{{isMobileViewOnDesktopExpanded ? '${Hide Menu}' : '${Show Menu}'}}"
ng-click="toggleMobileMenuVisibility($event)">
<div ng-if="!isMobileViewOnDesktopExpanded">
<span class="label label-as-badge label-primary">{{data.todoCount + data.requestCount + cartItemCount}}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<i class="fa fa-close" ng-if="isMobileViewOnDesktopExpanded"></i>
</button>
<div class="mobile-view-on-desktop"
ng-class="mobileDevice && showSearchBar ? 'search-visible' : ''"
ng-if="isMobileViewOnDesktopExpanded"
ng-click="handleMobileViewClick($event)"
role="presentation">
<div class="height-adjust">
<ul class="mobile-view-navbar">
<!-- Mega Menu & Login functionality (Mobile View) -->
<li class="mobile-mega-menu-entry">
<sp-widget widget="data.escNavigation"></sp-widget>
<ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
<li><a href ng-click="openLogin()">${Login}</a></li>
</ul>
</li>
<li>
<ul class="main-header-items header-nav-item" ng-if="!showMobileMegaMenu" role="menu">
<li class="main-header-item" ng-if="data.showTodos" role="menuitem">
<a href="?id=hrm_todos_page" id="todos_mobile" aria-label="${My Tasks}, {{data.todoCountTranslation}}">
<span ng-bind-html="'${My Tasks}'" aria-hidden="true"></span>
<span ng-show="data.todoCount" class="label label-as-badge label-primary">{{data.todoCount}}</span>
</a>
</li>
<li class="main-header-item" ng-if="data.showRequests" role="menuitem">
<a href="?id=my_requests" id="requests_mobile" aria-label="${My Requests}">
<span ng-bind-html="'${My Requests}'" aria-hidden="true"></span>
<span ng-show="data.requestCount" class="label label-as-badge label-primary">{{data.requestCount}}</span>
</a>
</li>
<li class="main-header-item" ng-if="data.isFavoritesEnabled" role="menuitem">
<a href="?id=favorites_list" id="favorites_mobile" aria-label="${My Favorites}">
<span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>
</a>
</li>
<li class="main-header-item" ng-if="data.showMoreItems" ng-repeat="item in data.moreItems" role="menuitem" tabindex="0">
<a ng-if="item.label !== item.shortLabel"
href="{{item.href}}"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="${{{item.label}}}"
aria-label="${{{item.label}}}"
tabindex="-1">
<span ng-bind-html="'${' + item.shortLabel + '}'" aria-hidden="true"></span>
</a>
<a ng-if="item.label === item.shortLabel"
href="{{item.href}}"
aria-label="${{{item.label}}}">
<span ng-bind-html="'${' + item.shortLabel + '}'" aria-hidden="true"></span>
</a>
</li>
<!-- Cart, tours, and Wishlist (Mobile View) -->
<li role="menuitem">
<sp-widget widget="data.top.menu" id="menu_item"></sp-widget>
</li>
</ul>
</li>
<li class="separator" ng-if="!showMobileMegaMenu"></li>
<li class="m-l-sm main-header-item" role="menuitem" ng-if="c.data.voluntarySurveyIsActive">
<widget id="listening_posts_give_feedback_mega_menu"></widget>
</li>
<li class="separator" ng-if="!showMobileMegaMenu && c.data.voluntarySurveyIsActive"></li>
<!-- User Profile -->
<li class="m-t-sm m-b-sm header-nav-item user-name" ng-if="!showMobileMegaMenu" tabindex="0">
<a href="{{data.link}}" ng-class="getClass(data.link)" aria-label="{{user.name}} ${profile}" tabindex="-1">
<span class="navbar-avatar"><sn-avatar class="avatar-small-medium" show-presence="false" primary="user.sys_id" /></span>
<span>{{user.name}}</span>
</a>
</li>
</ul>
<!-- Avatar (User profile Dropdown) with only Impersonate & Logout options -->
<div class="impersonate-and-logout header-nav-item" ng-if="!showMobileMegaMenu">
<sp-widget widget="data.avatarDropDown"></sp-widget>
</div>
</div>
</div>
</div>
<div ng-class="mobileDevice ? 'header-search-mobile' : 'header-search'" ng-if="showSearchBar && mobileDevice">
<sp-widget widget="data.typeahead"></sp-widget>
</div>
<!-- Header Navbar -->
<div ng-if="!(showMobileMenuOnDesktop || mobileDevice)" class="navbar-right">
<div class="height-adjust">
<ul class="nav navbar-nav" role="menubar" aria-orientation="horizontal">
<li class="hidden-xs sp-loading-indicator la-sm" ng-class="{'invisible': !loadingIndicator}">
<div></div>
<div></div>
<div></div>
</li>
<li class="gt-menu-item" role="presentation" ng-if="data.showTodos">
<a href="?id=hrm_todos_page" ng-class="getClass('?id=hrm_todos_page')" id="todos_link" aria-label="${My Tasks}, {{c.todoCountTranslation}}" role="menuitem">
<span ng-bind-html="'${My Tasks}'"></span>
<span ng-show="data.todoCount" class="label label-as-badge label-primary">{{data.todoCount}}</span>
</a>
</li>
<li class="gt-menu-item" role="presentation" ng-if="data.showRequests">
<a href="?id=my_requests" id="cases_popup" aria-label="${My Requests}" role="menuitem"> <!-- TODO: Link for requests -->
<span ng-bind-html="'${My Requests}'" aria-hidden="true"></span>
<span ng-show="data.requestCount" class="label label-as-badge label-primary">{{data.requestCount}}</span>
</a>
</li>
<li class="gt-menu-item" role="presentation" ng-if="data.isFavoritesEnabled">
<a href="?id=favorites_list" id="favorites" aria-label="${My favorites}" role="menuitem"
data-toggle="tooltip" title="${My favorites}" data-placement="bottom">
<i class="fa icon" ng-class="data.favoriteIcon"></i>
</a>
</li>
<li class="gt-menu-item" id="more-items" role="presentation" ng-if="data.showMoreItems">
<a ng-if="(data.moreItems.length === 1) && (data.moreItems[0].label !== data.moreItems[0].shortLabel)"
href="{{data.moreItems[0].href}}"
target="{{data.moreItems[0].url_target}}"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="${{{data.moreItems[0].label}}}"
aria-label="${{{data.moreItems[0].label}}}"
role="menuitem">
<span ng-bind-html="'${' + data.moreItemsTitle + '}'" aria-hidden="true"></span>
</a>
<a ng-if="(data.moreItems.length === 1) && (data.moreItems[0].label === data.moreItems[0].shortLabel)"
href="{{data.moreItems[0].href}}"
target="{{data.moreItems[0].url_target}}"
aria-label="${{{data.moreItems[0].label}}}"
role="menuitem">
<span ng-bind-html="'${' + data.moreItemsTitle + '}'" aria-hidden="true"></span>
</a>
<a href
ng-if="data.moreItems.length > 1"
id="more-items-button"
data-toggle="dropdown"
data-target="more-items-dropdown"
data-placement="bottom"
aria-label="${{{data.moreItemsTitle}}}"
role="menuitem">
<span ng-bind-html="'${' + data.moreItemsTitle + '}'" aria-hidden="true"></span>
<i class="fa collapse-margin m-l-xs fa-caret-down"></i>
</a>
<ul id="more-items-dropdown" ng-if="data.moreItems.length > 1" class="dropdown-menu"
role="menu" aria-label="${{{data.moreItemsTitle}}}">
<li role="presentation"
ng-repeat="item in data.moreItems"
class="ng-scope dropdown-menu-line header-menu-item">
<a ng-if="item.label !== item.shortLabel"
href="{{item.href}}"
target="{{item.url_target}}"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="${ {{item.label}} }"
aria-label="{{item.label}}"
role="menuitem">
<span ng-bind-html="'${' + item.shortLabel + '}'" aria-hidden="true"></span>
</a>
<a ng-if="item.label === item.shortLabel"
href="{{item.href}}"
target="{{item.url_target}}"
aria-label="{{item.label}}"
role="menuitem">
<span ng-bind-html="'${' + item.shortLabel + '}'" aria-hidden="true"></span>
</a>
</li>
</ul>
</li>
<!-- Avatar and its drop down (Desktop) -->
<li class="avatar-drop-down gt-menu-item" role="menuitem">
<sp-widget widget="data.avatarDropDown" id="avatar_drop_down" ></sp-widget>
</li>
<!-- Cart, tours, and Wishlist -->
<li class="gt-menu-item">
<sp-widget widget="data.top.menu" id="menu_item"></sp-widget>
</li>
</ul>
</div>
</div>
</div>
<!-- LP Voluntary Feedback Widget-->
<div ng-if="!(showMobileMenuOnDesktop || mobileDevice) && c.data.voluntarySurveyIsActive">
<widget id="listening_posts_voluntary_feedback"></widget>
</div>
</div>
<!-- Sub Navbar on Desktop -->
<div class="navbar-collapse sub-navbar clearfix collapse collapsed hidden-xs"
ng-class="{ 'in': expanded, 'collapsed': !expanded, 'sub-navbar--mobile-view': showMobileMenuOnDesktop }"
aria-expanded="false">
<div>
<sp-widget widget="data.escNavigation"></sp-widget>
<ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">
<li><a href ng-click="openLogin()">${Login}</a>
</li>
</ul>
</div>
</div>
<!-- Analytics -->
<div ng-if="data.analyticsSupportEnabled">
<widget id="cda-site-analytics" options="{'enable_logging': false}"></widget>
</div>
</nav>
Hi Sharad,
It will be the only one item but it should be on the left side of my tasks as mentioned in the screen short. So, it is not possible adding it into the more item menu. And, in future if we add more into the more menu it should be not available, we need to search it on more menu. In my case it should be appear as mentioned in screen short. so please kindly help me on that. I tried it also.
Thank you.
