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 

[beycos]

Hi Ankur,

Thank you for the suggestion.
I understand that updating the UI Action condition. It worked but only after the form is saved. I need the UI Action to become visible immediately when the user changes the Type field, even before saving the form.

Best regards,
Beyza