How to show Approval History of RITM on service portal

[sk59]

Hi

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

It shows just as below in the portal approval form

[Community Alums]

Hi, am trying to display the additional comments with approval history. Followed your suggestion it is working but in increasing the number of emails. So I want to display all the approvals in requested state in single additional comment. Trying to glide sysapproval table and defining the logic but it is not working can you please help me with the solution. Thanks 

[Prateek kumar]

Please take a look at this.

https://community.servicenow.com/community?id=community_question&sys_id=990bcbaddb5cdbc01dcaf3231f961973

[seanphelan · Accepted solution]

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

[mr18]

Hi Seanphelan,

Thank you for the wonderful solution.
However, I am stuck in small thing while using the widget provided by you.
Whenever I am hovering the mouse on the icon beside approver, it is showing the title of the widget instead of the actual state of the approval.
Could you please help me in fixing this.
Also, instead of wf_activity, I want the comment to be available if any for that approver.

[seanphelan]

If you place approvalGR.comments.getJournalEntry(1) in the server code you can access the last comment if any then you can access it in the HTML part

approver : {

sys_id: approvalGR.approver.toString(),

name: approvalGR.approver.name.getDisplayValue(),

email: approvalGR.approver.email.getDisplayValue(),

activity: approvalGR.wf_activity.name.getDisplayValue(),

approvalaction: approvalcss,

comemnt: approvalGR.comments.getJournalEntry(1) }