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

Swadesh Saraf2 · ‎03-02-2020

Found a link where some people achieved it by creating a custom HTML widget:

https://community.servicenow.com/community?id=community_question&sys_id=7d040be5dbd8dbc01dcaf3231f96...

And it is something where you have commented on earlier. It is a small world 🙂

Brian Lancaster · ‎03-02-2020

Yes I forgot about that. However nobody wants to create a custom widget so I guess there is no way to upload your own glyphs to where ServiceNow has the stored.

Harsh Vardhan · ‎03-02-2020

i dont think you will able to see those glyphs file, those are coming from bootstrap . which we cant see.

but you can add custom glyphs on your widget using css , just access the bootstrap class.

https://getbootstrap.com/docs/3.3/components/

Brian Lancaster · ‎03-02-2020

I'm not sure where in your link I can see an example of using my own image.