When User clicks Cancel Button need to enter Reason for Cancellation message

[Arjun Reddy Yer]

As I had written below HTML, Client Script & Server Script to get the Cancel Button & Confirmation popup but unable to get the Cancellation Reason Popup box as mentioned in below where User needs to enter the reason for cancelling the request and that Reason for Cancellation Message should capture in Notification Email Body.

Can anyone help me @Ankur Bawiskar @AnveshKumar M @priyasunku @Community Alums @Pradeep Sharma @Vasantharajan N 

HTML Template:

<div >
<button class="btn btn-danger full-width" ng-click="c.doCancel()" ng-if="c.data.show == true && data.cancelled_msg == '' ">
{{c.data.btn_text}}
</button>

<div ng-if="data.cancelled_msg != '' " class="panel b"> 
<div class="panel-heading bg-danger mars-danger-heading"> 
<i class="fa fa-exclamation cancel-icon"></i><span >{{c.data.cancelled_msg}}</span>
</div>
</div>
<div class="cancelled-msg">

</div>
</div>


<script type="text/ng-template" id="popupTemplate" data-backdrop="static" data-keyboard="false">
<div class="panel panel-default" >
<div class="panel-body text-center">
${Are you sure you would like this Ticket Cancelled?}
</div>
<div class="panel-footer text-center">
<button class="btn btn-primary" ng-click="c.closeModal(true)">${Yes}</button>
<button class="btn btn-default" ng-click="c.closeModal(false)">${No}</button>
</div>
</div>
</script>

Client Script:

function($scope, $uibModal, $location) {
/* widget controller */
var c = this;

c.doCancel = function() {

c.modalInstance = $uibModal.open({
backdrop:"static",
templateUrl: 'popupTemplate',
size: 'md',
scope: $scope
});
}

c.closeModal = function( cancel ) {

c.modalInstance.close();
if( cancel == true ) {
doCancel();
}
}

function doCancel() {

c.server.get({
action: 'cancel',
type: c.data.type,
sys_id: c.data.sys_id
}).then(function(r) { 
var searchParms = $location.search();
searchParms.refresh = true;
$location.search(searchParms);
});
}
}

Server Script:

(function() {

if (!input) {

data.show = false;
data.sys_id = $sp.getParameter('sys_id');
data.type = $sp.getParameter('table');
data.cancelled_msg = '';
var gr = $sp.getRecord();

if (gr.u_cancelled == 1 || gr.u_cancelled == 2) {
data.cancelled_msg = gs.getMessage('A request to cancel this ticket has been submitted.');
if (gr.state == 4) {
data.cancelled_msg = gs.getMessage('This ticket has been closed according to your cancellation request.');
}
}

if (data.type == 'sc_req_item') {
data.btn_text = gs.getMessage('Cancel Request');
data.show = canCancelReq(data.sys_id);
}

if (input.type == 'sc_req_item') {
cancelReq(input.sys_id);
}
}

function cancelReq(id) {

var req = new GlideRecord('sc_req_item');
if (req.get(id)) {

var sc_task = new GlideRecord('sc_task');
sc_task.addQuery('request_item', id);
sc_task.addActiveQuery();
sc_task.addNotNullQuery('assigned_to');
sc_task.query();

if (!sc_task.hasNext()) {
req.state = 4;
req.u_cancelled = 2;
req.approval = 'cancelled';
req.stage = "Request Cancelled";
//req.work_notes = "Request has been cancelled by Requester.";
req.comments = "Request has been cancelled by Requester.";
req.update();

var gr_approve = new GlideRecord('sysapproval_approver');
gr_approve.addQuery('sysapproval', id);
gr_approve.query();
while (gr_approve.next()) {

gr_approve.state = 'not_required';
gr_approve.comments = "Request has been cancelled by Requester";

gr_approve.update();
}

data.msg = gs.getMessage("This ticket has been successfully cancelled.");
} else {

// Exception for IDM requests (as tasks are generated before approval by design)
if (gs.getProperty("mars.idm.cancel.exceptions", "").indexOf(req.cat_item) >= 0 && req.approval != "approved") {

req.state = 4;
req.u_cancelled = 2;
req.stage = "Request Cancelled";
req.work_notes = "Request has been cancelled by Requester.";
req.comments = "Request has been cancelled by Requester.";
req.update();

data.msg = gs.getMessage("This ticket has been successfully cancelled.");

} 
}
}
}

function canCancelReq(id) {

var invalid_states = ['7', '3', '4'];
var userId = gs.getUserID();
var req = $sp.getRecord();

//if we have a record
if (req) {
var state = req.getValue('state');
var cancelled = req.getValue('u_cancelled');

//and it belongs to the user
if (req.request.requested_for == userId || req.opened_by == userId) {
//and it isn't already cancelled or being worked
if (cancelled != 1 && cancelled != 2 && invalid_states.indexOf(state) == -1) {
return true;
}
}

//check delegates
if (gs.getUserID() != req.request.requested_for && gs.getUserID() != req.opened_by) {
var delUtil = new global.MarsDelegateUtil();
var check = delUtil.checkIfActiveDelegate(req.request.requested_for, gs.getUserID());
if (!check && req.request.requested_for != req.opened_by) {
check = delUtil.checkIfActiveDelegate(req.opened_by, gs.getUserID());
}

if (check) {
//isn't already cancelled or being worked
if (cancelled != 1 && cancelled != 2 && invalid_states.indexOf(state) == -1) {
return true;
}
}
}
}
return false;
}
})();

