In Service portal need to create 'Cancel' button after the request gets submitted

Arjun Reddy Yer
Tera Guru

Hi Friends,

 

I'm facing issue in creating "Cancel" button in Service Portal as it should look like in mentioned below screen shot. 

And when I tried to add widget as mentioned steps it's not getting added

  1. Go to the Ticket Page in SP, go look at an existing incident.

  2. Ctrl-Right click and select "Page in Designer"

  3. On the Widgets Sidebar drag-n-drop the "Cancel" widget on the form but it's not getting.

Can anyone help me @priyasunku @Ankur Bawiskar @BharathChintala @Sumalatha Y @AnveshKumar M @Allen Andreas @asifnoor @Brad Tilton @Pradeep Sharma @Sonu Parab @Sandeep Dutta @Hemant Goldar @Amit Gujarathi @Kieran Anson 

 

find_real_file.jpg

 

I tried with below Script but "Cancel" button is not visible as when the User Submit the Request then the "Cancel" button should be visible and after the "Request got Approved" then it should be disable.

 

HTML Script:

 

<div>
<div class="panel b" ng-if="data.showWidget">
<div class="panel-heading bg-primary">Actions</div>
<div class="panel-body">

<button type="button" class="btn btn-danger btn-block" ng-click="c.openModalCancel()" ng-if="data.showCancel">Cancel</button>

</div>
</div>

<script type="text/ng-template" id="modalTemplateCancel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Provide a reason for the cancel</h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateResolve" ng-submit="c.uiAction('cancel')">
<div class="form-group">
<textarea required sp-autosize="true" ng-required="true" ng-model="data.cancelComments" id="cancelComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
</div>
<input class="btn btn-primary" type="submit" />
</form>
</div>
</div>
</script>

<script type="text/ng-template" id="modalTemplateStatus">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Provide any additional information</h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateStatus" ng-submit="c.uiAction('status')">
<div class="form-group">
<textarea required sp-autosize="true" ng-required="true" ng-model="data.statusComments" id="statusComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
</div>
<input class="btn btn-primary" type="submit" />
</form>
</div>
</div>
</script>
</div>

 

Client Script:

api.controller=function() {
/* widget controller */
var c = this;
$scope.$on('record.updated', function(name, data) {
c.data.cancelComments = '';
c.data.statusComments = '';
spUtil.update($scope);
})

c.uiAction = function(action) {
c.data.action = action;
c.server.update().then(function() {
c.data.action = undefined;
})
c.modalInstance.close();
}
}
c.openModalCancel = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplateCancel',
scope: $scope
});
}
c.openModalStatus = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplateStatus',
scope: $scope
});
}
c.closeModal = function() {
c.modalInstance.close();
};

 

Server Script:

 

(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;

//Button Visibility
if(data.table == 'incident' && gr.active == true && gr.incident_state != 6 && (gr.caller_id == gs.getUserID() || gs.hasRole("admin"))){
data.showWidget = true;
data.showCancel = true;
data.showStatus = true;

}
else if(data.table == 'incident' && gr.incident_state == 6 && (gr.caller_id == gs.getUserID() || gs.hasRole("admin"))){
data.showWidget = true;
data.showCancel = false;
data.showStatus = false;

}
else if(data.table == 'sc_req_item' && gr.active == true && (gr.request.requested_for == gs.getUserID() || gs.hasRole("admin"))){
data.showWidget = true;
data.showCancel = true;
data.showStatus = true;

}
else {
data.showWidget = false;
data.showCancel = false;
data.showStatus = false;

}

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

//Incident table
if (data.table == 'incident') {

if (action == 'cancel') {
gr.setValue('incident_state', 8);
gr.setValue('state', 8);
gr.setValue('resolved_by', gs.getUserID());
gr.setValue('close_code','Customer Cancelled');
gr.setValue('close_notes','Cancelled by caller with comment: '+ input.cancelComments);
//gr.work_notes = 'Cancelled by caller with comment: ' + input.resolveComments;
gr.update();
}
}

//Requested Item table
if (data.table == 'sc_req_item' && input.cancelComments !='') {
if (action == 'cancel') {
var workflow = new Workflow();
workflow.cancel(gr);
gr.setValue('approval','withdrawn');
gr.setValue('stage','Request Cancelled');
gr.setValue('state','4');
gr.setValue('active','false');
gr.comments.setJournalEntry("Closed by Requested For with comment: "+ input.cancelComments);
gr.update();
}
if (action == 'status' && input.statusComments !='') {

gr.comments.setJournalEntry("Status request by user: "+ input.statusComments);
gr.update();
}
}

}
})();

 

