Service Portal Custom Glyph

[Brian Lancaster]

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

[User658787]

If you want to use an image and not a font file that stores your glyphs you'll need to use a custom widget.  

[Brian Lancaster]

Can you tell me how I would go about this?  They may not want to do it but I want to try in my PDI so I can learn.  The link that Swadesh mentioned does not seem to have all the info.

[User658787]

Easiest example: 

• Start with the OOB Icon link widget and clone it.
• In the Option schema add this:  ,{"label":"Image Icon","value":"Image Icon"}]},{"displayValue":"Images","name":"image","section":"other","label":"Image","type":"reference","value":"db_image","ed":{"reference":"db_image"}}]
• In the server script add this: var img = new GlideRecord('db_image');
  img.addQuery('sys_id', options.image);
  img.query();
  if (img.next()){
  data.image = img.getValue('name');
• In the CSS add this: 

  /* IMAGE ICON ---------- */

  a.image_icon {
  display: block;
  padding: 10px 0px 10px 60px;
  position: relative;
  }

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

• In the HTML add this below the Circle Icon code:  <!--// 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">
  <img src="{{data.image}}" alt=""/>
  </span>
  <h2>{{::options.title}}</h2>
  <span class="text-muted">{{::options.short_description}}</span>
  <p> </p>
  </a>

Once you have that, upload the image you would like to use to your images table, add the widget to a page, and select your new image to display as your icon. 

[Brian Lancaster]

Ok it does not seem to be working.  Here is the code base on you response above.  Maybe I missed something.

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="" class="image_icon text-" target="">
    <span class="fa">
      <img src="" alt=""/>
    </span>
  </a>
 
<h2></h2>
  

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;
}

/* 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;
}

.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%);
  }
}

a.image_icon {
display: block;
padding: 10px 0px 10px 60px;
position: relative;
}

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

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');
    }
})();

Option 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"}]},{"displayValue":"Images","name":"image","section":"other","label":"Image","type":"reference","value":"db_image","ed":{"reference":"db_image"}}]

[Brian Lancaster]

It was the option schema.  I got it to display and I can select my image but it does not seem to make it show.