Current Popup Box:

Required Reason for Cancellation Popup:

When User clicks on Yes then the below popup must appear

[Arjun Reddy Yer]

it's not working showing error "Client controller must contain a JavaScript function, see default value for example"

function($scope, $uibModal, $location, spModal) {
/* widget controller */
var c = this;

c.openConfirmModal= function() {

c.modalInstance = $uibModal.open({
backdrop:"static",
templateUrl: 'popupTemplate',
size: 'md',
scope: $scope
});
}

c.closeModal = function( cancel ) {

c.modalInstance.close();
if( cancel == true ) {
doCancel();
}
}

c.doCancel =function() {
c.openConfirmModal();



c.server.get({
action: 'cancel',
type: c.data.type,
sys_id: c.data.sys_id,
}).then(function(r) {
var searchParms = $location.search();
searchParms.refresh = true;
$location.search(searchParms);
});
}
}

[Vasantharajan N · Accepted solution]

@Arjun Reddy Yer - Please replace your client script with below code and reload the page then test it.

api.controller = function($scope, $uibModal, $location, spModal) {
	/* widget controller */
	var c = this;

	function doCancel() {
		//Second popup asking for Reason for Cancellation
		spModal.open({
			title: 'Cancellation',
			message: 'Reason for cancellation',
			size: "lg",
			input: true,
			value: c.reason,
			buttons: [
				{label:'Cancel', cancel: true},
				{label:'Confirm', primary: true}
			]
		}).then(function(reason) {
			c.reason = reason;

			c.server.get({
				action: 'cancel',
				type: c.data.type,
				sys_id: c.data.sys_id,
				reason: c.reason
			}).then(function(r) {
				var searchParms = $location.search();
				searchParms.refresh = true;
				$location.search(searchParms);
			});
		});
	}

	// First Popup Yes or No
		c.doCancel = function() {
			c.modalInstance = $uibModal.open({
				backdrop: "static",
				templateUrl: 'popupTemplate',
				size: 'md',
				scope: $scope
			});
		};

	//Action triggered after you click yes or no from first popup
		c.closeModal = function(cancel) {

			c.modalInstance.close();
			if (cancel == true) {			
				doCancel();
			}
		};

	};

[Arjun Reddy Yer]

