Add Custom Image in the Icon link widget instead glyphicon icon

[salu]

Hello,

Can some one please help me on this..I need to add a custom image in the Icon link of the Service Portal.How can I add it?

Thanks

Saranya

[larstange · Accepted solution]

Hi

you will have to clone the widget and make your own version - the widget is only coded to show the glyph as an image

[Anas Ali]

my requirements are much similar but client want this without cloning the widget is there any other option to create same widget as OOTB icon link widget .?

[ryanramos]

You can try this.

This will allow you to choose glyph or image on single widget. You have to upload the image to image (table:db_image) first though.

HTML:

<div>
  <!--// Top Icon -->
  <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>

  <!--// 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}}">
      <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>

</div>

Server Script:

(function(){

var gr = $sp.getInstanceRecord();

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

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

//data.image = "/" + options.image

  var img = new GlideRecord('db_image');

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

img.query()

if (img.next()){

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

}

})();

Option Schema

Icon | link_template | choice | Glyph Icon, Image Icon

Image | image | reference | images

target | target | choice | _new

[scottjus82]

Trying to do exactly this but I cant get the above script to work. Noob question, where do i put the Option Schema?

Justin