Adding an Associate's Name to the Web Office Header

Admin: Web Office Admin
Page: Code Customization > Javascript Insertions
URL: {client_ID}.admin.directscale.com/#/Insertions

Suggest Edits

Using the JavaScript Insertions page, you can make it, so an associate's name appears next to their profile image in the Web Office header.

Before

After

Adding an Insertion

In the JavaScript Insertions page, click + ADD INSERTION.
Select Custom Script from the Insertion Type menu.
Enter a sort Name.
In the JavaScript Code Editor, paste the following code:

try {
  
 	// This makes the userService collection available for the HTML element
  angular.element(document).injector().invoke(function ($rootScope,UserService) {
    $(document).ready(function () {
      
      // Begin Function
      function SetUserName() {
        setTimeout(function () {
          
          // Get Web Office User profile image menu class
          var element = $('.ds_Avatar-menu');
          
          // Create HTML with the user's first and last name text
					var logoHtml ='<span class="c-white m-r-20">'+UserService.LoggedInUser.FirstName+" "+UserService.LoggedInUser.LastName+'</span>';
          console.log(logoHtml)	
          
          // Put them together
          element.prepend(logoHtml);
        }, 1000);
      } // End function
      
      SetUserName();
      
      $rootScope.$on('$stateChangeSuccess', function () {
        SetUserName();
      });
    });
  });
}
catch (err) {
  console.log(err, 'Add associate name to the header -- Error');
}

Enable the Published toggle to activate the script after saving.
Customize who can further see their user name with Multi-faceted Configuration, if needed.
Click SAVE.

Updated over 3 years ago