How to show Approval History of RITM on service portal

sk59
Tera Expert

Hi

As approval history is shown on the RITM I would like to show the same on the Portal. How that to be done

 

find_real_file.png

It shows just as below in the portal approval form

find_real_file.png

1 ACCEPTED SOLUTION

seanphelan
Tera Expert

This might help

HTML

<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-7" ng-click="openProfile(approval.approver)">{{approval.approver.name}}<br><small>{{approval.approver.activity}}</small></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="{{approval.approver.approvalaction}}" alt="{{::approval.state.display_value}}"></span><!--{{::getGlyphClass(approval)}}-->
      </div>
    </div>
  </sp-panel>
</div>

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);
}

Server Script

(function() {
	data.approvals = [];
	
	//data.approval_id = input.document_id || $sp.getParameter('sys_id');
	data.approval_id = $sp.getParameter('sys_id');
	
	var getdoc = new GlideRecord('sysapproval_approver');
	getdoc.get( data.approval_id);
	data.document_id = getdoc.document_id;
	if(getdoc.getRowCount() == 0)
		{
		var getdoc = new GlideRecord('sysapproval_approver');
		getdoc.get('document_id',data.approval_id);
		data.approval_id = getdoc.sys_id
		data.document_id = getdoc.document_id;
			if(getdoc.getRowCount() == 0)
				{
					data.approval_id = '007';
					data.document_id =  '007';
				}
	}
	
	var approvalGR = new GlideRecord('sysapproval_approver');
	approvalGR.addQuery('document_id', data.document_id);
	approvalGR.addQuery('state','!=','not_required');
	approvalGR.addNotNullQuery('approver');
	approvalGR.query();
	
	data.table = approvalGR.getTableName();
	data.filter = approvalGR.getEncodedQuery();
	
	while (approvalGR.next()) {
		if(approvalGR.state == 'approved')
			{
			var approvalcss ='fa-2x glyphicon glyphicon-ok-sign text-success';
		}
		else if(approvalGR.state == 'requested')
			{
			var approvalcss ='fa-2x glyphicon glyphicon-question-sign text-muted';
		}
		else if(approvalGR.state == 'rejected')
			{
			var approvalcss ='fa-2x glyphicon glyphicon glyphicon-remove text-danger';
		}
		else if(approvalGR.state == 'not_required')
			{
			var approvalcss ='text-muted';
		}
		else
			{
			var approvalcss = '';
		}
		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(),
				activity: approvalGR.wf_activity.name.getDisplayValue(),
				approvalaction: approvalcss
			}
		});
	}
})();

CSS

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

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

 

find_real_file.png

View solution in original post

21 REPLIES 21

HI

In client script getting error like unexpected token error, kindly suggest me.

find_real_file.png

There is no error but the checker thinks you forgot the function name

A function without a name is "anonymous." Anonymous functions don't need a name. Anonymous functions are functions that are dynamically declared at runtime.

 

The 'Classic' UI shows the error icon, but if you edit via the new UI of <instance>/sp_config?id=widget_editor&sys_id=<widget ID> that is not shown as an error.

The error does not prevent saving, has run with no issues on my instance and some OOB widgets do the same

Hi seanphelan,

Your script was very helpful. I managed to make the approver/s appear in Service Portal. I'm curious if possible to show only the name of group for group approver instead of each members of the group? TIA

 

@seanphelan 

I know it was old post. I tried above code but it is throwing below errors. Is there anything I need to do.

 find_real_file.png

 

Thanks

This is fantastic! I love this, thank you so much! I marked it as Helpful!

 

I did have two questions if you don't mind! So after testing out the code, I'm running into two issues.

 

1. If I review the approval history of a historical approval record and the user is inactive, it doesn't show user's name and the column is blank for Approver Name. How can I modify the script to also include inactive users?

2. The table is also not returning an records that are 'No Longer Required' or 'Not Yet Requested' and I want to get full transparency of the entire approval history. How can get both of those records to return? I'm only able to get requested, rejected, and approved records to display in the table. I created variables for not_required and not requested in the server script and client script, but for some reason those records don't appear in my table.

 

TIA!