Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

How to show only our Service Offerings on the Business Services Status Widget

Tony Landowski
Kilo Contributor

I have a request to start showing the Status History section of the System Status page on our Service Portal.  This section is the Business Services Status widget.  I am trying to customize to only show our Service Offerings.  Can someone please help guide me on what I am missing to only show these.  Below are the HTML and Server Script sections of the widget.  

 

find_real_file.png

 

HTML:

<div class="panel panel-default">
<div class="panel-heading">&nbsp;</div>
<div class="panel-body">
<table class="tb">
<thead>
<th scope="col">
<h2 class="panel-title title">
${Status History}
</h2></th>
<th scope="col" ng-repeat="date in ::data.dates" class="date-column">{{::date.month}} {{::date.day}}</th>
</thead>
<tbody>
<tr ng-repeat-start="category in ::c.data.categories" aria-hidden="true">
<th scope="col" colspan="6" title="{{::category.label}}"><h3 class="title category" ng-bind-html="::category.label"></h3></th>
</tr>
<tr ng-repeat-end ng-repeat="service in ::category.services">
<td scope="row">
<small ng-if="::service.subscribed" class="subscribed" title="${Subscribed to updates}" aria-label="${Subscribed to updates}"><i class="fa fa-envelope"></i></small>
<a ng-href="?id=service_status&service={{::service.sys_id}}" ng-bind-html="::service.name"></a>
</td>
<td ng-repeat="n in [0,1,2,3,4] track by $index" class="outage-row">
<span class="fa" ng-class="::service.outages[4-$index].icon"
sp-tooltip
aria-label="{{::data.dates[$index].month + ' ' + data.dates[$index].day + ' - ' + service.outages[4-$index].msg}}"
role="application"
tooltip-smart="true"
tooltip-speed="slow"
tooltip-size="large"
tooltip-template="{{::service.outages[4-$index].msg + ' - ' + data.dates[$index].month + ' ' + data.dates[$index].day}}">
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Server Script:

(function() {
data.monthTranslations = {
'Jan': gs.getMessage("Jan"),
'Feb': gs.getMessage("Feb"),
'Mar': gs.getMessage("Mar"),
'Apr': gs.getMessage("Apr"),
'May': gs.getMessage("May"),
'Jun': gs.getMessage("Jun"),
'Jul': gs.getMessage("Jul"),
'Aug': gs.getMessage("Aug"),
'Sep': gs.getMessage("Sep"),
'Oct': gs.getMessage("Oct"),
'Nov': gs.getMessage("Nov"),
'Dec': gs.getMessage("Dec")
};

data.categories = [];
var svs = new GlideRecord("cmdb_ci_service");
//svs.addQuery("sys_class_name", "cmdb_ci_service");
svs.setLimit(options.number_of_services || 2000);
svs.orderBy("category");
svs.orderBy("name");
svs.query();
var currentCategory = "-";
var catIndex = -1;
while (svs.next()) {
var cat = svs.getValue("category");
if (cat != currentCategory) {
catIndex++;
currentCategory = cat;
data.categories[catIndex] = {};
data.categories[catIndex].name = cat;
data.categories[catIndex].label = svs.getDisplayValue("category");
if (data.categories[catIndex].label == "")
data.categories[catIndex].label = gs.getMessage("Service");
data.categories[catIndex].services = [];
}
var svc = {};
svc.sys_id = svs.getUniqueValue();
svc.name = svs.getDisplayValue();
svc.safeName = GlideStringUtil.escapeHTML(svc.name);
svc.subscribed = isSubscribed(svc.sys_id);
var outs = [];
for (var i = 0; i <= 4; i++) {
var out = new GlideAggregate("cmdb_ci_outage");
out.addQuery("cmdb_ci", svs.getUniqueValue());
out.addQuery("end", ">=", gs.daysAgoStart(i));
out.addQuery("begin", "<=", gs.daysAgoEnd(i));
out.addAggregate('COUNT', 'type');
out.query();
var svcOutageDay = {};
svcOutageDay.count = 0;

while (out.next()) {
var type = out.type;
var typeCount = out.getAggregate('COUNT', 'type');
svcOutageDay[type] = typeCount;
svcOutageDay.count += typeCount;
}
svcOutageDay.icon = "fa-check-circle";
svcOutageDay.msg = gs.getMessage("{0} - no outage", svc.safeName);
if (svcOutageDay.count > 1) {
svcOutageDay.icon = "fa-plus-circle";
svcOutageDay.msg = gs.getMessage("{0} - multiple issues", svc.safeName);
} else if (svcOutageDay.outage > 0) {
svcOutageDay.icon = "fa-exclamation-circle";
svcOutageDay.msg = gs.getMessage("{0} - outage", svc.safeName);
} else if (svcOutageDay.degradation > 0) {
svcOutageDay.icon = "fa-minus-circle";
svcOutageDay.msg = gs.getMessage("{0} - degradation of service", svc.safeName);
} else if (svcOutageDay.planned > 0) {
svcOutageDay.icon = "fa-info-circle";
svcOutageDay.msg = gs.getMessage("{0} - planned maintenance", svc.safeName);
}
outs.push(svcOutageDay);
}
svc.outages = outs;
data.categories[catIndex].services.push(svc);
}
data.dates = [];
for (var i = 5; i > 0; i--) {
var d = new GlideDate();
d.subtract(1000 * 3600 * 24 * (i - 1));
data.dates.push(d.getDisplayValueInternal());
}

function isSubscribed(id) {
var subs = new GlideRecord("m2m_sp_status_subscription");
subs.addQuery("sys_user", gs.getUserID());
subs.addQuery("cmdb_ci_service", id);
subs.query();
return subs.hasNext();
}
})();

1 ACCEPTED SOLUTION

Community Alums
Not applicable

Service Offering is extended from Business Service, so you can do this simply by changing the table you are looking at.

Change

var svs = new GlideRecord("cmdb_ci_service");

To

var svs = new GlideRecord("service_offering");

Please mark correct if this solves your issue and helpful 👍 if it has assisted you.

View solution in original post

5 REPLIES 5

Hi Allen,

 

The above information was helpful. Something related to this only, what if i want to show both the business service and their respective service offerings on the portal?

Is there a way to achieve it? and if so, how can i do that?

 

Regards,

Surabhi