Hide button once click on service portal

[kirankumarv11]

Hello All,

I have created 3 buttons(Cancel, Reopen, Escalate) on a widget and once click on it that button should hidden. It is happening for reopen & cancel buttons and the escalate button is not hiding on click, but if I refresh the window it is hiding. Please check the below code and help me.

HTML:

<div ng-if="data.canRead" class="panel">
<div class="status-info">
<div ng-init="spSearch.targetRequests()">
<sp-c-link target="form" table="data.table" id="data.sys_id"/>
</div>
<span ng-if="data.agent" >
${{{data.tableLabel}}}: {{data.agent}}
</span>
<span ng-if="!data.agent && data.agentPossible && data.table=='sc_req_item'" >${Your request has been submitted}</span>
<span ng-if="!data.agent && data.agentPossible && data.table=='incident'" >${Your incident has been submitted}</span>
<span ng-if="!data.agentPossible">${{{data.tableLabel}} record details}</span>
</div>

<div class="panel-body">
<div ng-if="data.fields.length > 0">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-6 m-b break-word" ng-repeat="field in data.fields"
ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" >
<label class="m-n" ng-if="field.label && field.label !== 'List of Variables' && field.label !== 'All Roles' && field.label !== 'Action Item' && field.label !== 'Has Multifactor Authentication Access Role'">{{field.label}}</label>
<span ng-switch="field.type">
<div ng-switch-when="glide_date_time" title="{{field.display_value}}">
<sn-time-ago timestamp="::field.value" />
</div>
<div ng-switch-default ng-if="field.display_value && field.label !== 'List of Variables' && field.label !== 'All Roles' && field.label !== 'Action Item' && field.label !== 'Has Multifactor Authentication Access Role'">{{field.display_value}}</div>
</span>
</div>
</div>
</div>
<button type="button" ng-hide="data.state =='Fulfilled' || data.state == 'Cancelled' || data.state == 'Incomplete' || data.stage =='Request Cancelled' || data.state == 'Resolved' || data.state == 'Closed'" name="cancel" ng-click="c.confirmCancelRequest()"
class="btn" style="font-weight: bold;padding: 5px;margin-left: 10px;border-radius: 0px;background: #ED3F3F;color: #fff;"> Cancel</button>
<button type="button" ng-hide="data.state !='Resolved'" name="reopen" ng-click="c.reopenItem()"
class="btn" style="font-weight: bold;padding: 5px;margin-left: 10px;border-radius: 0px;background: #00338D;color: #fff;"> Reopen</button>
<button type="button" ng-hide="data.escalation !=true" name="escalate" ng-click="c.escalateRequest()"
class="btn" style="font-weight: bold;padding: 5px;margin-left: 10px;border-radius: 0px;background: #00338D;color: #fff;"> Escalate</button>
</div>

<!--<button type="button" ng-show = "data.state == 'Fulfilled' || data.state == 'Incomplete'" name="reopen" ng-click="c.reopenItem()" class="btn" style="font-weight: bold;padding: 5px;border-radius: 0px;background: #ED3F3F;color: #fff;"> Reopen </button>-->

<div ng-if="data.variables.length > 0" ng-init="variable_toggle=true">
<h4 ng-click="variable_toggle = !variable_toggle" style="cursor: pointer;">
<span style="font-size: 12px;" class="glyphicon"

ng-class="{'glyphicon-chevron-down': variable_toggle, 'glyphicon-chevron-up': variable_toggle}"></span>

${Options}
</h4>

<div ng-if ="variable_toggle">
<hr>
<div class="m-b break-word" ng-repeat="variable in data.variables">

<label class="m-n" ng-if=" variable.display_value != 'undefined'">{{variable.label}}</label>
<div ng-if=" variable.display_value != 'undefined'"> {{variable.display_value}}</div>
</div>
</div>
</div>
</div>
<div ng-if="data.agentPossible && !data.agent && options.pickup_msg" class="panel-footer">
<div id="ticket_fields_footer" class="text-center text-muted" style="font-style: italic;" ng-bind-html="options.pickup_msg">
</div>
</div>

</div>

<script>
$(document).ready(function(){
$(".close-button").on('click', function(){
$("#confirm_cancel").hide();
});
$(".close-button").html("X");

})
</script>

Client Controller :

