Reference Decorations and New Fuji Icons

[Dan Alexander1]

Hi Folks,

We're scheduled to move our instance to Fuji in November, and in our current development to identify bugs and issues with the upgrade, I've come across an issue with Reference Decorations and UI Macros.

In Dublin (Current) - we were using code like the following:

<g:reference_decoration id="${jvar_n}" field="${ref}"
   onclick="showRelatedList('${ref}'); "
   title="${gs.getMessage('Show related incidents')}" image="images/icons/tasks.gifx"/>

In Fuji - we've learned there is a new button class/library for icons - and found some revised code online, swapping out reference_decoration for an 'a' tag.

<a>
<span
   id="${jvar_n}"
   onclick="showRelatedList('${ref}')"
   name="${jvar_n}"
   aria-label="${HTML:gs.getMessage('Show related incidents')}"
   title="${gs.getMessage('Show related incidents')}"
   alt="${gs.getMessage('Show related incidents')}"
   class="icon ref-button icon-add btn btn-default btn-ref">
</span>
</a>

While this works, we've noticed the functionality is different. For example, since the move to the 'a' tag, the icon is ALWAYS visible. Even if no value is filled out in that reference field. So my question is, in Fuji -- is reference_decoration no longer supported? If it IS supported still, how do you leverage the new icon classes? If it IS NOT supported - how do we re-add the functionality back to only show visible when a value is set.

Thanks all!

Dan
Harvard University

[Masha · Accepted solution]

Yes. It is supported. All of the OOTB ui macros will function as before. There is a piece of javascript that toggles the icon. Look for 'show_related_records' or task_show_ci_map UI Macros for doctype in a Fuji instance and they will give you an example of how that functionality is leveraged.

[Dan Alexander1]

Thanks! I see these example and see that the visibility tag is now used with IF statements to check on if the field has a value. I'll go this route, but find it odd the code did not require it previously with g:reference_decoration

[Dan Alexander1]

Coming full circle on this one.. I made some minor adjustments to get everything working smoothly now:

Edited UI Macro 'reference_decoration'

Where CLASS was being defined in <span>, replaced with class="${jvar_class}

Now in Each UI Macro where I was calling reference_decoration, I simply now pass through a class field to define the ICON. This allows me to define the icon for each seperate use case of g:reference_decoration (we use it in 4 or 5 different spots).

<g:reference_decoration id="${jvar_n}" field="${ref}"
   onclick="showRelatedList('${ref}'); "
   title="${gs.getMessage('Show related incidents')}" class="btn btn-default btn-ref icon-article-document"/>

For reference, all available icons can be seen using: https://<YOURINSTANCE>.service-now.com/styles/retina_icons/retina_icons.html

Thanks!
-Dan

[kungfuu72]

Hey Dan,

I'm not understanding where you are using this $jvar_class

I've tried the following:

<j:set var="jvar_class" value="btn btn-default btn-ref icon-collaboration"/>

<g:reference_decoration id="${jvar_n}" field="${ref}"
onclick="invoke('${ref}');"
title="Alt text." class="${jvar_class}"/>

which did not work.

And separately:

<g:reference_decoration id="${jvar_n}" field="${ref}"
onclick="invoke('${ref}');"
title="Alt text." class="btn btn-default btn-ref icon-collaboration"/>

But my icon won't change as you mentioned, the class needed is defined in the span. Each time I tried the above, the <a> tags get a class attribute of class="reference_decoration"

any ideas?