Create Custom Widget

[mahi6]

I want to create one custom Widget that show Incident count based selected filed.

I have tried below. But not getting any output.

Client Script :

api.controller=function() {

  var c = this;

  var assignmentGroupQuery = 'sysparm_clear_stack=true';

alert('This is assignmentGroupQuery'+assignmentGroupQuery);

 // var assignmentGroupUrl = '/api/now/table/sys_user_group?' + assignmentGroupQuery;

var assignmentGroupUrl ='/api/now/table/sys_user_group/019ad92ec7230010393d265c95c260dd'

alert('This is assignmentGroupUrl'+assignmentGroupUrl);

  c.server.get(assignmentGroupUrl).then(function(response) {

    c.data.assignmentGroups = response.data.result;

  });

c.data.selectedAssignmentGroup=[];

c.getIncidentCounts = function() {

    var selectedGroupId = c.data.selectedAssignmentGroup;

console.log('This is '+selectedGroupId);

    if (!selectedGroupId) {

      return;

    }

    var incidentCountQuery = 'sysparm_query=active=true^assignment_group=' + selectedGroupId + '^sysparm_count=true';

    var incidentCountUrl = '/api/now/table/incident?' + incidentCountQuery;

    c.server.get(incidentCountUrl).then(function(response) {

      var counts = response.data.result[0];

      c.data.incidentCounts = {

        active: counts.active || 0,

        closed: counts.closed || 0,

        resolved: counts.resolved || 0

      };

    });

  };

}

Html :

<div>
<h3>Incident Count by Assignment Group</h3>
<label for="assignmentGroupSelect">Select Assignment Group:</label>
<select id="assignmentGroupSelect" ng-model="selectedAssignmentGroup" ng-change="getIncidentCounts()">
<option ng-repeat="group in assignmentGroups" value="{{ group.sys_id }}">{{ group.name }}</option>
</select>

<ul>
<li>Active: {{ incidentCounts.active || 0 }}</li>
<li>Closed: {{ incidentCounts.closed || 0 }}</li>
<li>Resolved: {{ incidentCounts.resolved || 0 }}</li>
</ul>
</div>

Can you please tell me how to achieve this.

[Marco0o1 · Accepted solution]

Hi @mahi6 ,

I made the changes to get the list of all groups and get the data selecting each one and put a default group from the url. This is the code:

HTML 

<div>
<h3>Incident Count by Assignment Group</h3>
<label for="assignmentGroupSelect">Select Assignment Group:</label>
  

 <select ng-change="c.getIncidentCounts(c.selectedGroup)" id="groups" ng-value="c.defaultgroupURL" name="groups" class="form-control"
          ng-model="c.selectedGroup"
          ng-options="group.name for group in c.data.groupList">
   <option value="">{{c.data.defaultData.name}}</option>
  </select>
  
<ul>
<li>Active: {{ c.incidentCounts.active }}</li>
<li>Closed: {{ c.incidentCounts.closed }}</li>
<li>Resolved: {{ c.incidentCounts.resolved }}</li>
</ul>
</div>
 

Client Script

api.controller=function() {
  var c = this;
 c.incidentCounts = {
	 "active" : 0,
	 "closed" : 0,
	 "resolved" : 0,
 }
	
  

c.getIncidentCounts = function(group) {
    
	var groupID = "";
if(!group){
	groupID = c.data.defaultData.sys_id;
} else {
	groupID = group.sys_id
}
 
 c.server.get({
				'group_id': groupID,
				'action': "getGroupInfo"
			}).then(function(response){
	 if(response.data.incidentInfo){
		 c.incidentCounts = response.data.incidentInfo;
		 console.log("Received data");
	 }
 }
 

  )	
}
	
	c.getIncidentCounts(c.data.defaultData);
	
	
}

Server Script 

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */

	if(!input){
		var assignmentGroupQuery = 'sysparm_clear_stack=true';
		// var assignmentGroupUrl = '/api/now/table/sys_user_group?' + assignmentGroupQuery;
		 var assignmentGroupUrl ='/api/now/table/sys_user_group/36c741fa731313005754660c4cf6a70d' // This dpend on your instance
 
		var defaultgroupID = "36c741fa731313005754660c4cf6a70d" // This is a default group from my group list you will get from the url


		data.defaultData = {};


		data.groupList = [];
		var groupGR = new GlideRecord("sys_user_group");
		groupGR.addActiveQuery();
		groupGR.addEncodedQuery(assignmentGroupQuery);
		groupGR.query();
		while(groupGR.next()){
			data.groupList.push({
				"name": groupGR.getValue("name"),
				"sys_id": groupGR.getUniqueValue(),
			});

			if(defaultgroupID == groupGR.getUniqueValue()){
				data.defaultData = {
					"name": groupGR.getValue("name"),
					"sys_id": groupGR.getUniqueValue(),

				}
			}
		}

	}

	if(input && input.action == "getGroupInfo"){
		var groupId = input.group_id;
		data.incidentInfo = {}

		var active = 0;
		var closed = 0;
		var resolved = 0;
		var incidentInfo = new GlideRecord("incident");
		incidentInfo.addQuery("assignment_group",groupId);
		incidentInfo.query();

		while(incidentInfo.next()){
			/*
			Active is State = "New | 1", "In Progress | 2", "On Hold | 3 "
			Closed is State = "Closed | 7"
			Resolved is State = "Resolved |6"
			*/
			var incidentState = incidentInfo.getDisplayValue("state");
			if(incidentState == "New" || incidentState == "In Progress" || incidentState == "On Hold"){
				active++
			} else if(incidentState == "Closed"){
				closed++
			} else if(incidentState == "Resolved"){
				resolved++
			}
		}
		data.incidentInfo = {
			"active" : active,
			"closed" : closed,
			"resolved" : resolved
		}

	}


})();

