Customizing global header in Employee Center

[radiantbeam]

Hi,

I'm not very experienced with EC and need to find a solution to put my custom menu item after 'My Favorites' and before 'Profile'. I tried to edit Header widget, but I only managed to add this item after the Profile in HTML field. How to add my menu item to OOTB generated list and order it how I want?

Thanks in advance

[Shruti · Accepted solution]

Hi,

Paste below to HTML section of the widget and update the href for new menu item (highlighted in bold twice for mobile view and desktop view)

<!-- Nav bar menu items starts-->

<nav class="navbar-inverse" aria-label="Primary" role="navigation" ng-if="!showViewAsHeader">

  <!-- Piece above searchbar -->

  <div class="clearfix">

    <div class="navbar-header nav-container" ng-class="{'nav-mobile' : showMobileMenuOnDesktop || mobileDevice}">

      <!-- 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 Page}">

        <img ng-src="{{::portal.logo}}" alt="{{::portal.title}} - ${Home Page}"/>

      </a>

      <!-- Search Bar Desktop -->

      <div ng-class="mobileDevice ? 'header-search-mobile' : 'header-search'" ng-show="showSearchBar && !mobileDevice">

        <sp-widget widget="data.typeahead"></sp-widget>

      </div>

      <div ng-if="!(showMobileMenuOnDesktop || mobileDevice)" class="hidden-xs sp-loading-indicator la-sm" role="presentation" ng-class="{'invisible': !loadingIndicator}">

          <div></div>

          <div></div>

          <div></div>

      </div>

      <div ng-if="data.showSparkle">

        <sp-widget widget="data.sparkle"></sp-widget>

      </div>

      <!-- Esc Notifications Bell widget -->

      <div ng-if="data.isNotificationsActive && (showMobileMenuOnDesktop || mobileDevice)" class="main-header-item">

        <sp-widget widget="data.notificationsBellWidget"></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}' : '${Show menu}'}}" 

                aria-expanded="{{isMobileViewOnDesktopExpanded}}" 

                data-toggle="tooltip"

                data-placement="auto bottom"

                data-original-title="{{isMobileViewOnDesktopExpanded ? '${Hide Menu}' : '${Show Menu}'}}"

                ng-click="toggleMobileMenuVisibility($event)">

          <div ng-if="!isMobileViewOnDesktopExpanded">

     <!-- showing count as '9+' when the count is more than '9' -->

             <span class="label label-as-badge label-primary">{{((data.mobileViewTodoCount + cartItemCount + data.assetAttestaionCount) > 9) ? '9+' : (data.mobileViewTodoCount + cartItemCount + data.assetAttestaionCount) }}</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-show="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>

                   <div class="main-header-items header-nav-item" ng-if="!showMobileMegaMenu">

                    <div class="main-header-item" ng-if="data.showAssets">

                       <a class="header-item" href="?id=my_assets" id="assets" aria-label="${My Assets}, {{c.attestaionCountTranslation}}">

                        <span ng-bind-html="'${My Assets}'" aria-hidden="true"></span>

                        <span ng-show="data.assetAttestaionCount" class="label label-as-badge label-primary">{{data.assetAttestaionCount}}</span>

                       </a>

                     </div>

                     <div class="main-header-item" ng-if="data.showTodos">

                       <a class="header-item" href="?id=hrm_todos_page" id="todos_mobile" aria-label="${My Tasks}, {{c.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>

                     </div>

                     <div class="main-header-item" ng-if="data.showRequests">

                       <a class="header-item" 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>

                     </div>

                     <div class="main-header-item" ng-if="data.isFavoritesEnabled">

                       <a class="header-item" href="?id=favorites_list" id="favorites_mobile" aria-label="${My Favorites}">

                        <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>

                       </a>

                     </div>

                      <div class="main-header-item">

                       <a class="header-item" href="?id=test" aria-label="${My IT Footprints}">

                        <span ng-bind-html="'${My IT Footprints}'" aria-hidden="true"></span>

                       </a>

                     </div>

                     <!-- Experience Feedback Header Menu item widget -->

                     <div class="main-header-item" ng-if="showMobileMenuOnDesktop && exFeedbackActive">

                       <sp-widget widget="data.headerFeedbackWidget"></sp-widget>

                     </div>

                     <div class="main-header-item" ng-if="data.showMoreItems" ng-repeat="item in data.moreItems">

                       <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}}"

                          class="header-item">

                          <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}}"

                          class="header-item">

                          <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>

                       </a>

                     </div>

                     <!-- Cart, tours, and Wishlist (Mobile View) -->

                     <div>

                        <sp-widget widget="data.top.menu" id="menu_item"></sp-widget>

                     </div>

                   </div>

                 </li>

                 <li class="separator" ng-if="!showMobileMegaMenu"></li>

                 <li class="m-l-sm main-header-item" 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">

                    <a href="{{data.link}}" ng-class="getClass(data.link)" aria-label="{{user.name}} ${profile}">

                      <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-show="showSearchBar && mobileDevice">

        <sp-widget widget="data.typeahead"></sp-widget>

      </div>

      <!-- Header Navbar -->

      <div ng-if="!(showMobileMenuOnDesktop || mobileDevice)" class="navbar-right">

        <div class="height-adjust header-group" aria-label="${Header menu}">

          <div class="nav navbar-nav header-menu">

            <div class="gt-menu-item" ng-if="data.showAssets">

                <a href="?id=my_assets" id="assets" aria-label="${My Assets}, {{c.attestaionCountTranslation}}">

                    <span ng-bind-html="'${My Assets}'" aria-hidden="true"></span>

                    <span ng-show="data.assetAttestaionCount" class="label label-as-badge label-primary">{{data.assetAttestaionCount}}</span>

                </a>

            </div>

            <div class="gt-menu-item" 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}}">

                <span ng-bind-html="'${My Tasks}'"></span>

                <span ng-show="data.todoCount" class="label label-as-badge label-primary">{{data.todoCount}}</span>

              </a>

            </div>

            <div class="gt-menu-item" ng-if="data.showRequests">

              <a href="?id=my_requests" id="cases_popup" aria-label="${My Requests}"> <!-- 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>

            </div>

            <div class="gt-menu-item" ng-if="data.isFavoritesEnabled">

               <a href="?id=favorites_list" id="favorites" aria-label="${My favorites}"> 

                 <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>

               </a>         

            </div>

             <div class="gt-menu-item">

               <a href="?id=test" aria-label="${My IT Footprints}"> 

                 <span ng-bind-html="'${My IT Footprints}'" aria-hidden="true"></span>

               </a>         

            </div>

            <!-- Esc Notifications Bell Menu item widget -->

            <div ng-if="data.isNotificationsActive" class="main-header-item">

              <sp-widget widget="data.notificationsBellWidget"></sp-widget>

            </div>

            <div class="gt-menu-item more-menu-position" id="more-items" 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}}">

                <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}}"

                 ng-click="navEvent($event, data.moreItems[0].href)"

                 aria-label="{{data.moreItems[0].label}}">

                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>

              </a>

              <a href

                 ng-if="data.moreItems.length > 1"

                 id="more-items-button"

                 aria-haspopup="true"

                 data-toggle="dropdown"

                 data-target="more-items-dropdown"

                 data-placement="bottom"

                 aria-label="{{data.moreItemsTitle}}" role="button">

                <span ng-bind-html="data.moreItemsTitle" aria-hidden="true"></span>

                <span class="fa collapse-margin m-l-xs fa-caret-down"></span>

              </a>

              <ul id="more-items-dropdown" ng-if="data.moreItems.length > 1" class="dropdown-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}}">

                    <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}}">

                    <span ng-bind-html="item.shortLabel" aria-hidden="true"></span>

                  </a>

                </li>

              </ul>

            </div>

          </div>

          <!-- Avatar and its drop down (Desktop) -->

          <div class="avatar-drop-down gt-menu-item" role="presentation">

            <sp-widget widget="data.avatarDropDown" id="avatar_drop_down" ></sp-widget>

          </div>

          <!-- Cart, tours, and Wishlist -->

          <div class="gt-menu-item" role="presentation">

            <sp-widget widget="data.top.menu" id="menu_item"></sp-widget>

          </div>

        </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 }">

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

<nav class="navbar-inverse" aria-label="Primary" role="navigation" ng-if="showViewAsHeader">

    <div class="clearfix">

      <div class="navbar-header nav-container">

      <!-- Logo -->

        <a class="navbar-brand" ng-if="::!portal.logo" href="?id=ec_view_as_search&viewAs=true" aria-label="${Employee Center View As Home}"><span>${Employee Center View As Home}</span></a>

        <a class="navbar-brand navbar-brand-logo "

           ng-if="::portal.logo" href="?id=ec_view_as_search&viewAs=true"

           aria-label="{{::portal.title}}${ - View As Home Page}"

           data-toggle="tooltip"

           data-placement="bottom"

           data-title="{{::portal.title}}${ - View As Home}">

        <img ng-src="{{::portal.logo}}" alt="{{::portal.title}}${ - View As Home Page}"/>

      </a>

      </div>

  </div>

</nav>

 <!-- Experience Feedback Widget-->

    <div ng-if="!(showMobileMenuOnDesktop || mobileDevice) && exFeedbackActive">

      <sp-widget widget="data.modalWidget"></sp-widget>

    </div>

<sp-widget widget="c.data.perfWidget"></sp-widget>