How can I add more icons to the glyph library

Annmol Perayil · ‎09-08-2020

Hi there

I want to add company specific icons into the glyph list in ServiceNow. How can I do this please?

kashyap5 · ‎09-12-2020

Step1: You have to upload the image to image to the table "db_image"
Step2: Clone the widget Icon Link
Step3: Use the below Html code and Server Side code

HTML:

<div>

<a ng-if="::(options.link_template == 'Glyph Icon' || !options.link_template)" ng-href="{{::data.href}}" class="glyph_icon {{::options.class_name}}" target="{{::data.target}}">
<div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}" align="center" style="margin-right: auto; margin-left: auto; display: block;"></div>
<h4 style="text-align: center;">{{::options.title}}</h4>
<span class="text-muted">{{::options.short_description}}</span>
<p> </p>

</a>

<a ng-if="::(options.link_template == 'Image Icon')" ng-href="{{::data.href}}" class="image_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
<div><img src="{{data.image}}" alt="" align="center" style="margin-right: auto; margin-left: auto; display: block;"/>
<h4 style="text-align: center;">{{::options.title}}</h4>
<span class="text-muted">{{::options.short_description}}</span></div>
<p> </p>
</a>

Server Script:

(function(){

var gr = $sp.getInstanceRecord();

data.href = $sp.getMenuHREF(gr);

data.target = options.target || "";

var img = new GlideRecord('db_image');

img.addQuery('sys_id', options.image);

img.query()

if (img.next()){

data.image = img.getValue('name')

}

})();

Please mark as Correct Answer/Helpful, if applicable.
Thanks!
Kashyap

View solution in original post

Annmol Perayil · ‎09-17-2020

Hi Irfan

I added images instead of Glyphs. Would that be ok for you? You can save the glyphs as images in db_image table and then follow the above steps. Please let me know if you get stuck somewhere.

shaik_irfan · ‎09-17-2020

Yes, i added a image to db_image table

Then i added the code as above but i dont see it

Can you please see if i have done anything wrong ?

Annmol Perayil · ‎09-17-2020

1. Under Widget options, link_template, add an additional choice 'Image Icon'

2. Create an additional widget option to gather the sys id of the image as a string

3. Open the instance options of the widget, remove selected glyph, select Image Icon as choice for link_template and input the sys_id of the image you wish to add in the image option

Annmol Perayil · ‎09-17-2020

where is the widget on your portal?

shaik_irfan · ‎09-17-2020

I didnt created that yet, you can add an icon link on the sp home page itself