How to hide Form Annotation until specific field condions are met

Jerri · ‎11-06-2018

I am trying to add a form annotation that displays only if certain field conditions are met. Can anyone point me in the right direction?

Mark Stanger · ‎11-07-2018

Change your client script to run 'onChange' against the 'Business service' field. Then use the script below (adjusting the Business Criticality values to match yours as needed) and you should be good to go.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	// Get the 'Business service' reference
	var bs = new GlideRecord('cmdb_ci_service');
	bs.addQuery('sys_id', newValue);
	bs.query(showBSAnnotation);
}

function showBSAnnotation(bs) {
	if (bs.next()) {
		// Show annotation if high business criticality.
		if ((bs.busines_criticality == '1 - most critical') || (bs.busines_criticality == '2 - somewhat critical')) {
			// Hide the annotation
			$('my_annotation').up().show();
		}
		else {
			// Hide the annotation
			$('my_annotation').up().hide();
		}
	}
	else {
		// Hide the annotation
		$('my_annotation').up().hide();
	}
}

Please mark this response correct if I've answered your question. Thanks!

View solution in original post

Jerri · ‎11-07-2018

I'm sorry, yes. Those are the actual choice values.

Jerri · ‎11-07-2018

Thank you! I was able to tweak this to get exactly what I was looking for!

nigelharrison · ‎02-14-2019

Just went through the pain of getting this to work and our developer fixed the following.

Created a UI policy against the field you want to show the annotation against. In this case, a 'Yes/No' field, annotation only to show on YES and hide when none or NO.

UI Policy Script

execute if true

function onCondition() {
var refs3 = document.getElementsByClassName("annotation-wrapper");
refs3[24].style.display = 'block';
}

execute if false

function onCondition() {
var refs3 = document.getElementsByClassName("annotation-wrapper");
refs3[24].style.display = 'none';

}

This annotation is the 25th annotation, in 'form design' you count them 0-24.

The obvious problem to be aware of.
If annotations are added or removed above this annotation then the script will start hiding the new 25th annotation.

So we amended and added the label feature in the annotation to pick up specific annotation, no need to number them.

In the annotation you need to a a lablel.
<div id="annotation_label"> Annotation Text Goes Here </div>

UI Policy Script

execute if true

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

execute if false

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

Heleno Martins2 · ‎03-18-2021

1) form annotation:

<span id="anno1">reference link html or title or text</span>

2) onload client script:

function onLoad() {

anno1.parentNode.style.display = "none";

}

Anna Markose · ‎05-01-2020

Hi All,

I am getting the below error when I tried this.

Error : onChange script error: TypeError: $ is not a function function () { [native code] }

Please advise.