Can I know how to capture the Reason for Cancellation comments in Email Notification body

Can we change the size of the message box into multiline text

[Vasantharajan N]

@Arjun Reddy Yer - in Server side, Please use input.reason to get the value entered by end user in the second popup window.

As we are using spModal OOTB api for popup, we will not be able to change the input tag to textarea tag.

[Arjun Reddy Yer]

in the email notification body it's capturing but with additional info which is not required also getting as mentioned in below screen shot

Server Script:

(function() {

if (!input) {

data.show = false;
data.sys_id = $sp.getParameter('sys_id');
data.type = $sp.getParameter('table');
data.cancelled_msg = '';
var gr = $sp.getRecord();

if (gr.u_cancelled == 1 || gr.u_cancelled == 2) {
data.cancelled_msg = gs.getMessage('A request to cancel this ticket has been submitted.');
if (gr.state == 4) {
data.cancelled_msg = gs.getMessage('This ticket has been closed according to your cancellation request.');
}
}

if (data.type == 'sc_req_item') {
data.btn_text = gs.getMessage('Cancel Request');
data.show = canCancelReq(data.sys_id);
}

} else if (input.action == 'cancel') {

if (input.type == 'sc_req_item') {
cancelReq(input.sys_id);
}
}

function cancelReq(id) {

var req = new GlideRecord('sc_req_item');
if (req.get(id)) {

var sc_task = new GlideRecord('sc_task');
sc_task.addQuery('request_item', id);
sc_task.addActiveQuery();
sc_task.addNotNullQuery('assigned_to');
sc_task.query();

if (!sc_task.hasNext()) {
req.state = 4;
req.u_cancelled = 2;
req.approval = 'cancelled';
req.stage = "Request Cancelled";
//req.work_notes = "Request has been cancelled by Requester.";
req.comments = input.reason;
req.update();

var gr_approve = new GlideRecord('sysapproval_approver');
gr_approve.addQuery('sysapproval', id);
gr_approve.query();
while (gr_approve.next()) {

gr_approve.state = 'not_required';
gr_approve.comments = "Request has been cancelled by Requester";

gr_approve.update();
}

data.msg = gs.getMessage("This ticket has been successfully cancelled.");
} else {

// Exception for IDM requests (as tasks are generated before approval by design)
if (gs.getProperty("mars.idm.cancel.exceptions", "").indexOf(req.cat_item) >= 0 && req.approval != "approved") {

req.state = 4;
req.u_cancelled = 2;
req.stage = "Request Cancelled";
// req.work_notes = "Request has been cancelled by Requester.";
// req.comments = "Request has been cancelled by Requester.";
req.comments = input.reason;
req.update();

data.msg = gs.getMessage("This ticket has been successfully cancelled.");

} 
}
}
}

function canCancelReq(id) {

var invalid_states = ['7', '3', '4'];
var userId = gs.getUserID();
var req = $sp.getRecord();

//if we have a record
if (req) {
var state = req.getValue('state');
var cancelled = req.getValue('u_cancelled');

//and it belongs to the user
if (req.request.requested_for == userId || req.opened_by == userId) {
//and it isn't already cancelled or being worked
if (cancelled != 1 && cancelled != 2 && invalid_states.indexOf(state) == -1) {
return true;
}
}

//check delegates
if (gs.getUserID() != req.request.requested_for && gs.getUserID() != req.opened_by) {
var delUtil = new global.MarsDelegateUtil();
var check = delUtil.checkIfActiveDelegate(req.request.requested_for, gs.getUserID());
if (!check && req.request.requested_for != req.opened_by) {
check = delUtil.checkIfActiveDelegate(req.opened_by, gs.getUserID());
}

if (check) {
//isn't already cancelled or being worked
if (cancelled != 1 && cancelled != 2 && invalid_states.indexOf(state) == -1) {
return true;
}
}
}
}
return false;
}
})();