function ($scope,spModal,spUtil,$rootScope) {
$scope.$on('record.updated', function(name, data) {
spUtil.update($scope);
});
var c = this;
c.tableName = c.data.tableName;
var shared = {};
c.confirmCancelRequest = function(){
//The below code is to set the values of state,Stage,Active on Cancel of an RIT
if(c.tableName == 'incident'){
c.data.op = 'cancel';
c.server.update();
}

else{
spModal.open({
title: 'Select a value',
widget: '549b89c4dba2ab800bb3644a4b961981',
shared: shared
}).then(function() {
// Shared object was
c.data.op = 'cancel';
c.selectedValue =shared.selection;
c.data.u_cancellation_reason = c.selectedValue;
$rootScope.$on('customEvent', function(event,obj) {

c.data.comments = obj;

})

setTimeout(function(){
c.server.update();}, 1000);

});
}

};

//The below code is to set the values of state on Reopen of an RITM
c.reopenItem = function()
{
// LO code starts here - STRY0011827
spModal.open({

title: 'Reopen Comments',
message: 'Reason for reopening request',
input: true
//value: c.comment
}).then(function(comment) {
console.log(comment);
if(comment != ""){
c.data.op = "reopen";
//c.data.comment = comment;
c.data.u_reopen_reason = comment;
c.server.update();
}
});
};

//The below code is to set the values of BSR when it is escalated
c.escalateRequest = function()
{

spModal.open({

//title: 'Escalation Comments',
widget: '90d20e22db1a00d439a29785ca9619f6',
shared: shared

}).then(function(comment) {

if(comment != ""){
c.data.op = "escalate";

c.selectedValue =shared.selection;
c.data.u_escalate_reason = c.selectedValue;
setTimeout(function(){
c.server.update();}, 1000);

}
});
};
}

Server script : 

var gr = $sp.getRecord();
data.tableName = gr.getTableName();

if(input && input.op=='cancel' && gr)
{
gr.state =7;
gr.comments = input.comments;
gr.x_ngpu2_business_s_u_cancel_reason = input.u_cancellation_reason;
gr.update();
data.op='';
//return;
}
if(input && input.op=='reopen' && gr)
{
gr.state =18;
gr.comments = input.u_reopen_reason;
gr.update();
data.op='';
//return;
}
if(input && input.op=='escalate' && gr)
{
//gr.state =18;
gr.comments = 'Escalation raised - '+input.u_escalate_reason;
gr.x_ngpu2_business_s_escalate = 'true';
gr.x_ngpu2_business_s_escalation_reason = input.u_escalate_reason;
gr.update();
data.op='';
//return;
}
/*if (input && input.op && gr ) {
data.op = input.op;
data.u_reopen_reason = input.u_reopen_reason;
//The below code is for Cancel button for Incident Record
if(data.op == 'cancel' && gr.getTableName() == 'incident'){
gr.state = '11';
gr.comments = "The User has requested to cancel the incident";
gr.update();
data.op='';
}

//The below code is for Cancel button for Request Item
else if(data.op == 'cancel' && gr.getTableName() == 'sc_req_item' && gr.stage == 'waiting_for_approval') {
gr.stage = 'Request Cancelled';
gr.state = '11';
gr.u_cancellation_reason = input.u_cancellation_reason;
gr.updateWithReferences();

}
else if (data.op == 'cancel' && gr.getTableName() == 'sc_req_item')
{
gr.state = '11';
gr.u_cancellation_reason = input.u_cancellation_reason;
gr.updateWithReferences();
var id = gr.request;


if (gr.getTableName() != "incident")//Check if the record is not an Incident
{
var app = new GlideRecord('sc_req_item');
app.addQuery('sys_id','!=',gr.sys_id);
app.addQuery('request',id);
app.addQuery('state','IN','-5,1,2,-250');
app.query();
if(app.getRowCount() == 0)
{

var app1 = new GlideRecord('sysapproval_approver');
app1.addQuery('document_id',id);
app1.addQuery('state','requested');
app1.query();
while(app1.next())
{
app1.state = "cancelled";
app1.update();
}
}


var appr = new GlideRecord('sysapproval_approver');
appr.addQuery('document_id',gr.sys_id);
appr.query();
while(appr.next())
{
appr.state = "cancelled";
appr.update();
}

var gr2 = new GlideRecord("sc_task");
gr2.addQuery('request_item', gr.sys_id);
gr2.query();
while (gr2.next())
{
gr2.state = '-800' ;
gr2.update();
}
}
data.op = '';
}

//The below code is for reopen button
else if(data.op == 'reopen'){
var ctask = new GlideRecord('sc_task');
ctask.addQuery('request_item',gr.sys_id);
ctask.query();
while(ctask.next())
{
ctask.u_fulfilled_incomplete_reason = '';
ctask.assigned_to = '';
// STRY0012960: set u_is_reopened
ctask.u_is_reopened=true;
ctask.update();
}

// *** STRY0014689: Moved reopen logic to BR 'Set reopen count' ***
// gr.u_reopened_count = gr.u_reopened_count+1;
// gr.state = '-250';
// gr.u_reopened = true;
gr.u_reopen_temp_count = 1;
gr.u_reopen_flag = true;
gr.u_reopen_reason = data.u_reopen_reason;
gr.update();
data.op='';
}

else{
//Extra condition
}

}*/

