Approvals widget

Client script

function ($scope, $location, spUtil) {
	$scope.showApprovalWidget = function() {
		return $scope.data.approvals.length > 0;
	}
	
	$scope.openProfile = function(user) {
		$location.search("id=user_profile&sys_id=" + user.sys_id); 
	};
	
	$scope.getGlyphClass = function(approval) {
		switch (approval.state.value) {
			case 'approved':
				return 'fa-2x glyphicon glyphicon-ok-sign text-success';
			case 'rejected':
				return 'fa-2x glyphicon glyphicon-remove-sign text-danger';
			default:
				return 'fa-2x glyphicon glyphicon-question-sign text-muted';
		}
	}
	
	$scope.showEmailIcon = function(approval) {
		if ($scope.options.show_email_icon == 'false')
			return false;

		return approval.approver.email != '';
	}
	
	spUtil.recordWatch($scope, $scope.data.table, $scope.data.filter);
}

CSS

.row.info-row:hover {
	background-color: #f0f0f0;
}

.fa-2x {
  font-size: 1.5em;
  margin-top: -3px;
}

HTML template

<div class="snsc-task-approvals">
  <sp-panel rect="rect" title="'${Approvals}'" ng-if="showApprovalWidget()">
    <div class="row m-b-sm" ng-repeat="approval in data.approvals">
      <div class="col-xs-2" ng-click="openProfile(approval.approver)">
        <span class="navbar-avatar">
          <sn-avatar class="avatar-small-medium" primary="approval.approver.sys_id" show-presence="false" />
        </span>
      </div>
      <div class="col-xs-6" ng-click="openProfile(approval.approver)">{{approval.approver.name}}</div>
      <div class="col-xs-1" ng-class="{'hidden': !showEmailIcon(approval)}">
        <a href="mailto:{{approval.approver.email}}">
          <fa name="envelope" size="2"></fa>
        </a>
      </div>
      <div class="col-xs-1">
        <span class="{{::getGlyphClass(approval)}}" alt="{{::approval.state.display_value}}"></span>
      </div>
    </div>
  </sp-panel>
</div>

Server script

(function() {
  data.approvals = [];

  data.document_id = input.document_id || $sp.getParameter('sys_id');
  if (!data.document_id)
    return;

  var approvalGR = new GlideRecord('sysapproval_approver');
  approvalGR.addQuery('document_id', data.document_id);
  approvalGR.addNotNullQuery('approver');
  approvalGR.query();

  data.table = approvalGR.getTableName();
  data.filter = approvalGR.getEncodedQuery();

  while (approvalGR.next()) {
    data.approvals.push({
      sys_id: approvalGR.getUniqueValue(),
      state: $sp.getField(approvalGR, 'state'),
      approver : {
        sys_id: approvalGR.approver.toString(),
        name: approvalGR.approver.name.getDisplayValue(),
        email: approvalGR.approver.email.getDisplayValue()
      }
	});
  }
})();