spModal with text setting the value of a field (ServicePortal)

[F_bio Santos]

Hi everyone, Im trying to make a button "reject" on the portal to open a spModal to give a reason why they are rejecting the solution, I have been trying to use alert, but I have seen that the "spModal" is the best way to do it. I have never worked with it and Im not being able to find a good way to do this. can someone help please ?

Code:

HTML:

     <li ng-if="data.ShowButtons">
						<a href="javascript&colon;void(0)" ng-click="approve()">Approve</a>
						<a href="javascript&colon;void(0)" ng-click="reject()">Reject</a>
         </li>

Client Script:

    $scope.approve = function() {
        console.log("Approving record with sys_id: " + $scope.data.sys_id);
        $scope.data.action = 'approve';
        $scope.server.update();
    };

    $scope.reject = function() {
        console.log("Rejecting record with sys_id: " + $scope.data.sys_id);
        $scope.data.action = 'reject';
				var comment = prompt("Please enter a comment explaining the rejection:");
				if (!comment) {
            alert("Comment is mandatory to cancel the incident.");
            return; // Exit the function if no comment is provided
        }

Server Script:

    var sys_id = $sp.getParameter('sys_id');
    var tableName = $sp.getParameter('table');

		var INCgr = new GlideRecord('incident');
    var REQgr = new GlideRecord('sc_req_item');
		REQgr.get(sys_id);
		INCgr.get(sys_id);

 		data.ShowButtons = ((INCgr.state == '6' && INCgr.u_approved != 'true' && INCgr.u_rejected != 'true') || (REQgr.state == '3' && REQgr.u_approved != 'true' && REQgr.u_rejected != 'true'));

    if (input.action == 'approve') {
        if (tableName == 'sc_req_item') {
            REQgr.u_approved = 'true'; // Closed Complete for sc_req_item
						REQgr.update();
        } else if (tableName == 'incident') {
            INCgr.u_approved = 'true'; 
						INCgr.state = '7'; // Closed for incident
 						INCgr.update();
        }		
    } else if (input.action == 'reject') {
        if (tableName == 'sc_req_item') {
            REQgr.u_rejected = 'true'; // Work in Progress for sc_req_item
						REQgr.update();
        } else if (tableName == 'incident') {
            INCgr.u_rejected = 'true';
						INCgr.state = '2'; // In Progress for incident
						INCgr.update();
        }
    }

[debendudas]

Hi @F_bio Santos ,
You can update the below client script code in the widget to get the functionality:

$scope.reject = function() {
		spModal.open({
			title: "Rejection reason",
			message: "Please enter the rason to reject this:",
			input:true,
			buttons: [
				{label:'Cancel', cancel: true},
				{label:'Reject', primary: true}
			]
		}).then(function(response) {
			$scope.data.rejectionReason = response;
			$scope.data.action = 'reject';
			$scope.server.update();
		});
	}

In the Server script, you can use data.rejectionReason variable to access the rejection reason.

Below is the output of the spModal:

……………………………………………………………………………………………………

Please Mark it helpful  👍 and Accept Solution ✔️!!!! If this helps you!!

[F_bio Santos]

Hi @debendudas I ended up doing it in another way:

    $scope.reject = function() {
        console.log("Rejecting record with sys_id: " + $scope.data.sys_id);
        $scope.data.action = 'reject';
				var comment = prompt("Please enter a comment explaining the rejection:");
				if (comment) {
				$scope.data.Recordcomments = comment;
        }
        $scope.server.update();
    };

[debendudas]

Hi @F_bio Santos ,

So, you end up using prompt functionality, instead of spModal, from the user experience point of view spModal would be a better solution. 

If my spModal solution is helpful for you, then please mark it helpful and accept the solution.

Thank you.

[F_bio Santos]

@debendudas yeah I know, but they want it with the layout of the "prompt" for some reason ... what Im having trouble right now is with hiding the buttons, that is not working ... 

     <li ng-if="data.ShowButtons">
						<a href="javascript&colon;void(0)" ng-click="approve()">Approve</a>
						<a href="javascript&colon;void(0)" ng-click="reject()">Reject</a>
         </li>

data.ShowButtons = ((INCgr.state == '6' && INCgr.u_approved != 'true' && INCgr.u_rejected != 'true') || (REQgr.state == '3' && REQgr.u_rejected != 'true' && REQgr.u_approved != 'true'))