Add comments in approval widget in service portal?

[Kiran Kumar 76]

i have added a text on the ootb approval widget on service portal ,how can i carry this value to record when approved or rejected

HTML code : Highlighted the code

<div class="panel panel-{{::options.color}} b" ng-if="data.showApprovals">
<div class="panel-heading">
<h3 class="h4 panel-title">
<fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" ></fa>
${My Approvals}
<label ng-if="data.pagination.showPagination && (data.pagination.from <= data.pagination.to)" class="pull-right text-info">
<span ng-if="data.pagination.from != data.pagination.to">
{{data.pagination.from}} ${to_lower}
</span>
{{data.pagination.to}} ${of} {{data.pagination.of}}
</label>
</h3>
</div>
<div class="panel-body" ng-class="{'padder-b-none': data.approvals.length != 0}">
<div ng-if="data.approvals.length == 0 && data.pagination.of == 0" tabindex="-1" id="no-approval">
${You have no pending approvals}
</div>
<div ng-if="data.approvals.length == 0 && data.pagination.of != 0">
${Loading approvals...}
</div>
<div ng-repeat="approval in data.approvals" class="sp-approval m-b-xl">
<div class="row">
<div ng-class="contentColClass">
<div ng-if="approval.task.number || approval.task.short_description">
<a ng-href="?id=approval&table=sysapproval_approver&sys_id={{::approval.sys_id}}" id="approval_task_{{::approval.sys_id}}"title="{{data.ViewApprovalPageMsg}}">
<span ng-if="approval.task.number">{{::approval.task.number}}</span>
<span ng-if="approval.task.number && approval.task.short_description"> - </span>
<span ng-if="approval.task.short_description">{{::approval.task.short_description}}</span>
</a>
</div>
<div ng-if="approval.task.opened_by"><label>${Requestor}</label> {{::approval.task.opened_by}}</div>
<div ng-if="approval.task.approver"><label>${Approver}</label> {{::approval.task.approver}}</div>
<div ng-if="approval.task.start_date"><label>${Start}</label> {{::approval.task.start_date}}</div>
<div ng-if="approval.task.end_date"><label>${End}</label> {{::approval.task.end_date}}</div>
<div ng-if="approval.task.quantity"><label>${Quantity}</label> {{::approval.task.quantity}}</div>
<div ng-if="approval.task.price"><label>${Price}</label> {{::approval.task.price}}
<span ng-if="approval.task.recurring_price"><label>${Recurring price}</label> {{::approval.task.recurring_price}} {{::approval.task.recurring_frequency}}</span>
<label ng-if="approval.task.quantity && approval.task.quantity > 1"> ${each}</label>
</div>
<div ng-if="approval.items.length == 1">
<div ng-repeat="item in approval.items">
<sp-widget ng-if="item.variableSummarizerWidget" widget="item.variableSummarizerWidget"></sp-widget>
</div>
</div>
<sp-widget ng-if="approval.variableSummarizerWidget" widget="approval.variableSummarizerWidget"></sp-widget>

</div>
<div ng-if="!options.portal" class="col-sm-4">
<button name="approve" id="approve_button_{{::approval.sys_id}}" aria-labelledby=" approve_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" ng-if="approval.state == 'requested'" class="btn btn-primary btn-block" style="border-width:1px;" ng-click="approve(approval.sys_id, approval.requireEsigApproval);">${Approve}</button>
<button name="reject" id="reject_button_{{::approval.sys_id}}" aria-labelledby=" reject_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" ng-click="reject(approval.sys_id, approval.requireEsigApproval);">${Reject}</button>
<textarea id="comment" name ="approvalComment" rows ="5" cols="33">Put here the reason for the approval/rejection</textarea>
<button ng-if="approval.state == 'approved'" class="btn btn-success btn-block">{{approval.stateLabel}}</button>
<button ng-if="approval.state == 'rejected'" class="btn btn-danger btn-block">{{approval.stateLabel}}</button>
<button ng-if="approval.state != 'requested'" class="btn btn-default btn-block" style="visibility:hidden">{{approval.stateLabel}}</button>
</div>
<div ng-if="options.portal && approval.state == 'requested'" class="col-xs-6">
<button name="reject" ng-disabled="approvalsInProgressFor.indexOf(approval.sys_id) > -1" id="reject_button_{{::approval.sys_id}}" aria-labelledby=" reject_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" class="btn btn-default btn-block" ng-click="reject(approval.sys_id, approval.requireEsigApproval);">${Reject}</button>
</div>
<div ng-if="options.portal && approval.state == 'requested'" class="col-xs-6">
<button name="approve" ng-disabled="approvalsInProgressFor.indexOf(approval.sys_id) > -1" id="approve_button_{{::approval.sys_id}}" aria-labelledby=" approve_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" class="btn btn-primary btn-block" ng-click="approve(approval.sys_id, approval.requireEsigApproval);">${Approve}</button>
</div>
<div ng-if="options.portal && approval.state != 'requested'" class="col-xs-12">
<button ng-if="approval.state == 'approved'" class="btn btn-success btn-block">{{approval.stateLabel}}</button>
<button ng-if="approval.state == 'rejected'" class="btn btn-danger btn-block">{{approval.stateLabel}}</button>
</div>
</div>
</div>

<!-- body -->

</div>
<div class="panel-footer clearfix" ng-if="data.pagination.showPagination">
<a id="previous-btn" href="javascript&colon;void(0)" ng-click="previousPage()" ng-show="data.pagination.hasPrevious" class="pull-left btn btn-sm btn-default" aria-label="${Pagination button Previous}">
<i class="fa fa-arrow-left m-r-sm" aria-hidden="true"></i>${Previous}</a>
<a id="next_btn" href="javascript&colon;void(0)" ng-click="nextPage()" ng-show="data.pagination.hasNext" class="pull-right btn btn-sm btn-default " aria-label="${Pagination button Next}">
${Next}<i class="fa fa-arrow-right m-r-sm col-md-offset-3" aria-hidden="true"></i></a>
</div>
</div>

[Anand Kumar P]

Hi @Kiran Kumar 76 ,

Modified script with the comment parameter added to the approve and reject functions:

<button name="approve" id="approve_button_{{::approval.sys_id}}" aria-labelledby="approve_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" ng-if="approval.state == 'requested'" class="btn btn-primary btn-block" style="border-width:1px;" ng-click="approve(approval.sys_id, approval.requireEsigApproval, approval.comment);">${Approve}</button>
<button name="reject" id="reject_button_{{::approval.sys_id}}" aria-labelledby="reject_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" ng-click="reject(approval.sys_id, approval.requireEsigApproval, approval.comment);">${Reject}</button>

$scope.approve = function(sysId, requireEsigApproval) {
    var comment = $scope.approval.comment;
}
$scope.reject = function(sysId, requireEsigApproval) {
    var comment = $scope.approval.comment;
}

Please mark it as Solution Proposed and Helpful if it works for you.
Thanks,

Anand

[Kiddy · Accepted solution]

@Kiran Kumar 76 

Please go through below post

https://www.servicenow.com/community/itsm-forum/how-to-pass-data-from-html-to-server-script-or-html-...