How to show Approval History of RITM on service portal

sk59 · ‎03-19-2019

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

seanphelan · ‎11-24-2019

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

View solution in original post

Brian186 · ‎03-15-2021

seanphelan,

I have added the approvalGR.comments.getJournalEntry(1) in the server code. However, I'm

totally lost on how to access it in the HTML part and display the comment on the widget.

Could you please help? Thank you so much.

seanphelan · ‎03-22-2021

{{approval.approver.comemnt}}

this should work since we are pushing it into an array named approver and the approval history is pushed into an array named approval

Brian171 · ‎03-30-2021

Hi Seanphelan,

The code still did not work. I must have screwed up somewhere. Could you please attach the update set so I can import in my test box to see if that works?

Here is your code, but I don't know where I failed

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

seanphelan · ‎09-17-2020

For the hover add a title ="xxxx" tag to the span

<span class="{{approval.approver.approvalaction}}" alt="{{::approval.state.display_value}}"></span>

Ant2 · ‎01-20-2021

Thanks for putting this up. I was aksed yesterday if this was possible, and now I can say yes!