Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

How to get Multiple Line Text Prompt on service portal

Ankita Gupte
Kilo Sage

Hello, I have a prompt on service portal that when approver clicks on reject widget, it show to enter mandatory comment in single line text. I want is multiple line text. How can I achieve this?

find_real_file.png

Server script of widget is:

if (input) {
// update pagination
currentPage = input.pagination.currentPage;
initRow = (currentPage * maxNumberOfItemsInTheList);
lastRow = initRow + maxNumberOfItemsInTheList;

if (input.op == 'approved' || input.op == 'rejected') {
var app = new GlideRecord("sysapproval_approver");
if (app.get(input.target) && app.state.canWrite()) {
app.state = input.op;
if(input.op == 'rejected')
{
app.comments = input.reject_comment;
}
app.update();
}
}
}

Client Script of widget is:

$scope.reject = function(id, esigRequired) {

spModal.open({
title: 'Reject Approval',
message: 'Please enter your reason for rejection, note this will be communicated with the requestor',
input: true,
value: $scope.name
}).then(function(name) {
$scope.name = name;

var requestParams = {
username: $scope.data.esignature.username,
userSysId: $scope.data.esignature.userSysId
};

if($scope.data.esignature.e_sig_required && esigRequired) {
spUIActionsExecuter.executeFormAction(ESIGNATURE.REJECT_SYS, "sysapproval_approver" , id, [] , "", requestParams).then(function(response) {
});
} else {
$scope.data.op = "rejected";
$scope.data.target = id;
$scope.data.reject_comment = "Rejection reason: " + $scope.name;
get();
}
});
};

7 REPLIES 7

Nikita30
Mega Sage

Can you please show the HTML code as well.

<div class="panel panel-{{::options.color}} b" ng-if="data.showApprovals">
<div class="panel-heading">
<h2 class="h4 panel-title"><fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" />${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></h2>
</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">
${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}}" 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">
<div ng-if="item.variables.length > 0" ng-init="variable_toggle=false">
<a href="javascript:void(0)" ng-click="variable_toggle = !variable_toggle">
<span class="glyphicon"
ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}">
</span>
${Options}
</a>
<div ng-repeat="variable in item.variables | filter:{visible_summary:true}" ng-if="variable_toggle">
<label class="m-t-xs m-b-none text-muted"><b>{{::variable.label}}</b></label>
<div ng-if="!variable.multi_row"><span class="pre-wrap">{{::variable.display_value}}</span></div>
<div ng-if="variable.multi_row">
<a href="javascript:void()" uib-popover-template="'sp_multirow_vs_summarizer.html'" popover-title="{{variable.label}}"
popover-placement="auto right" popover-append-to-body="true" popover-trigger="outsideClick">${Click to view}</a>
</div>
</div>
</div>
</div>
</div>
<div ng-if="approval.variables.length > 0" ng-init="variable_toggle=false">
<a href="javascript:void(0)" ng-click="variable_toggle = !variable_toggle">
<span class="glyphicon"
ng-class="{'glyphicon-chevron-down': !variable_toggle, 'glyphicon-chevron-up': variable_toggle}">
</span>
${Options}
</a>
<div ng-repeat="variable in approval.variables" ng-if="variable_toggle">
<label class="m-t-xs m-b-none text-muted"><b>{{::variable.label}}</b></label>
<div ng-if="!variable.multi_row"><span class="pre-wrap">{{::variable.display_value}}</span></div>
<div ng-if="variable.multi_row">
<a href="javascript:void(0)" uib-popover-template="'sp_multirow_vs_summarizer.html'" popover-title="{{variable.label}}"
popover-placement="auto right" popover-append-to-body="true" popover-trigger="outsideClick">${Click to view}</a>
</div>
</div>
</div>

</div>
<div ng-if="!options.portal" class="col-sm-4">
<button name="approve" 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" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" ng-click="reject(approval.sys_id, approval.requireEsigApproval);">${Reject}</button>
<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" 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" 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: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: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>

Sai Kumar B
Mega Sage

Hi @Ankita Gupte  

You can use "\n" in your message to break the line. 

Please mark my answer as helpful/correct, if applicable.

Best regards,
Sai Kumar

message: 'Please enter your reason for rejection, note this will be communicated with the requestor\n',

 

inserted like this but not working