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.

[jnovack]

I went with col-xs-12 to make sure that instructions spanned the entire width of the page/container.

       <div class="help-block text-muted col-xs-12">   

[Ant1]

Thank you for posting this!   We were desperately looking for a way to display HTML in both the Portal View and the CMS view of our catalog items!   This worked like a charm!

[Binh Truong2]

This works fantastic! Thanks

[VaranAwesomenow]

You need to get a little creative to make it work.

1. On the platform UI  UI macro works.. so use that to show the html text

2. On the service portal macros wont render but instructions field on the catalog variable will work so use that.

Basically a variable of type - Macro with Label which has the macro and instructions on it will work perfectly in both platform UI and service portal.

 screenshot for service portal

screenshot from platform UI

Variable screenshots

macro screenshot