Custom Gauge – 101

Custom Gauge – 101

Custom Gauge

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:

  1. UI Scripts
  2. UI Macro
  3. UI Formatter – To show UI Macro on incident form
  4. 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 src="raphael.jsdbx" />
    <script src="justgage.jsdbx" />
    
    <!-- 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>
    </j:jelly>

    Download UI Macro

Step 3:- Create UI Formatter

  • 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:

    Formatter

    UI Formatter

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

    Macro on Incident Form

    Macro on Incident Form

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.

How you like it, let us know by commenting below.

In case of any issue, please mail us contact@inmorphis.com or comment below

No comments

Leave a reply

Your email is never published nor shared. Required fields are marked *

Are you Human? * Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This