In this Custom Gauge — 101 series, we will learn "How to make custom Gauge". After creating we will place that gauge on our incident form and bind it with an integer field so that, gauge value can change dynamically.
Impressive UI — Custom Gauge
To start this, we will need:
- UI Scripts
- UI Macro
- UI Formatter — To show UI Macro on incident form
- Create a Field name "u_visitors" of type "Integer" on incident table.
Steps:
Before starting our process, lets have a story-line for this example. We have a field on incident table and we want to show a percentage indicator(off-course UI indicator). So, let's start.
Step 1:- Adding justgage and raphael in SN
- Create UI Scripts for justgage.js as well as raphael.js
- You can copy script code from above CDN links or copy code from github repository
- If ServiceNow throws error while trying to save script files than save a blank script and use the list edit to save the script content.Download UI Scripts
Step 2:- Creating UI Macro
Now, it's time to create magical UI Macro that will perform magic for us.
- Create new UI Macro and name it as "visitors"
- Add the following code into UI Macro
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<!-- Add a div containing gauge div -->
<div class="col-md-4 col-md-offset-4">
<strong>Visitor's %age</strong>
<div id="gauge" class="200x160px"></div>
</div>
<!-- Added library files -->
<script>
<script>
<!-- Set a variable to hold already saved value of our field -->
<g2:set_if var="jvar_percent" test="$[current.u_visitors!='']" true="$[current.u_visitors]" false="0" />
<script>
// function that will return correct id of provided id as id may contain . or any other escape character
function jq(myid) {
return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );
}
//Call justgage Object to create a gauge
//In value parameter, map the variable that we have already set in jelly
var g = new JustGage({
id: "gauge",
value: $[jvar_percent],
min: 0,
max: 100,
title: "Visitors",
gaugeWidthScale: 0.6,
counter: true,
formatNumber: true,
relativeGaugeSize: true
});
//Code to call once DOM is loaded
$j(document).ready(function(){
$j(jq("incident.u_visitors")).change(function() {
if($j(this).val() > 100 || $j(this).val() ${AMP}lt; 0)
{
alert("Can't input more than 100 or less than 0");
g_form.setValue("u_visitors","");
}
else{
g.refresh(g_form.getValue("u_visitors"));
}
});
});
</script>
- Create a UI Formatter for above created UI Macro. Take help from here
- Name this Formatter as "visitors macro" and fill the entries like below:
Step 4:- Modify Incident Form
- Modify incident table and create new field "u_visitors" of "Integer" data type.
- Modify form layout and bring "visitors macro" formatter on form like below
And, we are done. It was easy, RIGHT?
IF you don't want to create yourself, no problem, we have already done it for you. Just Download UpdateSet from our github repository. You can also fork our public repository.
To read more such interesting posts. Click here
----
visit www.inMorphis.com/blogs/ for more
