Custom Glyph for tiles on Service Portal

[Community Alums]

Dear All,

I am trying to add custom Glyphs for tiles on the Service Portal homepage but I could not find any OOB way to do so. I followed this wonderful link to add custom glyphs on the portal but this solution is not working in Tokyo release for some reason:

https://www.servicenow.com/community/developer-forum/service-portal-custom-glyph/m-p/1769907/thread-...

Would appreciate any help on this.

Thanks & Regards,
Gulzar Manuja

[Shashi Yadav1]

Hi Gulzar,

Can you please provide some screenshots for better understanding.

Thanks,

Shashi

[Community Alums]

Hi Shashi,
Thanks for your response. This is the code I have used after cloning the widget:

HTML:

<div class="iconlink" ng-class="{'high-contrast': accessibilityModeEnabled}">
  <!--// Top Icon -->
  <a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}">
    <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
    <h2>{{::options.title}}</h2>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>

  <!--// Circle Icon -->
  <a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
    <span class="fa fa-stack fa-2x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
    </span>
    <h2>{{::options.title}}</h2>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>
 
  <!--// Image Icon -->
  <a ng-if="::(options.link_template == 'Image Icon')" ng-href="{{::data.href}}" class="image_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
       <span class="fa fa-stack fa-2x">
         <img  src="{{data.target}}" alt=""/>
        </span>
       <h2>{{::options.title}}</h2>
       <span class="text-muted">{{::options.short_description}}</span>
   </a>
 

  <!--// Color Box -->
  <a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">
    <div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
    <h2>{{::options.title}}</h2>
    <span>{{::options.short_description}}</span>
  </a>
</div>

CSS:

.iconlink a label,h2 {
  display: block;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.1;
  padding: 0;
  margin: 0 0 10px 0;
}

/* TOP ICON ---------- */

a.top_icon {
  display: block;
  padding: 20px;
  text-align: center;
}

a.top_icon .fa {
  display: block;
  text-align: center;
}

/* CIRCLE ICON ---------- */

a.circle_icon {
  display: block;
  padding: 20px 0px 20px 70px;
  position: relative;
}

a.circle_icon .fa {
  position:absolute;
  left: 0px;
  top: 10px;
}

/* Image Circle ------- */
a.image_icon {
  display: block;
  padding: 20px 0px 20px 70px;
  position: relative;
}

a.image_icon .fa {
  position:absolute;
  left: 0px;
  top: 10px;
}

/* COLOR BOX ---------- */

a.color_box {
  display: block;
  position: relative;
  padding: 20px 20px 20px 82px;
  border-radius: 4px;
  margin-bottom: 20px;
}

a.color_box .fa {
  position:absolute;
  left: 20px;
  top: 20px;
  width:42px;
  text-align: center;
}



.icon-link-background-primary {
  background-color: $brand-primary;
  opacity: 0.1
}

.icon-link-background-info {
  background-color: $brand-info;
}

.icon-link-background-success {
  background-color: $brand-success;
}

.icon-link-background-warning {
  background-color: $brand-warning;
}

.icon-link-background-danger {
  background-color: $brand-danger;
}

.icon-link-background-default {
  background-color: $brand-primary;
}

.text-primary {
  color: $brand-primary;
  
  &:hover {
    color: darken($brand-primary, 20%);
  }
}

.text-info {
  color: $brand-info;
  
  &:hover {
    color: darken($brand-info, 20%);
  }
}

.text-success {
  color: $brand-success;
  
  &:hover {
    color: darken($brand-success, 20%);
  }
}

.text-warning {
  color: $brand-warning;
  
  &:hover {
    color: darken($brand-warning, 20%);
  }
}

.text-danger {
  color: $brand-danger;
  
  &:hover {
    color: darken($brand-danger, 20%);
  }
}

.text-default {
  color: $brand-primary;
  
  &:hover {
    color: darken($brand-primary, 20%);
  }
}

.high-contrast {
  .text-primary {
    color: darken($brand-primary, 10%);
  }

  .text-info {
    color: darken($brand-info, 10%);
  }

  .text-success {
    color: darken($brand-success, 10%);
  }

  .text-warning {
    color: darken($brand-warning, 10%);
  }

  .text-danger {
    color: darken($brand-danger, 10%);
  }

  .text-default {
    color: darken($brand-primary, 10%);
  }
}

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.target = img.getValue('name');
   }
})();

Options Schema:

[{"name":"link_template","section":"Presentation","label":"Template","type":"choice","choices":[{"label":"Top Icon","value":"Top Icon"},{"label":"Circle Icon","value":"Circle Icon"},{"label":"Color Box","value":"Color Box"},{"label":"Image Icon","value":"Image Icon"}]},{"name":"image","section":"other","label":"Image","type":"reference","value":"db_image","ed":{"reference":"db_image"}}]

And this is the screenshot of the instance options of the widget. Even after making all these changes, blank icon appears against the tile. 

Thanks. 

[Community Alums]

@Shashi Yadav1 : Any luck?

[Shashi Yadav1]

Hi Gulzar,

In Server Script we are fetching options.target and options.image, which is not defined in the options schema. Because of it, HTML conditions were not getting true.

Please update the required details in options schema.