how do you show/ hide a formatter on form

[beycos]

Hello everyone, 

I have created a new formatter and this is the UI macro for this Formatter. 

<j:jelly xmlns:j="jelly:core">

  <div id="refreshWrapper" style="margin:5px 0; display:flex; justify-content:flex-end;">

    <button id="refreshBtn"

            class="btn btn-default"

            style="background-color:#007bff; color:white; border-color:#007bff;margin-right:200px;"

            onclick="refre**bleep**emList()">

      Refresh Item List

    </button>

  </div>

  <script>

    function refre**bleep**emList() {

        g_form.save();

    }

  </script>

</j:jelly> 

On the form I have choice field called "Type" . 

My aim is this formatter should be hidden when type is null and should be visible when Type is not null.

I have created client script

function onChange(control, oldValue, newValue) {
setTimeout(function() {
var wrapper = document.getElementById('refreshWrapper');
if (!wrapper) return;

wrapper.style.display = newValue ? 'flex' : 'none';
}, 300);
}

However this does not seem to be working. Do you any recommendations or ideas about what might be wrong ? Any help would be appreciated. 

Best Regards, 

Beyza 

[Tanushree Maiti]

Hi @beycos 

Refer this post: https://www.servicenow.com/community/itom-forum/how-do-you-hide-a-formatter/m-p/985505

Try something like it:

 document.getElementById("[the id of the HTML element]").style.display = "none".

[Ankur Bawiskar · Accepted solution]

@beycos 

the only way is DOM manipulation which is not recommended practice

Ensure for your client script Isolate Script = False

This field is not on form but from list you can make it false

are you using the correct HTML element ID for that -> refreshWrapper

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[beycos]

Hello Ankur, 

Thank you again  for your response and the recommendations.

I would like to clarify my requirement once more. I fully understand that DOM manipulation is not recommended in ServiceNow, and for that reason I do not want to use any DOM‑based approach in my solution.

At this point, I have created a UI Action instead of a formatter, and my goal is the following:

• The UI Action should not be visible when the “Type” field is empty (null)

• The UI Action should become visible when the “Type” field has a value

• I want to achieve this without using any DOM manipulation, and only through supported/standard ServiceNow methods

If you have any recommended approach to control UI Action visibility .

I would appreciate your guidance.

Thank you in advance for your help.

Best regards,

Beyza

[Ankur Bawiskar]

@beycos 

simply update the UI action condition like this

current.typeField != ''

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