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

seanphelan
Tera Expert

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

seanphelan
Tera Expert

Hope this helps.  ITs the xml export of the widget