Hide Form Annotation in Workspace solution

[phgdet]

As I was struggling to find an article/solved question to achieve this requirement recently, I want to share my trick to get it done.

Unfortunately, DOM manipulation is not supported in Workspace. As a result, even if you create an HTML annotation wrapped in a <span> element with a custom ID, none of the common DOM access methods, including document.getElementById(), gel(), or $(), will work.

Here are my steps to achieve it:

1. Copy the sys_id of annotation in table sys_ui_annotation_type.
2. Compute this string: annotation.<the sys_id>
3. Use it as a element with g_form.setDisplay as below

g_form.setDisplay("annotation.<the sys_id>", false);

 It will not work in server-side form so that please mark it to use in Workspace only via:

Run scripts in UI type = Mobile / Service Portal

Hope this helps.

[Abhishek Pal]

Hi @phgdet ,

Good finding, but on Zurich I would recommend using the supported GlideForm annotation APIs instead of addressing the annotation as:

annotation.<sys_id>

with g_form.setDisplay().

Next Experience provides supported methods specifically for annotations:

g_form.hideAnnotation('annotation_name');

and:

g_form.showAnnotation('annotation_name');

Recommended approach:

1. Open the Form Annotation record.

2. Set a meaningful value in the Name field, for example:

workspace_warning

3. In your Workspace-compatible Client Script, use:

function onLoad() {
g_form.hideAnnotation('workspace_warning');
}

To display it again:

g_form.showAnnotation('workspace_warning');

You can also verify that the annotation is available using:

var annotation = g_form.getAnnotationByName('workspace_warning');

The important difference is that these APIs use the annotation Name from the Form Annotations [sys_ui_annotation] table, not the annotation sys_id.

So I would avoid:

g_form.setDisplay('annotation.<sys_id>', false);

Although it may currently work, it relies on the internal representation of the annotation and is less upgrade-safe than the documented API.

Also, DOM manipulation is not required for this use case.

For Workspace, make sure the Client Script is configured for the appropriate UI type and uses APIs supported by Next Experience.

For Zurich, hideAnnotation(), showAnnotation(), getAnnotationByName(), getAnnotations(), and toggleAnnotations() are documented in the GlideForm Next Experience API.

Reference:

https://www.servicenow.com/docs/r/zurich/api-reference/GlideFormAPINX.html

So the cleaner implementation is simply:

g_form.hideAnnotation('workspace_warning');

rather than identifying the annotation through its sys_id.

Hope this helps!

If this response helped, please mark it as Helpful.
If it resolves your issue, please Accept it as Solution.

Kind Regards,
Abhishek Pal