Confirmation message on Service Portal Widget

[mattystern]

Hi all,

I had a request come in to allow for users to close their own requests (RITM) in case it was submitted in error or if it is no longer valid. I already had a "Actions Buttons" widget on my Service Portal for closing incidents, so I copied this, changed the tables, and I was able to get a working "v1" of this.

The "Action Buttons - RITM" widget is laid out here:

HTML:

<div class="panel panel-default">
 <div class="panel-heading">Actions</div>
 <div class="panel-body">
 <button type="button" class="btn btn-primary btn-block" ng-click="c.uiAction('resolve')" ng-hide="data.hideButton">Resolve Incident</button>
 </div>
</div>

Client Side:

function() {
  var c = this;
	c.uiAction = function(action) {
		c.data.action = action;
		c.server.update().then(function() {
			c.data.action = undefined;
		})
	}
}

Server Side:

(function() {

	// Get table & sys_id
	data.table = input.table || $sp.getParameter("table");
	data.sys_id = input.sys_id || $sp.getParameter("sys_id");

	// Valid GlideRecord
	gr = new GlideRecord(data.table);
	if (!gr.isValid())
		return;

	// Valid sys_id
	if (!gr.get(data.sys_id))
		return;

	// only show button if the record is an incident and is 'New', 'In Progress' or 'On Hold'
	data.hideButton = true;
	if (data.table == 'sc_req_item' && gr.state <= '3' || data.table == 'sc_req_item' && gr.state <= '4') {
		data.hideButton = false;
	}

	if (input && input.action) {
		var action = input.action;

		// If RITM table
		if (data.table == 'sc_req_item') {
			if (action == 'close_ritm') {
				//Close RITM
				gr.setValue('state', 4);
				gr.setValue('closed_by', gs.getUserID());
				gr.setValue('work_notes', "RITM Closed by Requestor")
				gr.update();
			}
		}
	}
})();

I call the action "close_ritm" which was a UI Action I built based off of the "close_sc_task" UI Action. Inside of this UI Action, I have a confirmation message:

For this, I am using if(confirm"My text here"); on the UI Action. This is working fine here, but does not apply to the Service Portal when using the newly created "Close Request" button. I thought this called the same UI Action. Is there something I can add to my widget which will do something similar to the UI Action? Guessing it needs to be on the client script but I do not work much with widgets on the Service Portal...

Any help is appreciated!

[mattystern]

Thanks again for your help Sourav! I did some more stumbling and figure it out.

[jonathandrury]

mattystern, 

What did you end up doing, I have a similar requirement.

Thanks!

[mattystern]

Hi jonathandrury,

I used spModal as Sourav suggested 🙂 I think I did some looking around for some formatting / extras (the label box checkbox and x mark thing) but I am unable to find/link my source. 

Here's the HTML / Client Script. The server script remains the same as the original post. IF you want to modify messaging, the variables h and m can be used in the client script.

HTML

<div class="panel panel-default">
 <div class="panel-heading">Actions</div>
 <div class="panel-body">
 <button type="button" class="btn btn-primary btn-block" ng-click="c.onAgree('close_ritm')" ng-hide="data.hideButton">Close Request</button>
<div ng-show="c.agree">
    {{c.agree}}
  </div>
  </div>
</div>

 Client Script

function(spModal) {
	var c = this;
	c.onAgree = function(action) {
		// ask the user for a string
		// note embedded html in message
		var h = '<h4>Confirmation Message</h4>'
		// Line feeds added to the following lines for presentation formatting.
		var m = 'This request cannot be re-opened if closed; A new request will need to be submitted. Are you sure you want to close this request?'
		spModal.open({
			title: 'Confirmation Message',
			message: h + m,
			buttons: [
				{label:'✘ ${No}', cancel: true},
				{label:'✔ ${Yes}', primary: true}
			]
		}).then(function() {
			c.agree = 'Your request was successfully closed.';
			c.data.action = action;
			c.server.update().then(function() {
			c.data.action = undefined;
				})
		}, function() {
			c.agree = 'No action taken.';
		})
	}
}