Form Builder - Hide Header Annotation

[Dimitrios Hatzi]

Hello there,

I am trying to understand if I am able to hide an annotation (Header Text) from my incident form/view: Test

The scenario (UI policies applied to the fields):

• If the Funded File field is set to "none", the Header Text annotation and the two fields below it, are hidden.
• If the Funded File field is set to "yes", the Header Text annotation and the two fields below it, become visible.

My first attempt:

I created the form like this (merged with the section above):

but when form loads, and the Funded File is set to "none" I see this:

If I switch it to "yes", I see this:

Ultimately, I want the "File Funded" - Text Header Annotation to be hidden too.

My second attempt:

I created the form like this (without merging):

but when form loads, and the Funded File is set to "none" I see this:

If I switch it to "yes", I see this:

My third attempt (no merging and 3 sections):

The first section is the only section visible and the other two become tabs:

Am I asking much? Is there an alternative to hide the Header Text annotation. I know UI policies do not apply on annotations but there must be a way. I do not want to use the tab sections. Is there any hope?

Thank you

Dimitri

[Rakesh_M]

Hi @Dimitrios Hatzi ,
You can hide a annotation by DOM Manipulation
Create your annotation as rich text and give an ID to it.

<span id="hide-text"><p>Annotation Text</p></span>

now create a onChange client script

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    if (newValue=="yes" ) {
        var ann = document.getElementById("hide-text");
        ann.style.display = "none";
    } else {
        var ann = document.getElementById("hide-text");
        ann.style.display = "block";
    }
    //Type appropriate comment here, and begin script below

}

[Tanushree Maiti]

Hi @Dimitrios Hatzi 

Using DOM Manipulation you can achieve it. Without DOM , It is not feasible.

<div id="annotation_lbl"> Your Annotation Text </div>

UI Policy Script (Triggers if Funded File field is set to "yes",)

execute if true

function onCondition() {
var lblAnnotation = document.getElementById("annotation_lbl");
lblAnnotation.style.display = 'block';
lblAnnotation.parentElement.style.display = 'block';
}

execute if false

function onCondition() {
var lblAnnotation = document.getElementById("annotation_lbl");
lblAnnotation.style.display = 'none';
lblAnnotation.parentElement.style.display = 'none';
}

Refer link: https://www.servicenow.com/community/itom-forum/how-to-hide-the-annotations-on-the-form/m-p/984670/p...

[Riya Mukherjee]

Hi  @Dimitrios Hatzi ,

Annotations (like your Header Text) are not fields. They’re just static UI elements rendered on the form, so simple UI Policies don’t work on them and DOM manipulation is NOT encouraged practice in servicenow as can introduce long-term maintainability and stability issues, especially after platform upgrades.
But I have a way out for you and that is using of Glide form API in your UI policy script. When to apply conditions remain as is in your UI policy, uncheck onLoad checkbox and then use script as below inside scripting area.

g_form.hideAnnotation('<Annotation Name>'); /**Do not use annotation text**/

g_form.setDisplay('<Field Name 1>',false);

g_form.setDisplay('<Field Name 2>',false);

This approach should help you without any DOM Manipulation.

“Let me know if this works—feel free to mark helpful if it does!”
Thanks
Riya