The CreatorCon Call for Content is officially open! Get started here.

Icons for g_form.addDecoration() Method

Jim Coyne
Kilo Patron

Theres' a nice new method in Fuji for adding field decorations - GlideForm (g form) - ServiceNow Wiki.   I was just wondering if anyone knew of a way to add our own custom icons to the list of available ones:

ServiceNow.png

I was thinking of replacing the OOB VIP highlighting method with this "safer" method so I wanted to add a B/W version of the VIP icon to this list.

Thanks

1 ACCEPTED SOLUTION

Shahed Shah1
Tera Guru

Hi Jim



Unfortunately, the new UI that was introduced in Fuji is a lot more restricted than what we were used to in the pre-Eureka releases.



What I can advise you is that the symbols are based on Web Fonts (in this case retina_icons) and the styling is managed in the internal CSS. So you are restricted to the available character set by using the icon-name format for the class name:


<i class="icon-name"></i>



Example icons are:


icon-cart


icon-catalog


icon-edit



To get a good idea on the available icons you can inspect retina_icons.css:


https://instancename.service-now.com/styles/retina_icons/retina_icons.css



or you can look at a "preview" page for the icon by navigating to:


https://instancename.service-now.com/styles/retina_icons/retina_icons.html



Beyond that, from the top of my head, I can only think of uploading your own images and use a UI Script to look for your made up classes (e.g. my-icon-vip) that would replace them with the uploaded image and/or play with the styling of the field_contributions class for more control over the retina_icons. Of course this is not using a "safe" route and would be your own customisation.



Hope that helps


Shahid


View solution in original post

7 REPLIES 7

Shahed Shah1
Tera Guru

Hi Jim



Unfortunately, the new UI that was introduced in Fuji is a lot more restricted than what we were used to in the pre-Eureka releases.



What I can advise you is that the symbols are based on Web Fonts (in this case retina_icons) and the styling is managed in the internal CSS. So you are restricted to the available character set by using the icon-name format for the class name:


<i class="icon-name"></i>



Example icons are:


icon-cart


icon-catalog


icon-edit



To get a good idea on the available icons you can inspect retina_icons.css:


https://instancename.service-now.com/styles/retina_icons/retina_icons.css



or you can look at a "preview" page for the icon by navigating to:


https://instancename.service-now.com/styles/retina_icons/retina_icons.html



Beyond that, from the top of my head, I can only think of uploading your own images and use a UI Script to look for your made up classes (e.g. my-icon-vip) that would replace them with the uploaded image and/or play with the styling of the field_contributions class for more control over the retina_icons. Of course this is not using a "safe" route and would be your own customisation.



Hope that helps


Shahid


Thanks for the info


Thanks for the links to the icons Shahid!



I noticed the internal CSS also includes the glyphicons-halflings web font. Do you know if there's a preview page for the glyphicons, which appear nearly as numerous as the retina icon set?


Hey Jim



I don't see a render page for it in the platform... yet.



But you can get a preview from http://glyphicons.com/