How to Disable (Not Hide) UI Actions in Client Controller script in a Widget/Service Portal

[Matt Cordero1]

Within a Service Portal I want to disable (not hide) the UI Actions on the form to prevent click-happiness.  When clicking on the form's Save button, the UI Actions are disabled (and greyed out).  How can I get that same behavior (the disabling) when my form's Approve button is clicked???

// Disable UI Action buttons on Approval
        if (action.action_name == 'approve') {
			// Disable UI Actions (like a Save)
        }

[Aditya_hublikar · Accepted solution]

Hello @Matt Cordero1 ,

In Service Portal , when Save is clicked .  form goes into a submitting state,Buttons are temporarily disabled,UI Actions are greyed out .For a custom Approve button, this does NOT happen automatically — so we must handle it manually .

 if (action.action_name == 'approve') {
			// Disable UI Actions (like a Save)
var buttons = document.querySelectorAll('button');
// this queryselector all will select all buttons in array then you can disable them 
buttons.forEach(function(btn) {
btn.disabled = true;
});

// to add your gray effect
buttons.forEach(function(btn) {
btn.style.opacity = '0.5';
});
        }

I also didn't tried this before , please  let me know  this approach will work or  not . 

If this helps you then mark it as helpful and accept as solution.

Regards,

Aditya

[Matt Cordero1]

Thank you for your help!  Here is the code snippet that I used in the Client Controller code:

$scope.triggerUIAction = function(action) {
	if ($scope.data.disableUIActions && !action.primary) {
		return;
	}

	// Disable UI Action buttons on Approval
	if (action.action_name == 'action_name_of_UI_button') {
		// Disable UI Actions (like a Save)
		var buttons = document.querySelectorAll('button');
		// this queryselector will select all buttons in an array then disable them 
		buttons.forEach(function(btn) {
			btn.disabled = true;
		});
	}
}