How to hide/show the UI Action by Client Script

[Community Alums]

In this article, we will see how to hide/show the UI Action by Client script.

There is an Out of the box script which will give an idea to understand how to configure hide/show UI action.

Open Personal developer instance and go to Client script list.

In the Client script List, Please search “Show On hold reason when on hold ticked” in Name column.

Open the record and there we can find the Out of the box script.

Here, state_model is the Action name of the UI Action which we want to hide/show.

To see how it will work, Open Change request form which should be in Schedule state. Check True/False On Hold field, while doing this we can observe Implement UI Action.

Thanks

[chunn]

@Community Alums  hi the problem has to solved it?

I have the same the problem. I want to hide the Request Approver button of the record Producers.

[Robin J_]

@achu I wanted to hide it from a form both top and bottom if not all mandatory fields was filled out. Reason behind this is so the users first must save and then can get a custom close button, so this is separated into two actions even if they are to close the custom case immediately. 

Did achieve this by using UI Policy script.
Conditions is simply: "field x" -> "is not empty" etc.

Execute if true:

$$('#action_name')[0].hide();
$$('#action_name_bottom')[0].hide();

Execute if false:

$$('#action_name')[0].show();
$$('#action_name_bottom')[0].show();

Disclaimer: I saw someone mentioned they earlier needed to write [2] to hide the bottom, but in Tokyo at least needed to use _bottom instead. Maybe this can change in the future and ruin the code, so not 100% sure if this is the best solution. The reason why we did it this way is that the "condition" box on the "ui action" has a character limit of 254 and our condition string got too long. I have not tested if it's better to drop ".show" on "execute if false" and just have "revert if false" instead. But so far it works good for us.

Screenshots for examples:

[Yusuf5]

You could also try using the document.getElementById('<action_name>') as follows.

var uiActionElement = document.getElementById('<action_name>');
if (uiActionElement ) {
uiActionElement.style.display = "none"; //or "block" to show
}

[Rajesh Varma]

Hai @Yusuf5 

I am Not Getting,Can u Please add full Process with Script.

[XYD23]

Will this work on the workspace level?

[Cornelius Paul]

Hi @Raj raj ,

You can also use the below to hide the buttons in a UI Policy.

hide('button_name');           // UI Action's , Action name
hide('button_name_bottom');    // UI Action's ID

[Michael Gedzelm]

@Cornelius Paul  Thanks!  Your solution worked for me.  Not only is it the simplest solution, it's the only that's possible in our instance since DOM is not allowed.

[sanandpara]

Just to add, this also works for "Related Link" type of UI actions. The only changes we have to make are:

replace "button" with "a" - its a related link (navigation link, not a button).

replace "data-action-name" with "gsft_action_name", and put the whole name as set up on the "Action name" field of the UI Action record.

An important thing to note: Since London release, usage of JQuery or other DOM commands are not permitted by default, and controlled by the field (checkbox) "Isolate Script".

So make sure you have this set to false (do it from the list view if possible, or add the field to the form layout, if not already) for your client script to work and show/hide the UI action using the client script.