cancel Action on Standard Ticket Incident Form

[AJAYKUMAR G]

We are using the "Standard Ticket Configuration" that was new with the Paris release. On an incident in the portal, there are Actions OOB that include Resolve, Close, and Reopen.

when selecting cancel option i need pop up like "please provide reason cancel incident" and that reason updated in incident comments.
Server code

(function() {
    var incidentGr = new GlideRecord('incident');
	var incidentSysId = options.sys_id;
	
	if (!incidentSysId && $sp.getParameter('table') == 'incident')
		incidentSysId = $sp.getParameter('sys_id');
	
	if (!incidentSysId && $sp.getParameter('table') == 'universal_request') {
		var urGr = new GlideRecord('universal_request');
		urGr.get($sp.getParameter('sys_id'));
		incidentSysId = urGr.primary_task + "";
	}
	
	/* Actions - Start */
    if (input && input.action == 'resolveIncident' && incidentGr.get(incidentSysId)) {
        incidentGr.incident_state = global.IncidentState.RESOLVED;
		incidentGr.state = global.IncidentState.RESOLVED;
		incidentGr.resolved_by = gs.getUserID();
		incidentGr.update();
    }
	
	if (input && input.action == 'reopenIncident' && incidentGr.get(incidentSysId)) {
        incidentGr.incident_state = global.IncidentState.IN_PROGRESS;
		incidentGr.state = global.IncidentState.IN_PROGRESS;
		incidentGr.comments = "Ticket reopened. Caller did not feel the issue had been resolved.";
		incidentGr.update();
		gs.addInfoMessage(gs.getMessage("Request reopened"));
    }
	
	if (input && input.action == 'closeIncident' && incidentGr.get(incidentSysId)) {
		incidentGr.incident_state = global.IncidentState.CLOSED;
		incidentGr.state = global.IncidentState.CLOSED;
		incidentGr.update();
    }
	if (input && input.action == 'cancel' && incidentGR.get(incidentSysID)) {
		incidentGr.incident_state = global.IncidentState.CLOSED;
		incidentGr.state = global.IncidentState.CLOSED;
		incidentGr.update();

   /* Actions - End */
	

	/* Load incident data */
    if (incidentGr.get(incidentSysId)) {
		var incidentUtils = new global.IncidentUtils();
		data.canResolve = incidentUtils.canResolveIncident(incidentGr);
		data.canReopen = incidentUtils.canReopenIncident(incidentGr);
		data.canClose = incidentUtils.canCloseIncident(incidentGr);
		data.canEscalate = incidentUtils.canEscalateIncident(incidentGr);
		data.showActions = data.canResolve || data.canReopen || data.canClose || data.cancel;
    }

    data.i18n = {};

})();

and the client controller: 

function incidentTicketActions($scope, $http, spUtil, $timeout, spModal, i18n, $window, $uibModal) {
    /* widget controller */
    var c = this;
    c.doneLoading = false;

    var MOBILE_DEVICE_SCREEN_WIDTH = 767;
    $scope.mobileDevice = c.data.isMobile || ($window.innerWidth < MOBILE_DEVICE_SCREEN_WIDTH);


	$scope.resolveIncident = function() {
        $scope.data.action = 'resolveIncident';
        $scope.server.update(init);
    };
	
	$scope.closeIncident = function() {
		$scope.data.action = 'closeIncident';
        $scope.server.update(init);
	};

    $scope.reopenIncident = function() {
        $scope.data.action = 'reopenIncident';
        $scope.server.update(init);
    };
	
	$scope.cancel = function() {
		$scope.data.action = 'cancel';
		$scope.server.update(init);
	};

    function init() {}
	
    $(document).on('click', 'div.modal-footer button.btn, ul#child-case-tabs .dropdown-menu', function(e) {
        e.stopPropagation();
    });

    $(document).bind('dragover drop', function(event) {
        event.preventDefault();
        return false;
    });

    $scope.$on('sp_loading_indicator', function(e, value) {
        if (!value && !c.doneLoading) {
            c.doneLoading = true;
        }
    });


}

Here is the IncidentUtils Script Include:

var IncidentUtils = Class.create();
IncidentUtils.prototype = Object.extendsObject(IncidentUtilsSNC, {
    initialize: function() {
	IncidentUtilsSNC.prototype.initialize.call(this);
    },
    /***************Custom changes****************/	
	canReopenIncident: function(current){
	return current.incident_state == IncidentState.RESOLVED && !this._isMajorIncident(current);
    },
	canEscalateIncident: function(current){
		return current.incident_state == IncidentState.Active || IncidentState.New || IncidentState.OnHold;
	},
	
    type: 'IncidentUtils'	
});

IncidentUtils.isCopyIncidentEnabled = function(current) {
	var incidentUtils = new IncidentUtils();
	return incidentUtils.isCopyIncidentFlagValid();
	
};

IncidentUtils.isCreateChildIncidentEnabled = function(current) {
	var incidentUtils = new IncidentUtils();
	return incidentUtils.isCreateChildIncidentFlagValid();
	
};

please provide any idea, Thanks

[Cheikh Ahmadou]

1: Show a Modal When “Cancel” Is Clicked

$scope.cancel = function () {
  spModal.open({
    title: "Cancel Incident",
    message: "Please provide a reason for cancelling this incident:",
    input: true, // enables text input
    value: "",   // default value
    size: "md"
  }).then(function (result) {
    if (result.button === "ok" && result.inputValue) {
      $scope.data.action = "cancel";
      $scope.data.cancel_reason = result.inputValue;
      $scope.server.update(init);
    }
  });
};

2: Modify the Server Script to Accept cancel_reason

In your server script, update this block:

if (input && input.action == 'cancel' && incidentGr.get(incidentSysId)) {
    incidentGr.incident_state = global.IncidentState.CLOSED;
    incidentGr.state = global.IncidentState.CLOSED;

    if (input.cancel_reason) {
        incidentGr.comments = "Cancelled by user. Reason: " + input.cancel_reason;
    } else {
        incidentGr.comments = "Cancelled by user.";
    }

    incidentGr.update();
}