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
1 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
Hi,
That's exactly what I needed ... I fixed some issues...
HTML
<div>
<!--// Top Icon -->
<a ng-if="::(options.link_template == 'Glyph Icon' || !options.link_template)" ng-href="{{::data.href}}" class="glyph_icon " target="{{::data.target}}">
<div class="m-b fa fa- fa-4x text-" align="center" style="margin-right: auto; margin-left: auto; display: block;"></div>
<h4 style="text-align: center;">{{::options.title}}</h4>
<span class="text-muted"></span>
<p> </p>
</a>
<!--// Image Icon -->
<a ng-if="::(options.link_template == 'Image Icon')" ng-href="{{::data.href}}" class="image_icon text-" 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"></span></div>
<p> </p>
</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;
}
/* GLYPH ICON ---------- */
a.glyph_icon {
display: block;
padding: 20px;
text-align: center;
}
a.glyph_icon .fa {
display: block;
text-align: center;
}
/* IMAGE ICON ---------- */
a.image_icon {
display: block;
padding: 20px;
text-align: center;
}
a.image_icon .fa {
display: block;
text-align: center;
}
/* 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%);
}
}
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');
}
})();
Fields
Type, HREF / URL, Catalog category, Catalog item, KB topic, KB article, KB category, Page, Title, Short description, Bootstrap color, Bootstrap class name, Glyph
Option schema
[{"name":"link_template","section":"Presentation","label":"Icon","type":"choice","choices":[{"label":"Glyph Icon","value":"Glyph Icon"},{"label":"Image Icon","value":"Image Icon"}]},{"displayValue":"Images","name":"image","section":"other","label":"Image","type":"reference","value":"db_image","ed":{"reference":"db_image"}},{"name":"target","section":"other","label":"target","type":"choice","choices":[{"label":"_new","value":"_new"}]}]
