Issue with Displaying Service Offering in Business Services Status Widget

[Pavithra0812]

Hi Experts,

We have a requirement to modify the Business Service Status Widget so that the Services section becomes expandable only when the user clicks on the "+" icon.

The structure is as follows:
Service Classification → Service → Service Offering

While we are able to display the Service when the Service Classification is expanded, we are currently unable to display the Service Offering.

HTML

<!-- Category Row -->
<tr ng-repeat-start="category in ::c.data.categories">
<th scope="colgroup" class="title category" colspan="7" title="{{::category.label}}" id="{{::category.id}}">
<!-- Expand/Collapse Icon for Categories -->
<span ng-click="toggleCategory(category)" style="cursor: pointer; margin-right: 8px;">
<i class="fa" ng-class="{'fa-minus': category.showChildren, 'fa-plus': !category.showChildren}" aria-hidden="true"></i>
</span>
<b ng-bind-html="::category.label"></b>
</th>
</tr>

<!-- Service Row (Visible Only When Category is Expanded) -->
<tr ng-show="category.showChildren" ng-repeat-end ng-repeat="service in ::category.services">
<th scope="row" class="row-header-title">
<!-- Expand/Collapse Icon for Services with Offerings -->
<span ng-if="service.offerings.length > 0"
ng-click="toggleService(service)"
style="cursor: pointer; margin-right: 8px;">
<i class="fa" ng-class="{'fa-minus': service.expanded, 'fa-plus': !service.expanded}" aria-hidden="true"></i>
</span>

<!-- Service Name (Clickable Link) -->
<a ng-href="?id=service_status&service={{::service.sys_id}}" ng-bind-html="::service.name"></a>
</th>

<!-- Outage Icons for Service -->
<td ng-repeat="n in [0,1,2,3,4,5,6] track by $index" class="outage-row">
<span class="fa" ng-class="::service.outages[6-$index].icon"
data-toggle="tooltip"
data-placement="top"
aria-hidden="true"
title="{{::service.outages[6-$index].msg + ' - ' + data.dates[$index].month + ' ' + data.dates[$index].day}}">
</span>
<span class="sr-only">{{::service.outages[6-$index].msg}}</span>
</td>
</tr>

<!-- Service Offerings Row (Visible Only When Service is Expanded) -->
<tr ng-show="service.expanded && service.offerings.length > 0"
ng-repeat="offering in service.offerings">
<th scope="row" class="row-header-title">
<!-- Service Offering Name (Clickable Link) -->
<a ng-href="?id=service_offering_status&offering={{::offering.sys_id}}"
ng-bind-html="::offering.name"></a>
</th>

<!-- Outage Icons for Service Offerings -->
<td ng-repeat="n in [0,1,2,3,4,5,6] track by $index" class="outage-row">
<span class="fa" ng-class="::offering.outages[6-$index].icon"
data-toggle="tooltip"
data-placement="top"
aria-hidden="true"
title="{{::offering.outages[6-$index].msg + ' - ' + data.dates[$index].month + ' ' + data.dates[$index].day}}">
</span>
<span class="sr-only">{{::offering.outages[6-$index].msg}}</span>
</td>
</tr>

SERVER SCRIPT

data.categories = [];

    var svs = new GlideRecord("cmdb_ci_service");

    svs.addQuery("sys_class_name", "IN", options.sys_class_list || "cmdb_ci_service");

    svs.setLimit(options.number_of_services || 250);

    svs.orderBy("service_classification");

    svs.orderBy("name");

    svs.query();

    var currentCategory = "-";

    var catIndex = -1;

    while (svs.next()) {

        var cat = svs.getValue("service_classification");

        if (cat != currentCategory) {

            catIndex++;

            currentCategory = cat;

            data.categories[catIndex] = {};

            data.categories[catIndex].name = cat;

            data.categories[catIndex].id = "service_" + catIndex;

            data.categories[catIndex].label = svs.getDisplayValue("service_classification");

            data.categories[catIndex].showChildren = false;

            if (data.categories[catIndex].label == "")

                data.categories[catIndex].label = gs.getMessage("Service");

            data.categories[catIndex].services = [];

        }

        // Fetch Service Details

        var svc = {};

        svc.sys_id = svs.getUniqueValue();

        svc.name = svs.getDisplayValue();

        svc.safeName = GlideStringUtil.escapeHTML(svc.name);

        svc.subscribed = isSubscribed(svc.sys_id);

        svc.expanded = false;

        svc.outages = getOutages(svs.getUniqueValue());

        // Fetch Service Offerings (Children)

        svc.offerings = [];

        var offerings = new GlideRecord("service_offering");

        offerings.addQuery("parent", svc.sys_id);

        offerings.query();

        while (offerings.next()) {

            var offering = {};

            offering.sys_id = offerings.getUniqueValue();

            offering.name = offerings.getDisplayValue();

            offering.safeName = GlideStringUtil.escapeHTML(offering.name);

            offering.outages = getOutages(offerings.getUniqueValue());

            svc.offerings.push(offering);

        }

        data.categories[catIndex].services.push(svc);

    }

CLIENT

 $scope.toggleCategory = function (category) {

        category.showChildren = !category.showChildren;

    };

    $scope.toggleService = function (service) {

        service.expanded = !service.expanded;

    };

[ihabeeb]

Hi Pavithra , 
I also have a similar requirement . Let me know when u find a solution .

Thanks in advance.

[Pavithra0812]

@Ankur Bawiskar 

Could you please have a look at it?

Thank you!