Display/Hide a UI Action Button Based on Form Value

[Matt Grover]

I've been asked to hide a UI action button on a form until a user makes a selection on a particular drop-down field.  In my case, I'm working in a global application called 'ticket', which is an extension of the task table.  Tickets are created by end-users and fielded by the help desk, which reviews them and transfers them to the appropriate type of record (incident, RITM, problem, etc.) and assigns them to the appropriate group.

The bug right now is that the transfer button can be clicked before the help desk worker actually decides what kind of record to transfer the ticket to.  I know how to restrict the button on the UI action record itself by adding a condition to the button.  However, this only works 'onLoad'.  So this method would require the help desk worker to take three actions:

1. Select the type of record to transfer to in the drop-down
2. Save the form
3. Click the 'transfer' button which is now visible after re-loading the form

I'm hoping that there is a way for them to avoid clicking the save button and re-loading the form, so basically utilizing an onChange script or UI Policy.  However, in searching the community, all of the solutions involve DOM manipulation, which is not considered best practice.

Additionally, I've tried the method found here: 
https://community.servicenow.com/community?id=community_question&sys_id=2cf54361db1cdbc01dcaf3231f96...
But I'm running into the same error reported with the jquery method not being a function.

Does anyone know if this method stopped being supported in New York, or if there is any other way to show/hide a button based on another field value without reloading the form?

[Viswanatha]

Unable to hide bottom action, can you please me in this..

[Matt Grover]

Hello Miguel,

Thanks so much for this tip!  It's working now.  I'm inclined to mark this as the answer and happily walk away with a new trick up my sleeve.  However, I would ask, if anyone knows, what the isolate script checkbox really does, and if there are use cases where one would want to avoid unchecking the isolate script flag?

Is there any alternative method that people have found for this use case that doesn't involve DOM manipulation?

[Miguel Donayre]

Hello @Matt Grover 

the "isolate script checkbox " was introduced in London and all it does is block any client-side scripts from manipulating DOM. By unchecking it it open that script to DOM manipulation.  here is a good blog post that explains it. 

I have do not know if any alternative methods. 

[Matt Grover]

Thanks again Miguel!  I marked your first response as the answer.  I did want to let folks know of another hiccup I ran into regarding hiding both the top and bottom buttons, but was eventually able to figure out.  In other posts on the subject, the script has some code that looks something like this:

If true:

function onCondition() {
$$('#sysverb_transfer_ticket')[0].hide();
$$('#sysverb_transfer_ticket')[1].hide(); //this code throws an error for me
}

If false:

function onCondition() {
$$('#sysverb_transfer_ticket')[0].show();
$$('#sysverb_transfer_ticket')[1].show(); //this code throws an error for me
}

I think it's based on the top and bottom buttons being indexed in an array (I don't really know much about jquery).  But this wasn't working for me.  I noticed from chrome developer tools that the bottom button had the word '_bottom' appended to the id name, and it also has an index of zero.  So the code that works actually ends up looking like this:

For future reference I am currently in the New York release.  

[CJB]

Hey, Matt. Whenever you right click on the Change Request form, can you see options? I set up UI Policy on buttons too and I lost all my right-click form options on change request when UI Policy is active.