SimpleIconLink.xml

<?xml version="1.0" encoding="UTF-8"?>
<unload unload_date="2022-05-16 13:22:45">
<sp_widget action="INSERT_OR_UPDATE">
<category>standard</category>
<client_script><![CDATA[function($scope, spAriaUtil, $sce) {
	$scope.accessibilityModeEnabled = spAriaUtil.isAccessibilityEnabled();
	
	$scope.showBorderShadow = ($scope.options.border_shadow=='true');
	
	$scope.htmlShortDescription =  $sce.trustAsHtml($scope.options.short_description);
}]]></client_script>
<controller_as>c</controller_as>
<css>div.iconlink {
  border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
 	border-bottom: 1px solid #ddd;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px; 
}

.simple-icon-link-with-border {
  margin-bottom: 25px;
  height: 240px;
  div.panel.body {
	  
	}
}

div.shadow {
   box-shadow: 0 6px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

div.iconlink:hover {
	border-color: #428bca;
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

div.panel-footer {
  	text-align: center;
    position: absolute;
  	bottom: 26px;
   	width: 91.5%;
}

div.panel-footer:hover {
  background-color: #f5f5f5;  
}

.iconlink a label,h2 {
  display: block;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.1;
  padding: 0;
  margin: 0 0 5px 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;
  
  &amp;:hover {
    color: darken($brand-primary, 20%);
  }
}

.text-info {
  color: $brand-info;
  
  &amp;:hover {
    color: darken($brand-info, 20%);
  }
}

.text-success {
  color: $brand-success;
  
  &amp;:hover {
    color: darken($brand-success, 20%);
  }
}

.text-warning {
  color: $brand-warning;
  
  &amp;:hover {
    color: darken($brand-warning, 20%);
  }
}

.text-danger {
  color: $brand-danger;
  
  &amp;:hover {
    color: darken($brand-danger, 20%);
  }
}

.text-default {
  color: $brand-primary;
  
  &amp;: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.circle_icon &gt; h2 { 
  height:55px;
}

div.panel-body &gt; a.circle_icon {
  padding-bottom: 0px;
}

@media screen and (max-width: 600px) {
  div.panel-footer {
    bottom: 0px;
  }
}

@media screen and (min-width: 601px) {
  div.panel-footer {
    bottom: 26px;
  }
}

</css>
<data_table>sp_instance_link</data_table>
<demo_data/>
<description/>
<docs display_value=""/>
<field_list>type,url,sc_category,sc_cat_item,kb_topic,kb_article,kb_category,sp_page,title,short_description,color,class_name,glyph</field_list>
<has_preview>true</has_preview>
<id>simple-icon-link-with-border</id>
<internal>false</internal>
<link><![CDATA[function link(scope, element, attrs, controller) {  }]]></link>
<name>Simple Icon Link with border</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"}]},{"name":"footer_text","section":"Behavior","default_value":"Learn More &gt;","label":"Footer text","type":"string"},{"name":"border_shadow","section":"Presentation","default_value":"true","label":"Border shadow","type":"boolean"},{"name":"table_name","section":"Data","label":"Table name","type":"string"},{"name":"table_filter","section":"Data","label":"Table Filter","type":"string"},{"hint":"Name of field to contain sys_id of current record (e.g. parent)","name":"query_parm_field","section":"Behavior","label":"Query Parm Field","type":"string"},{"hint":"Include &lt;query field&gt; = sysid  when counting","name":"include_query_field_in_count","section":"Data","default_value":"false","label":"Include Query Field In Count","type":"boolean"},{"name":"hide_if_zero","section":"Presentation","default_value":"true","label":"Hide if zero","type":"boolean"},{"name":"link_for_unauthorised_user","section":"Data","label":"Link for Unauthorised User","type":"string"},{"hint":"Provide full qualified path from ?","name":"link_for_unauthorised_user","section":"Data","label":"Link for Unauthorised User","type":"string"}]</option_schema>
<public>true</public>
<roles/>
<script><![CDATA[(function(){
	var gr = $sp.getInstanceRecord();
	if(gs.isLoggedIn()){
		data.href = $sp.getMenuHREF(gr);
	}else{
		data.href = options.link_for_unauthorised_user ||  $sp.getMenuHREF(gr);
	}
	data.target = options.target || "";
	data.queryField = options.query_parm_field || '';
	data.sysparmQuery = '';
	data.recordSysID = $sp.getParameter('sys_id') || '';
	data.showWidget = true;
	
	data.record_count = 0;
	if (options.table_name) {
		var rec = new GlideRecord(options.table_name);
		rec.addEncodedQuery(options.table_filter || 'true');
		if (data.queryField && options.include_query_field_in_count == 'true') {
			rec.addEncodedQuery('sys_id='+data.recordSysID);
		}
		//console.log('count for '+options.table_name+' query=' + rec.getEncodedQuery());
		rec.query();
		data.record_count = rec.getRowCount();
	}
	
	if (data.queryField) {
		data.recordSysID = $sp.getParameter('sys_id') || '';
		if (data.recordSysID) {
			data.sysparmQuery='&sysparm_query='+data.queryField+'='+data.recordSysID;
			data.href += data.sysparmQuery;
		}
	}
	
	if (data.record_count == 0 && options.hide_if_zero == 'true') data.showWidget = false;
})();]]></script>
<servicenow>false</servicenow>
<sys_class_name>sp_widget</sys_class_name>
<sys_created_by>atiyeh.tash@solvera.ca</sys_created_by>
<sys_created_on>2019-04-11 19:15:05</sys_created_on>
<sys_id>24ec7a38db78b3409f49d90d68961919</sys_id>
<sys_mod_count>169</sys_mod_count>
<sys_name>Simple Icon Link with border</sys_name>
<sys_package display_value="Global" source="global">global</sys_package>
<sys_policy/>
<sys_scope display_value="Global">global</sys_scope>
<sys_update_name>sp_widget_24ec7a38db78b3409f49d90d68961919</sys_update_name>
<sys_updated_by>admin</sys_updated_by>
<sys_updated_on>2022-05-16 13:18:20</sys_updated_on>
<template><![CDATA[<div class="iconlink simple-icon-link-with-border"  ng-class="{'shadow' : showBorderShadow}">
  <!--  ng-class="{'high-contrast': accessibilityModeEnabled}" -->
  <!--// Top Icon -->
  <div class="panel-body">
  <a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)"  class="top_icon {{::options.class_name}}" ng-href="{{::data.href}}" 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" ng-bind-html="htmlShortDescription"></span><br>
    <span ng-if="c.data.record_count > 0 " class="text-muted text-danger item-count" >You have {{::c.data.record_count}} item(s) to complete </span>
  </a>

  <!--// Circle Icon -->
  <a ng-if="::(options.link_template == 'Circle Icon')"  class="circle_icon {{::options.class_name}} text-{{::options.color}}" ng-href="{{::data.href}}" 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" ng-bind-html="htmlShortDescription"></span><br> 
    <span ng-if="c.data.record_count > 0 " class="text-muted text-danger item-count" >You have {{::c.data.record_count}} item(s) to complete </span>
  </a>

  <!--// Color Box -->
  <a ng-if="::(options.link_template == 'Color Box')" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" ng-href="{{::data.href}}" target="{{::data.target}}">
    <div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
    <h2>{{::options.title}}</h2>
    <span class="text-muted" ng-bind-html="htmlShortDescription"></span><br>
    <span ng-if="c.data.record_count > 0 " class="text-muted text-danger item-count" >You have {{::c.data.record_count}} item(s) to complete </span>
  </a>

  </div>

<div aria-hidden="true" class="panel-footer">
	<a aria-hidden="true" ng-href="{{::data.href}}" target="{{::data.target}}">{{::options.footer_text}}</a>
	
	</div>
  </div>]]></template>
</sp_widget>
</unload>