How to grayed out a button in service portal

[Snow consultan1]

Hi All,

I have a requirement to grayed out custom button and add popup message if someone clicks on grayed out button.

can anyone suggest me.

Thanks

[Harish KM]

you can do like this in the widget

HTML:

<div>
<button type="submit" ng-disabled="isDisabled" ng-click="disableButton()"> Click me to disable myself</button>
<!--button ng-disabled="true" type="button" onclick="alert('Hello world!')">Click Me!</button-->
</div>

client script

function($scope) {
/* widget controller */
var c = this;
$scope.isDisabled = false;

$scope.disableButton = function() {
alert("I am disabled");
$scope.isDisabled = true;
}

}

[Snow consultan1]

Hi Harish,

Thanks for the reply. I have the below requirement. could you please help me with the html tag, client script and server script please.

1. Cancel Request (custom button) should be visible if the request is awaiting for approval and catalog(sc_catalog) in item table is IT story

2. once the request is approved, a record will create in device collection table linked to RITM number and status will be 100

3. if the request is approved and status is 100, button should be visible 

4. if the request is approved and status is not equal to 100, button should be grayed out and if a user click on it, popup message should come.

below is the current html tag and script, which is working fine for only below scenarios

1. table is sc_req_item

2. stage is awaiting_for_approval

if the above condition is met, button is visible.

html tag

<div>
<button type="button" ng-if="c.data.showCancel"class="btn btn-danger btn-lg btn-acceptRejectSolution" ng-click="c.uiAction('cancel')"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Cancel Request</button>
</div>
</div>

client script

function($scope, spUtil) {
var c = this;
spUtil.recordWatch($scope, $scope.data.table, "sys_id=" + $scope.data.sys_id);
c.uiAction = function(action) {
c.data.action = action;
c.server.update().then(function() {
c.data.action = undefined;
})
}
}

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;

data.stage = gr.getValue('stage');
data.showCancel = (data.stage == 'waiting_for_approval') ? true: false;

if (input && input.action) {
var action = input.action;
// If request item table table
if (data.table == 'sc_req_item') {

if (action == 'cancel') {
// Cancel Request
var req = new GlideRecord('sc_request');
req.get('sys_id',gr.request);
req.setValue('request_state', 'closed_cancelled');
req.setValue('stage', 'closed_incomplete');
req.setValue('approval', 'rejected');
req.update();
gr.comments='Request is cancelled by '+req.requested_for.getDisplayValue();
gr.update();
}
}
}
})();

[Snow consultan1]

Hi  nathanfirth,

Can you please suggest here?

Thanks