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 Shiva,
OOB provided menu has 'My Task' option which is already linked to the to-do list; just curious why you want to add it again. You can rename it if it's required.
Related to knowledge, you can add it from the instance menu option. but again the best solution to link knowledge is under taxonomy. You can create a separate topic as Knowledge.
In short, both changes are possible through instance menu options but not one best solution. I would recommend pushing for OOB's best-aligned solution.
Ok got it, Shiva.
Sure. go to Portals-> Employee Center ->Click on the Main menu. Under menu, -> click More-> add new item and link it to knowledge or required page.
Please mark as correct answer or helpful if the provided response resolves your query!
Please mark as correct answer or helpful if the provided response resolved your query!