Introduction

Let me paint you a picture: you’re in an interview, feeling like a coding ninja, and I drop this on you—
“Create a widget that shows all callers and their incident counts in a dropdown. You know, like ‘Sandeep (2)’—because apparently, Sandeep loves calling the helpdesk. Oh, and when you select a caller, it should magically display all their incidents below.”

Sounds simple, right? Until you start wondering if you need a summoning charm from Hogwarts to pull it off. But fear not! In this blog, I’ll show you how to create this masterpiece of ServiceNow wizardry. It’s not just about dropdowns and data—it’s about style, structure, and maybe a little developer humor along the way.

Let’s dive into the nitty-gritty of turning "Sandeep (2)" into a real-time, dynamic, incident-revealing widget that’ll make your inner coder and your future interviewers proud!

Script and Logic

<div>

  <div class="form-group">
    <label>Select Caller: </label>
    <select class="form-control" ng-model="caller" ng-change="getIncidentRecords()">
      <option ng-repeat="caller in data.callers track by $index" value="{{caller.sys_id}}">
        {{caller.name}}
      </option>
    </select>
  </div>

  <div ng-if="data.incident_nums.length>0">
    <h2 class="text-center">
      Incidents Created For This Caller
    </h2>

    <ul class="list-group">
      <li class="list-group-item" ng-repeat="incident in data.incident_nums track by $index">
        {{incident.number}}
      </li>

    </ul>

  </div>
</div>

.list-group {
  transition: all 0.5s ease-in-out;
}

.list-group-item:hover {
  background-color: #27ae60;
  color: white;
}

//Client Script

api.controller = function ($scope) {
  /* widget controller */
  var c = this;

  $scope.caller = null;

  $scope.getIncidentRecords = function () {
    c.data.sys_id = $scope.caller;
    c.server.update();
  };
};

// Server Script
(function () {

  data.incident_nums = [];
  data.callers = [];

  var obj = {};

  var glide = new GlideAggregate("incident");
  glide.groupBy("caller_id");
  glide.addAggregate("Count");
  glide.query();

  var arr = [];
  while (glide.next()) {
    obj = {};
    var caller = glide.getDisplayValue("caller_id");
    var count = glide.getAggregate("Count");
    var caller_sys_id = glide.caller_id.toString();

    var str = caller + "(" + count + ")";
    obj.sys_id = caller_sys_id;
    obj.name = str;
    arr.push(obj);
  }

  data.callers = arr;

  if (input.sys_id) {
    var glides = new GlideRecord("incident");
    glides.addEncodedQuery("caller_id=" + input.sys_id);
    glides.query();

    while (glides.next()) {
      obj = {
        number: glides.number.toString(),
      };
      data.incident_nums.push(obj);
    }
  }
})();

Helpful links

Github Repository