Hi ServiceNow Developers:
I have worked on one of a widget which helps you to view problems in table format.
This widget includes pagination, search and print functions.
Hope this document helps developers to learn something new.
How it looks like:
Followed by other problems
HTML template:
<script>
<div class="range-label">Displaying {{ range.lower }} - {{ range.upper }} of {{ range.total }}</div>
</script>
<button id="print_button" onclick="window.print()" style="float: right;">
<img src="images/printer.gifx">Print</img>
</button><br/>
<form class="form-inline">
<div class="form-group">
<label>Search by:</label>
<input type="text" ng-model="search" class="form-control" placeholder="keywords">
<label>problems in</label>
<select id="mySelect" ng-init="c.data.dropDown.Value = c.options[0]" ng-model="c.data.dropDown.Value" ng-options="option.name for option in options" required ng-change="c.server.update()"></select>
</div>
</form>
<dir-pagination-controls></dir-pagination-controls>
<dir-pagination-controls template-url="paginationAlternative"></dir-pagination-controls>
<div dir-paginate = "problem in data.problems|filter:search|itemsPerPage:25">
<!-- your widget template -->
<table width="1000px" class="appheader" color="#FFFFFF">
<tr>
<td colspan="4" class="appheader"></td>
</tr>
<tr class="appname">
<td colspan="4"><h3>{{problem.number}} : {{problem.short_description}}</h3></td>
</tr>
<tr>
<td width="175px" class="tableheader">Number</td>
<td width="325px">{{problem.number}}</td>
<td width="175px" class="tableheader">Opened</td>
<td width="325px">{{problem.opened_at}}</td>
</tr>
<tr>
<td class="tableheader">Configuration item</td>
<td>{{problem.cmdb_ci}}</td>
<td class="tableheader">Opened by</td>
<td>{{problem.opened_by}}</td>
</tr>
<tr>
<td class="tableheader">Impact</td>
<td>{{problem.impact}}</td>
<td class="tableheader">State</td>
<td>{{problem.state}}</td>
</tr>
<tr>
<td class="tableheader">Urgency</td>
<td>{{problem.urgency}}</td>
<td class="tableheader">Assignment group</td>
<td>{{problem.assignment_group}}</td>
</tr>
<tr>
<td class="tableheader">Priority</td>
<td>{{problem.priority}}</td>
<td class="tableheader">Assignment to</td>
<td>{{problem.assigned_to}}</td>
</tr>
<tr>
<td class="tableheader">Change request</td>
<td>{{problem.rfc}}</td>
<td class="tableheader">Vendor</td>
<td>{{problem.u_vendor}}</td>
</tr>
<tr>
<td class="tableheader">Known error</td>
<td>{{problem.known_error}}</td>
<td class="tableheader">Vendor Ticket Number</td>
<td>{{problem.u_vendor_ticket_number}}</td>
</tr>
<tr>
<td class="tableheader">First Incident</td>
<td>{{problem.u_first_incident}}</td>
<td class="tableheader">Work notes list</td>
<td>{{problem.work_notes_list}}</td>
</tr>
<tr>
<td colspan="1" class="tableheader">Short description</td>
<td colspan="3">{{problem.short_description}}</td>
</tr>
<tr>
<td colspan="1" class="tableheader">Description</td>
<td colspan="3">{{problem.description}}</td>
</tr>
<tr>
<td colspan="2" class="appname">Closure Information</td>
<td colspan="2" class="appname">IT SOC</td>
</tr>
<tr>
<td class="tableheader">Causing CI</td>
<td>{{problem.u_causing_ci}}</td>
<td class="tableheader">Timeline</td>
<td>{{problem.u_timeline}}</td>
</tr>
<tr>
<td class="tableheader">Close notes</td>
<td>{{problem.close_notes}}</td>
<td class="tableheader">Executive Summary</td>
<td>{{problem.u_executive_summary}}</td>
</tr>
<tr>
<td class="tableheader">Closed</td>
<td>{{problem.closed_at}}</td>
<td class="tableheader">Business Impact</td>
<td>{{problem.u_business_impact}}</td>
</tr>
<tr>
<td class="tableheader">Closed by</td>
<td>{{problem.closed_by}}</td>
<td class="tableheader">Root Cause</td>
<td>{{problem.u_root_cause}}</td>
</tr>
</table>
<p style="page-break-after:always;"></p>
</div>
<button id="print_button" onclick="window.print()" style="float: right;">
<img src="images/printer.gifx">Print</img>
</button>
CSS:
.appheader {
margin-top:20px;
}
.appname {
background:#819FF7 !important;
color: #FFFFFF !important;
font-weight:bold !important;
font-size: medium !important;
}
.tableheader {
background:#DDDDDD !important;
color: #343d47 !important;
font-weight:bold;
font-size: medium;
}
table, th, td{
border: 1px solid black;
}
Client Script:
function($scope) {
/* widget controller */
var c = this;
c.options = [{name: 'Open'}, {name: 'Close'}];
c.server.update().then(function(response) {
});
}
Server Script:
(function() {
data.problems = [];
var openORclose = 'Open';
if(input){
openORclose = input.dropDown.Value.name;
}
var grInc = new GlideRecord('problem');
if(openORclose == 'Open'){
grInc.addQuery("active=true");
}else if(openORclose == 'Close'){
grInc.addQuery("active=false");
}
grInc.orderBy('number');
grInc.query();
while(grInc.next()){
var problem = {};
problem.number = grInc.getDisplayValue('number');
problem.opened_at = grInc.getDisplayValue('opened_at');
problem.cmdb_ci = grInc.getDisplayValue('cmdb_ci');
problem.opened_by = grInc.getDisplayValue('opened_by');
problem.impact = grInc.getDisplayValue('impact');
problem.state = grInc.getDisplayValue('state');
problem.urgency = grInc.getDisplayValue('urgency');
problem.assignment_group = grInc.getDisplayValue('assignment_group');
problem.priority = grInc.getDisplayValue('priority');
problem.assigned_to = grInc.getDisplayValue('assigned_to');
problem.rfc = grInc.getDisplayValue('rfc');
problem.u_vendor = grInc.getDisplayValue('u_vendor');
problem.known_error = grInc.getDisplayValue('known_error');
problem.u_vendor_ticket_number = grInc.getDisplayValue('u_vendor_ticket_number');
problem.u_first_incident = grInc.getDisplayValue('u_first_incident');
problem.work_notes_list = grInc.getDisplayValue('work_notes_list');
problem.short_description = grInc.getDisplayValue('short_description');
problem.description = grInc.getDisplayValue('description');
problem.u_causing_ci = grInc.getDisplayValue('u_causing_ci');
problem.u_timeline = grInc.getDisplayValue('u_timeline');
problem.close_notes = grInc.getDisplayValue('close_notes');
problem.u_executive_summary = grInc.getDisplayValue('u_executive_summary');
problem.closed_at = grInc.getDisplayValue('closed_at');
problem.u_business_impact = grInc.getDisplayValue('u_business_impact');
problem.closed_by = grInc.getDisplayValue('closed_by');
problem.u_root_cause = grInc.getDisplayValue('u_root_cause');
data.problems.push(problem);
}
})();
This Widget has a dependency for pagination please include it in your widget.(Hope you know how to do it), I have attached it here.
