Customized widget not displaying updated data on the HTML despite existing in the client controller

[Harry Wilson]

We have begun working on the System Status page but we are looking to add filtering functionality. I cloned the Typeahead Search widget and broadcasted the search term when the user submits (remained on same page, blocked the change over to the search results page). 

I then cloned the Business Services Status page. In the client controller I added the following code to listen for the broadcast:

var c = this;

$scope.$on("spmNameSearch", function(evt, parms) {

var newInputs = {

searchInput: parms

}

// c.server.get(newInputs).then(function (response) {

// c.data.categories = response.data.categories;

// console.log(c.data.categories); // this still shows as all the categories

// })

$scope.server.get(newInputs).then(function (response) {

$scope.data.categories = response.data.categories;

console.log($scope.data.categories); // this still shows as all the categories

})

});

As you can see I tried two options here and in both the console.log() shows me the data that I expect after it being processed in the server-side script. For your awareness, in the server-side script I just refine the search like so :

if (input.searchInput){

svs.addQuery('name', 'CONTAINS', input.searchInput);

}

This all seems to be working as expected, but the HTML on the page does not reflect the data I'm seeing server-side or the data I am seeing in the console.log(). 

I have not changed the OOB Body HTML template and this can be seen here. 

<div class="panel panel-default">
<div class="panel-heading">&nbsp;</div>
<div class="panel-body">
<table class="tb">
<caption class="sr-only">${Business Services} ${Status History}</caption>
<thead>
<th scope="col">
<span class="panel-title title">
${Status History}
</span>
</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="colgroup" class="title category" colspan="6" title="{{::category.label}}" id="{{::category.id}}" ng-bind-html="::category.label"></th>
</tr>
<tr ng-repeat-end ng-repeat="service in ::category.services">
<th scope="row" class="row-header-title">
<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>
</th>
<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"
data-toggle="tooltip"
data-placement="top"
aria-hidden="true"
title="{{::service.outages[4-$index].msg + ' - ' + data.dates[$index].month + ' ' + data.dates[$index].day}}">
</span>
<span class="sr-only">{{::service.outages[4-$index].msg}}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

If anyone can assist with this, that would be great. I am new to AngularJS so not sure if anything additional on the Body HTML Template is needed.

[Vanderlei · Accepted solution]

Hi @Harry Wilson 

Change the replace the ::c.data.categories for data.categories
<tr ng-repeat-start="category in data.categories" aria-hidden="true">

The :: means the code will not update even if you change the variable value,
Also you set the response.data.categories in the $scope $scope.data.categories = response.data.categories;

If my answer helped you, please mark my answer as helpful.

Vanderlei Catione Junior | LinkedIn

Senior ServicePortal Developer / TechLead at The Cloud People

[Harry Wilson]

This worked! Thank you very much!