And this is how it looks for me 

You just need to modify to get in the server Script the part to get the group_id from the default url.

Hope that help you

[Marco0o1 · Accepted solution]

Hi @mahi6 ,

I made the changes to get the list of all groups and get the data selecting each one and put a default group from the url. This is the code:

HTML 

<div>
<h3>Incident Count by Assignment Group</h3>
<label for="assignmentGroupSelect">Select Assignment Group:</label>
  

 <select ng-change="c.getIncidentCounts(c.selectedGroup)" id="groups" ng-value="c.defaultgroupURL" name="groups" class="form-control"
          ng-model="c.selectedGroup"
          ng-options="group.name for group in c.data.groupList">
   <option value="">{{c.data.defaultData.name}}</option>
  </select>
  
<ul>
<li>Active: {{ c.incidentCounts.active }}</li>
<li>Closed: {{ c.incidentCounts.closed }}</li>
<li>Resolved: {{ c.incidentCounts.resolved }}</li>
</ul>
</div>
 

Client Script

api.controller=function() {
  var c = this;
 c.incidentCounts = {
	 "active" : 0,
	 "closed" : 0,
	 "resolved" : 0,
 }
	
  

c.getIncidentCounts = function(group) {
    
	var groupID = "";
if(!group){
	groupID = c.data.defaultData.sys_id;
} else {
	groupID = group.sys_id
}
 
 c.server.get({
				'group_id': groupID,
				'action': "getGroupInfo"
			}).then(function(response){
	 if(response.data.incidentInfo){
		 c.incidentCounts = response.data.incidentInfo;
		 console.log("Received data");
	 }
 }
 

  )	
}
	
	c.getIncidentCounts(c.data.defaultData);
	
	
}

Server Script 

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */

	if(!input){
		var assignmentGroupQuery = 'sysparm_clear_stack=true';
		// var assignmentGroupUrl = '/api/now/table/sys_user_group?' + assignmentGroupQuery;
		 var assignmentGroupUrl ='/api/now/table/sys_user_group/36c741fa731313005754660c4cf6a70d' // This dpend on your instance
 
		var defaultgroupID = "36c741fa731313005754660c4cf6a70d" // This is a default group from my group list you will get from the url


		data.defaultData = {};


		data.groupList = [];
		var groupGR = new GlideRecord("sys_user_group");
		groupGR.addActiveQuery();
		groupGR.addEncodedQuery(assignmentGroupQuery);
		groupGR.query();
		while(groupGR.next()){
			data.groupList.push({
				"name": groupGR.getValue("name"),
				"sys_id": groupGR.getUniqueValue(),
			});

			if(defaultgroupID == groupGR.getUniqueValue()){
				data.defaultData = {
					"name": groupGR.getValue("name"),
					"sys_id": groupGR.getUniqueValue(),

				}
			}
		}

	}

	if(input && input.action == "getGroupInfo"){
		var groupId = input.group_id;
		data.incidentInfo = {}

		var active = 0;
		var closed = 0;
		var resolved = 0;
		var incidentInfo = new GlideRecord("incident");
		incidentInfo.addQuery("assignment_group",groupId);
		incidentInfo.query();

		while(incidentInfo.next()){
			/*
			Active is State = "New | 1", "In Progress | 2", "On Hold | 3 "
			Closed is State = "Closed | 7"
			Resolved is State = "Resolved |6"
			*/
			var incidentState = incidentInfo.getDisplayValue("state");
			if(incidentState == "New" || incidentState == "In Progress" || incidentState == "On Hold"){
				active++
			} else if(incidentState == "Closed"){
				closed++
			} else if(incidentState == "Resolved"){
				resolved++
			}
		}
		data.incidentInfo = {
			"active" : active,
			"closed" : closed,
			"resolved" : resolved
		}

	}


})();

And this is how it looks for me 

You just need to modify to get in the server Script the part to get the group_id from the default url.

Hope that help you

[mahi6]

Thank you @Marco0o1 

Can you please tell how it will work for all group.Which means in above we only set single group ,i want when i select group in list it will show me all incident data.

Can you give some more points on that.

[Marco0o1 · Accepted solution]

I modify a litle bit the widget and add to show a simple list, you cand modify to your style:

