How to hide Form Annotation until specific field condions are met

Jerri
Mega Contributor

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?

1 ACCEPTED SOLUTION

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

26 REPLIES 26

After multiple attempts to get this to work (in Orlando), here's what I came up with based on the other posts here.  I never got the latest posts to work.

In my testing, the usable HTML in the Annotation seems to be very limited.  Basically if I tried to do a line break with anything other than using <p></p> combination everything would break (cannot even use <br> within those tags).  You may be able to use <pre></pre> but it looks pretty ugly and if it's in a split, the text won't wrap.  I guess the gist of my post is that you shouldn't necessarily assume the Client Script is the issue - it could be what you have in the Annotation.  

This is an OnChange Client Script I have working (non-scoped) when Risk is changed, using multiple Annotations:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var risk = g_form.getValue('risk');
    if (risk == 1) {
        $('risk_crit').up().show();
        $('risk_high').up().hide();
        $('risk_mod').up().hide();
        $('risk_low').up().hide();
    } else if (risk == 2) {
        $('risk_crit').up().hide();
        $('risk_high').up().show();
        $('risk_mod').up().hide();
        $('risk_low').up().hide();
    } else if (risk == 3) {
        $('risk_crit').up().hide();
        $('risk_high').up().hide();
        $('risk_mod').up().show();
        $('risk_low').up().hide();
    } else if (risk == 4) {
        $('risk_crit').up().hide();
        $('risk_high').up().hide();
        $('risk_mod').up().hide();
        $('risk_low').up().show();
    } else {
        $('risk_crit').up().hide();
        $('risk_high').up().hide();
        $('risk_mod').up().hide();
        $('risk_low').up().hide();
    }
}

It would be nice if someone figured out how to really hide (remove entirely).  Right now these 4 blocks end up stacking while hidden, giving the appearance that a field is hiding but the space wasn't reclaimed.

Hi Mark,

Thanks for the annotation information. Although it works like a charm, I am facing one issue with this, Moment I refresh/reload/save the record, annotation disappears .

 

Any suggestions?

 

DEEPAKKUMARSI_0-1715010644424.png

 

Beats DOM!  Thanks!!!!

FYI, If using a text header vs an info box, You will need to convert the text to HTML so you have a field name to reference.  Happy coding ðŸ™ƒ

<span id="provider5">Provider 5</span>