Using different icons for UI Macros / FUJI

[EthanVanDoorne]

How do we change the icons used on the macros? They are all defaulted with the icon-tree-right since the upgrade.

[EthanVanDoorne]

bump? anybody?

[chrisw4]

Hopefully you've found an answer by now, but you can find a contact sheet of the new icons and their CSS class names at this url: https://INSTANCENAME.service-now.com/styles/retina_icons/retina_icons.html

Details on the new icons here: Icons for g_form.addDecoration() Method

Example UI macro below. To change the icon, you'd change "icon-tree-right" to the desired icon's corresponding class listed in the contact sheet.

<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-tree-right btn btn-default btn-ref"   

               ></span>   

       </a>   

Hope this helps!

[kungfuu72]

I believe this post answers the question, as I have updated my icon, though using a custom icon may be a different question in itself.

There is one issue that I'd like to address that the code is like hard-coding an icon link that is always visible no matter if the corresponding field has a value or not.

This is different behavior than what is desired with the <g:reference_decoration> jelly tag in that this tag shows/hides the icon link based on if there is a value in the corresponding reference field or not. The problem is that using this tag seems to only give you the default span back:

<span class="btn btn-default btn-ref icon-tree-right" title="" alt="Alt text here" data-original-title="Alt text here"></span>

just inspecting and changing the class value to btn btn-default btn-ref [icon-name-here] does in fact change the icon to whatever icon you specify according to the retina_icons preview.

Does anyone have a solution to that?

[brnunn]

Hi Daniel,

Luckily for us, Mark Stranger from SNGuru has updated his existing article on UI Macros with a solution for this Fuji issue. I wish I knew how Mark figured this stuff out, but for now I can just say THANK YOU. I get by pretty well on most things but I'm generally struggle with Jelly. I didn't realize we could have an onchange call in a ui macro like below.

First, here is the link to the original article: Open Google Map from a Location Record - ServiceNow Guru

I've modified Mark's reference to a location field and it's elements to just check to see if there is a valid reference value, so this could work on any reference field - the below code can be added at the start of your "<script>":

needsRefresh = false;

          function onChange_show_img(element, original, changed, loading) {

                var s = '${ref}'.split('.');

                var referenceField = s[1];

                if (needsRefresh == false) {

                      needsRefresh = true;

                      return;

                }

                if (changed.length == 0) {

                      $('${jvar_n}').hide();

                      return;

                }

                var locRec = g_form.getReference(referenceField, userReturn);

          }

          function userReturn(locRec) {

                var e = $('${jvar_n}');

                if (e)

                      e.show();

                else

                      e.hide();

          }

          var l = new GlideEventHandler('onChange_show_img', onChange_show_img, '${ref}');

          g_event_handlers.push(l);