HTML

<div>
  <h3>Incident Count by Assignment Group</h3>
  <label for="assignmentGroupSelect">Select Assignment Group:</label>


  <select ng-change="c.getIncidentCounts(c.selectedGroup)" id="groups" ng-value="c.defaultgroupURL" name="groups" class="form-control"
          ng-model="c.selectedGroup"
          ng-options="group.name for group in c.data.groupList">
    <option value="">{{c.data.defaultData.name}}</option>
  </select>

  <ul>
    <li>Active: {{ c.incidentCounts.active }}</li>
    <li>Closed: {{ c.incidentCounts.closed }}</li>
    <li>Resolved: {{ c.incidentCounts.resolved }}</li>
  </ul>
</div>


<h2>
  <center>INCIDENT LIST</center>
</h2>

<table class="table-task">
  <thead>
    <tr>
      <th>No.</th>
      <th>Incident Number</th>
      <th>Short Description</th>
      <th>State</th>
      <th>Assigned to</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="incident in c.incidentList">
      <td>{{incident.no}}</td>
      <td>{{incident.number}}</td>
      <td>{{incident.short_description}}</td>
      <td>{{incident.state}}</td>
      <td>{{incident.assigned_to}}</td>
    </tr>
  </tbody>
</table>

CSS

.table-task {
  border-collapse:collapse;
  border-spacing: 0;
  width:100%;
}

.table-task td{
  border-color: black;
  border-style:solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding:10px 5px;
  word-break:normal;
}

.table-task th{
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding:10px 5px;
  word-break:normal;
}

table.table-task thead tr {
  background-color: #1432f1;
  color:white;
}

table.table-task thead tr th {

  text-align: center;
}

Client

api.controller=function() {
  var c = this;
 c.incidentCounts = {
	 "active" : 0,
	 "closed" : 0,
	 "resolved" : 0,
 }
	
	c.incidentList= [];
  

c.getIncidentCounts = function(group) {
    
	var groupID = "";
if(!group){
	groupID = c.data.defaultData.sys_id;
} else {
	groupID = group.sys_id
}
 
 c.server.get({
				'group_id': groupID,
				'action': "getGroupInfo"
			}).then(function(response){
	 if(response.data.incidentInfo){
		 c.incidentCounts = response.data.incidentInfo;
		 c.incidentList = response.data.incidentList;
		 console.log("Received data");
	 }
 }
 

  )	
}
	
	c.getIncidentCounts(c.data.defaultData);
	
	
}

Server

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */

	if(!input){
		var assignmentGroupQuery = 'sysparm_clear_stack=true';
		// var assignmentGroupUrl = '/api/now/table/sys_user_group?' + assignmentGroupQuery;
		 var assignmentGroupUrl ='/api/now/table/sys_user_group/36c741fa731313005754660c4cf6a70d' // This dpend on your instance
 
		var defaultgroupID = "36c741fa731313005754660c4cf6a70d" // This is a default group from my group list


		data.defaultData = {};


		data.groupList = [];
		var groupGR = new GlideRecord("sys_user_group");
		groupGR.addActiveQuery();
		groupGR.addEncodedQuery(assignmentGroupQuery);
		groupGR.query();
		while(groupGR.next()){
			data.groupList.push({
				"name": groupGR.getValue("name"),
				"sys_id": groupGR.getUniqueValue(),
			});

			if(defaultgroupID == groupGR.getUniqueValue()){
				data.defaultData = {
					"name": groupGR.getValue("name"),
					"sys_id": groupGR.getUniqueValue(),

				}
			}
		}

	}

	if(input && input.action == "getGroupInfo"){
		var groupId = input.group_id;
		data.incidentInfo = {};
		
		data.incidentList = [];
		var count = 0;
		
		var active = 0;
		var closed = 0;
		var resolved = 0;
		var incidentInfo = new GlideRecord("incident");
		incidentInfo.addQuery("assignment_group",groupId);
		incidentInfo.query();

		while(incidentInfo.next()){
			/*
			Active is State = "New | 1", "In Progress | 2", "On Hold | 3 "
			Closed is State = "Closed | 7"
			Resolved is State = "Resolved |6"
			*/
			var incidentState = incidentInfo.getDisplayValue("state");
			if(incidentState == "New" || incidentState == "In Progress" || incidentState == "On Hold"){
				active++
			} else if(incidentState == "Closed"){
				closed++
			} else if(incidentState == "Resolved"){
				resolved++
			}
			
			data.incidentList.push({
				"no" : count++,
				"number" : incidentInfo.getDisplayValue("number"),
				"short_description": incidentInfo.getDisplayValue("short_description"),
				"assigned_to" : incidentInfo.getDisplayValue("assigned_to"),
				"state" : incidentState
			})
			
			
			
		}
		data.incidentInfo = {
			"active" : active,
			"closed" : closed,
			"resolved" : resolved
		}

	}


})();

And there is how it look, when you select a group then show the list of incidents:

Hope that help you