1 ACCEPTED SOLUTION

Hi @Arjun Reddy Yer 

 

Try below code I did it in my PDI it worked.

 

HTML:

 

<div class="panel b" ng-if="data.showWidget">
<div class="panel-heading bg-primary">Actions</div>
<div class="panel-body">
<button type="button" class="btn btn-danger btn-block" ng-click="c.openModalCancel()" ng-if="data.showCancel">Cancel</button>
</div>
</div>


<script type="text/ng-template" id="modalTemplateCancel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Provide a reason for the cancel</h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateResolve" ng-submit="c.uiAction('cancel')">
<div class="form-group">
<textarea required sp-autosize="true" ng-required="true" ng-model="data.cancelComments" id="cancelComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
</div>
<input class="btn btn-primary" type="submit" />
</form>
</div>
</div>
</script>

 

Server script : 

(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;

//Button Visibility
if(data.table == 'incident' && gr.active == true && gr.incident_state != 6 && (gr.caller_id == gs.getUserID() || gs.hasRole("admin"))){
data.showWidget = true;

data.showCancel = true;
}
else if(data.table == 'sc_req_item' && gr.active == true && (gr.request.requested_for == gs.getUserID() || gs.hasRole("admin"))){
data.showWidget = true;
data.showCancel = true;

}
else {
data.showWidget = false;
data.showCancel = false;
}

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

//Incident table
if (data.table == 'incident') {


if (action == 'cancel') {
gr.setValue('incident_state', 8);
gr.setValue('state', 8);
gr.setValue('resolved_by', gs.getUserID());
gr.setValue('close_code','Customer Cancelled');
gr.setValue('close_notes','Cancelled by caller with comment: '+ input.cancelComments);
//gr.work_notes = 'Cancelled by caller with comment: ' + input.resolveComments;
gr.update();
}

}

//Requested Item table
if (data.table == 'sc_req_item' && input.cancelComments !='') {
if (action == 'cancel') {
var workflow = new Workflow();
workflow.cancel(gr);
gr.setValue('approval','withdrawn');
gr.setValue('stage','Request Cancelled');
gr.setValue('state','4');
gr.setValue('active','false');
gr.comments.setJournalEntry("Closed by Requested For with comment: "+ input.cancelComments);
gr.update();
}
if (action == 'status' && input.statusComments !='') {

gr.comments.setJournalEntry("Status request by user: "+ input.statusComments);
gr.update();
}
}

}
})();

 

client controller :

 

function($uibModal, $scope, spUtil) {
var c = this;

$scope.$on('record.updated', function(name, data) {
c.data.cancelComments = '';
spUtil.update($scope);
})

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

c.openModalCancel = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplateCancel',
scope: $scope
});
}


c.closeModal = function() {
c.modalInstance.close();
}
}

 

If my answer solved your issue, please mark my answer as Correct & 👍Helpful

View solution in original post

9 REPLIES 9

priyasunku
Kilo Sage

@Arjun Reddy Yer  may i know if widget is getting displayed on portal and what error youa re getting exactly.

 

 

If my answer solved your issue, please mark my answer as Correct & 👍Helpful

it's not getting displayed

priyasunku
Kilo Sage

@Arjun Reddy Yer  Also refer the below link it might help you.

 

https://www.servicenow.com/community/developer-forum/in-service-portal-wrong-button-showing-as-cance...

 

If my answer solved your issue, please mark my answer as Correct & 👍Helpful

@Arjun Reddy Yer can you check the provided link if it helps.

 

If my answer solved your issue, please mark my answer as Correct & 👍Helpful