How To: Add Impersonate User in Service Portal (using OOB Header Menu)

Greetings,

I would like to share with you the ability to add "Impersonate User" to the Service Portal without having to clone the out-of-box Header Menu widget.

I would like to first thank Service Catalyst for initially creating a widget for Service Portal impersonation.  I have taken what they built in a widget for impersonating users and created another widget based on the out-of-box Knowledge Notification Entry widget to inject "Impersonate User" in the the menu drop down and then call the Impersonate User widget when clicked.

We will be creating two widgets to make this work.

Widget #1

Name: Impersonate User

ID: impersonate_user

HTML Template:

<div class="container-fluid" ng-init="getRecentImpersonation()">
  <div class="row">
    <div class="btn-group btn-group-sm btn-group-justified" role="group">
      <label class="btn btn-info btn-sm" ng-model="c.selectedAction" uib-btn-radio="'sp'">Service Portal</label>
      <label class="btn btn-primary btn-sm" ng-model="c.selectedAction" uib-btn-radio="'classic'">Classic UI</label>
    </div>
  </div>
  <div class="row top-buffer" ng-if="data.isImpersonating">
    <div class="btn-group btn-group-sm btn-group-justified" role="group">
      <label ng-click="impersonate(c.data.realUser)" class="btn btn-danger btn-lg btn-block">
        <i class="fa fa-stop m-r-sm"></i>
        STOP Impersonating</label>
    </div>
  </div>
  <div class="row top-buffer">
    <div class="record-picker">
      <sn-record-picker field="c.data.toImpersonate" table="'sys_user'" display-field="'name'" on-change="impersonate(c.data.toImpersonate.value)"
                        display-fields="'user_name'" search-fields="'name'" page-size="100" placeholder="Search for user" options="{cache: true, allowClear: false}"
                        default-query="'active=true^locked_out=false^web_service_access_only=false^ORweb_service_access_onlyISEMPTY'"
                        value-field="'sys_id'">
      </sn-record-picker>
    </div>
  </div>
  <div class="row top-buffer">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h5 class="panel-title">
          ${Recent Impersonations}
        </h5>
      </div>
      <a ng-bind="rec.user_display_value" ng-repeat="rec in recentImpersonations" href="javascript:void(0)" class="list-group-item ng-binding ng-scope"
         ng-click="impersonate(rec.user_sys_id)"></a>
    </div>
  </div>
</div>

CSS - SCSS:

.top-buffer { 
  margin-top:20px;
}

Client Script:

function($scope, $http, $window) {
	/* widget controller */
	var c = this;
	c.data.toImpersonate = {};

	c.selectedAction = {};

	$scope.impersonate = function(userName){
		//If we don't have a user we can't impersonate
		if(!userName){
			return;
		}
		//Call to the impersonation api with username/sys_id
		$http.post("/api/now/ui/impersonate/" + userName, {}).success(function(){
			$scope.showError = false;
			if(c.selectedAction === "classic"){
				window.location = "/";
			}else if(c.selectedAction === "sp" || c.selectedAction === null){
				window.location.reload();
			}else{
				window.location.reload();
			}

		}).error(function(response){
			if(response.error){
				$scope.showError = true;
				$scope.error = response.error;
				console.warn("Impersonate Failed! with error:", response.error);
			}
		})                             
	};

	//call to the impersonation api Get recent impersonations
	$scope.getRecentImpersonation = function(){
		$http.get("/api/now/ui/impersonate/recent", {}).success(function(response){
			$scope.showError = false;
			$scope.recentImpersonations = response.result;
		}).error(function(response){
			if(response.error){
				$scope.showError = true;
				$scope.error = response.error;
				console.warn("Get Recent Impersonations Failed! with error:" + response.error);
			}
		})
	};
}

Server Script:

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	data.isImpersonating =  new GlideImpersonate().isImpersonating();
	data.realUser =  gs.getImpersonatingUserName();
})();

Widget #2

Name: Impersonate User Entry

ID: impersonate_user_entry

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

	data.canImpersonate = new GlideImpersonate().canImpersonate(gs.getUserID());
	data.isImpersonating =  new GlideImpersonate().isImpersonating();
	data.realUser =  gs.getImpersonatingUserName();
	
	if (data.canImpersonate || data.isImpersonating) {
		data.show_menu_entry = true;
	}
	else {
		data.show_menu_entry = false;
	}
	
})();

Link Function:

function(scope) {
	
	var $uibModal = $injector.get('$uibModal');
	
	// Add entry to navbar
	if(scope.data.show_menu_entry && !$('#impersonation')[0]) {
		$('#sp-nav-bar ul li.hidden-xs.dropdown ul.dropdown-menu li:first').after('<li style="cursor: pointer;"><a role="link" id="impersonation">${Impersonate User}</a></li>');
		$('#sp-nav-bar ul li.visible-xs-block:first').after('<li class="visible-xs-block" style="cursor: pointer;"><a role="link" id="impersonation">${Impersonate User}</a></li>');
	}
	
	$("#impersonation").click(function() {
		$uibModal.open({
			templateUrl: 'impersonate-widget',
			scope: scope
		})
	});
}

Next you will want to open the Impersonate User Entry widget in the platform. In the related lists go to Angular ng-templates and click New.

ID: impersonate-widget

Template:

<div class="panel panel-default">
  <h3 class="padder-md">
      Impersonate User
    </h3>
  <div class="modal-header">
    <widget id="impersonate_user"></widget>
  </div>
</div>

Final Step

Open your service portal home page in the Service Portal Designer and add the Impersonate User Entry widget to the page. Now impersonate User will show in the menu drop down for users with the impersonate role.

Add icons to menu items

If you want to add icons like you see in the screen shot above, follow these steps:

1. Open the Stock theme in the platform.
2. Add the following to CSS variables:

#sp-nav-bar > ul:nth-child(2) > li.hidden-xs.dropdown.ng-scope.open > ul > li.ng-scope > a:before {
	content: "\f08b"; /* Sign Out */
    font-family: FontAwesome;
    padding-right: 5px;
}

#sp-nav-bar > ul:nth-child(2) > li.hidden-xs.dropdown.ng-scope.open > ul > li:nth-child(1) > a:before {
	content: "\f007"; /* Profile */
    font-family: FontAwesome;
    padding-right: 8px;
}

#impersonation:before {
	content: "\f06e"; /* Impersonate User */
    font-family: FontAwesome;
    padding-right: 6px;
    margin-left: -2px;
}