How to hide/show an UI action on field changes

[Goran WitchDoc]

EDIT: (14/03 -19) I wouldn't recommend using this. I have sadly not a better solution but as stated below, doing DOM Manipulation will most likely end up in problem with upgrades etc. and the comments in this post works as a good example for this. I'm keeping this post since it might not be any other way, but it would really really try to avoid this approach unless it's for a critical requirement.

EDIT: has been updated(27/7 -17) to work in newer releases. Been tested in Jakarta with (Chrome v59 & FireFox v54). This is a good example of the bad part of doing DOM manipulation and the effort it might take to have it working. A big problem here as well is that ServiceNow has multiple html elements with the same id(which should be unique).

On a UI action you can set a condition to decide when the it show be visible or not. This works in most of the cases, but there is one minor set back and that is that the conditions on the UI action is evaluated when the form loads and won't react if the condition is meet by changing a field. Perhaps you instead want a button to show when a field changes and should be visible for the user without them needed to save first.

For this example. Lets say you want a button to be visible if the priority is 1 on an incident. If you only would use an UI Action you would probably do something like this:

Now if an incident is priority 1 when it's loaded then button will show and everything is fine. But if someone has a priority 3 than they want to change to priority 1 and hit the button, they need to first change to priority 1 and save before that button will appear.

Now, this can of course be done without saving 😃

Make the same UI Action, but you can remove the condition, it's not needed.

Now, instead go and create an UI Policy and change to the advanced view.

Set the conditions that you normally would have on the UI Action. Make sure the "On load" & "Reverse if false" is checked like this:

And now for the magic to happen. Go into the Script section and check the Run scripts.

Put in the following code and as you can see we are using the action name as an identifier to find the UI Action and then simply using show() & hide() to make the button visible or not depending if the condition is true or not.

EDIT: This picture has been updated:

If you have been doing this in your dev you will now see that your button will hide and show depending if you change the priority to 1 or not.

Code has been made so it hides/shows all the buttons, both on the top and at the bottom.