(function(){
data.table = $sp.getParameter('table');

var gr = $sp.getRecord();
data.canRead = gr.canRead();
if (!data.canRead)
return;

var agent = "";
var a = $sp.getField(gr, 'number');
if (a != null)
agent = a.display_value;

var fields = $sp.getFields(gr,'state,x_ngpu2_business_s_type,x_ngpu2_business_s_stage,x_ngpu2_business_s_service_line,sys_created_on,x_ngpu2_business_s_u_cancel_reason');
var cancelReason='';

if (gr.getValue("sys_mod_count") > 0)
fields.push($sp.getField(gr, 'sys_updated_on'));

//The below code is to store the approvers of the Requested Item and corresponding Request
var approvers = [];
var appr1 = new GlideRecord('sysapproval_approver');
var appr2 = appr1.addQuery('document_id',gr.sys_id);
appr2.addOrCondition('document_id',gr.request);
appr1.addQuery('state','requested');
appr1.query();
while(appr1.next())
{
approvers.push(appr1.approver.name.toString());
}

if (approvers.length > 0) {
var rp = $sp.getField(appr1, 'approver');
rp.display_value = approvers.toString();
fields.push(rp);
}

data.tableLabel = gr.getLabel();
data.fields = fields;
data.variables = $sp.getVariablesArray();
for ( var arrEl = 0; arrEl < data.variables.length;arrEl++){
if(data.variables[arrEl].label == 'Preferred contact method' && gr.getTableName() == 'incident'){
var grInc = new GlideRecord('sys_choice');
grInc.addActiveQuery('name','incident');
grInc.addQuery('element','u_contact_method');
grInc.addQuery('value',data.variables[arrEl].display_value);
grInc.query();
if(grInc.next()){
data.variables[arrEl].display_value=grInc.label.toString();
}

}
}
data.agent = agent;
data.agentPossible = gr.isValidField("assigned_to");
data.table = gr.getTableName();
data.sys_id = gr.getUniqueValue();
data.state = gr.state.getDisplayValue();
//data.stage = gr.stage.getDisplayValue();
data.active = gr.active.getDisplayValue();
data.escalate = gr.x_ngpu2_business_s_escalate;
//console.log("Input is Kiran" +data.escalate);
//console.log("Input is Kiran" +data.state);
if(data.escalate == false){

data.escalation=true;

}
/*var user = gr.x_ngpu2_business_s_customer;
var userManager = new GlideRecord('sys_user');
userManager.get(user);
data.manager = userManager.manager.getDisplayValue();*/
//console.log('Manager: '+userManager.manager.getDisplayValue());

})();

[Onkar Pandav]

Hi Kiran,

Sharing you some links.

Removing Form Buttons

ServiceNow Elite

Please check if it is useful. Hope you'll find the answer.

--

Regards

Onkar

[SatheeshKumar]

Add the below changes to your script.(c.data.esacalation).

//The below code is to set the values of BSR when it is escalated
c.escalateRequest = function()
{

spModal.open({

//title: 'Escalation Comments',
widget: '90d20e22db1a00d439a29785ca9619f6',
shared: shared

}).then(function(comment) {

if(comment != ""){
c.data.op = "escalate";

c.selectedValue =shared.selection;
c.data.u_escalate_reason = c.selectedValue;

c.data.escalation = true;
setTimeout(function(){
c.server.update();}, 1000);

}
});
};
}

[kirankumarv11]

Hi Satheesh,

I have tried with your solution, but still it is not working. The button is not hiding once it is clicked and if I refresh the page then it is hiding.

Regards

V Kiran