Catalog Item Annotation HTML Variable Instructions on form

[Hadyn]

I'm using the CMS and wanted to annotate my catalog item form with some instructions without using the help text facility. I know you can create a UI Macro but it seems a waste to have to create and link a new ui macro for each annotation on every item.

I also am going to service portal soon too and I read you can use the widget selector under the "default value" tab on the macro variable to display a widget on the service portal and you can pass a value to the widget through the default value field. This got me thinking.

Then I read this post https://community.servicenow.com/thread/226154 about the instructions field on a variable and how it is shown in service portal. "Brilliant" I thought - thats exactly what I need but for the CMS. (I always wondered what that field did).

So I built a UI Macro, which gets the html from the instructions field on the variable. This way you only have to have 1 UI Macro to display an annotation. You also get a WYSWIG HTML Editor and as an added bonus its future compatible with service portal! (Because UI Macros dont show in SP, but the instructions field does).

Heres the UI macro:

Name: variable_html

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
       <g:evaluate jelly="true">
               var gr = new GlideRecord('item_option_new');
               gr.get(jelly.jvar_question_id);
               gr               
       </g:evaluate>
       <div class="help-block text-muted col-xs-6">
               <g:no_escape>${gr.instructions}</g:no_escape>
       </div>
</j:jelly>

Heres a screencap of the UI macro.

Here a screencap of the UI Macro Variable on a catalog Item and where to put the HTML for your annotation.

This is where to specify the new "variable_html" UI Macro on the catalog item variable.

And this is what it looks like on the CMS

And this is what it looks like on the service portal.

[Hadyn]

I just upgraded to London from Jakarta the other day and yes I had an issue. I had to check the "show help" checkbox in order for the instructions to render in the service portal. I am using the catalog item v2 widget though and I haven't checked if it's necessary for the v1 widget.

[tim2222]

We're on London patch 2 and it looks like the behaviour has changed:

• Instructions are now rendered on Platform and Portal, if Show help is checked.
• On Platform instructions are rendered as HTML in the legacy "help box".
• With variable type Macro, instructions and Help Text are not rendered by Platform nor Portal.
• With variable type Macro with Label, instructions and Help Text are rendered on both Platform and Portal.

Using the workaround here we get instructions rendered on Platform but not on Portal (due to Macro type omitting help on Portal).

The video here appears to cover the change:
https://docs.servicenow.com/bundle/london-it-service-management/page/product/service-catalog-management/task/t_DefineHelpInformation.html

But note it's wrong/out of date - the help text appears above the input:

So we can broadly achieve the same as this workaround now by using "Macro with Label", check "Show help" and provide Instructions. The downside is instructions are rendered in the ugly "Help" box:

[oleksiykosenkov]

Thanks for your detailed instruction, saved me a lot of headache

[jimsvn]

Change the variable type from "Macro" to "Macro with Label", and be sure to check the "Show help" box. You may wish to blank-out (or space-fill) the "Question" field as well. If you have access to HI, this has been documented as a Known Error for London under KB0717181.

PS: If my answer is correct, please mark it as correct. If you find it helpful, mark it as helpful

[Tim Grindlay]

Thanks! This worked really well! 

I also used Anil's method of using a macro with a label, but I found a drawback with that is it also shows the question/label, (which I'm unable to blank out) and the expand/collapse button.

I decided to use a widget, which is a new field you can specify on the variable. Initially I just used straight html, but a colleague helped to recreate the functionality of the macro. I switched back to a macro, and it now renders the instructions html on both SP and CMS correctly. Edit: We're on Madrid patch 3.

HTML Template

<div ng-bind-html="data.instructions"></div>

Client Script

function ($scope) {
	var c = this;
	
	// Variable sys_id
	$scope.data.sys_id = $scope.$parent.$parent.field.sys_id;
	c.server.update();
}

Server Script

if (input) {
	var gr = new GlideRecord('item_option_new');
	gr.get(input.sys_id);
	data.instructions = gr.getValue('instructions');
}