Service Portal Custom Glyph

Brian Lancaster · ‎03-02-2020

Is there a way OOB to add your own Glyphs for Service Portal?

Brian Lancaster · ‎03-06-2020

In case anybody else need this. I cloned the Icon Link widget. Uploaded the image into the db_image table. Updates below are the code section I updated. I am supplying the code for each section that was changed.

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"}}]

View solution in original post

sukku · ‎02-23-2021

Hi Brian,

Hope you are doing good!!

Thank you so much for the post inorder to add custom glyphs. Sorry to reopen old post. I have a requirement to display image when we mouse hover on knowledge widget in portal.

I have cloned out of box icon link widget. And i have set the knowledge page properties as top icon. When we mouse hover on knowledge text or glyph in portal it should display other image.

Could you please help me with that.

Thanks and Regards,

Brian Lancaster · ‎02-23-2021

Sorry I pieced this together though other posts. I'm am not the greatest when It comes to this kind of coding. I would recommend posting you own question and make sure you show all your code.

Community Alums · ‎05-17-2023

Hi Brian,
Thanks a lot for sharing the details. I have leveraged the scripts provided by you but I am unable to change the icon of the tile on portal. I am trying to troubleshoot the problem and I would like to know where exactly are we specifying the sys_id/name of the image that we have to use from the db_image table? Do we have to replace name keyword with the name of the image(in db_image table) at the below line of code?

data.target = img.getValue('name');

I do not have much experience of working on portal. So, please pardon me if I am asking something foolish.
Thanks.

Brian Lancaster · ‎05-17-2023

No that code was related to the dropdown the appears in the widget. We had decided not to use that so I'm note I had to redo the widget in my PDI and it appears to not be working in the new versions of ServiceNow. I'm note 100% sure what the issue is.

Community Alums · ‎05-17-2023

Hi Brian,
Actually I followed the same steps listed above but it did not work for me unfortunately and I was scratching my head as I was unable to understand what I was doing wrong. Thank you very much for confirming that it's not working for you as well in the newer version.