How to hide widgets if no data in table

[Kevin McGartlan]

Hello, 

I have a requirement to hide the Project Status Risk, Project Status Issues, and Project Status Changes widgets from the OOB Project Status Report page if the respective tables are empty (EX: for a project with no risks, hide the Project Status Risk widget from the status report). I have not been able to figure out how to get those widgets to hide from coding in the server/client scripts. I wanted to query the "Risk" table for any risks that match the project on the status report, but no luck there. 

Does anyone have any ideas how to accomplish this requirement? 

[SanjivMeher]

You will need to modify all the three widgets to not show up when no data. The changes can be done to the HTML part of it, where you do a ng-if at the start of the thml, to check if record count is 0;

[Kevin McGartlan]

Thank you for your reply. That all makes sense to me, but I'm unsure how to actually implement the ng-if that checks the record count. Will I need to query the risk table for any risks that match the project number?

[SanjivMeher]

Yes. From Server Script, you need to pass the count of no. of records.

For testing, you can store the count as below in server script

data.count = 0;

and then use 

<div ng-if="data.count!=0> 

<-----Rest of the HTML----->

</div>

[Kevin McGartlan]

I've tried to do what you suggested as just a test, but I'm still seeing the risks widget. Any suggestions? In my server script, I have set the data.count=0; in the top of the script. Does it need to be moved elsewhere?

<div ng-if="data.count!=0">
<div class="panel panel-{{::c.options.color}} b">
<div class="panel-heading">
<div class="hidden-xs row">
<span class="col-sm-3 panel-heading-col">
<div class="panel-title">${Status History}</div>
</span>
<span ng-repeat="date in data.dates | limitTo: 9 track by $index" class="col-sm-3 status-hr panel-title" ng-bind="date"></span>
</div>
</div>
<div class="hidden-xs panel-body" ng-repeat="category in c.data.categories">
<div class="row service">
<div class="col-sm-3 bold status-header">
<h5 ng-bind="::category.label"></h5>
</div>
<!--
<div ng-repeat="n in [0,1,2,3,4,5,6,7,8,9,10] track by $index" class="col-sm-1 status-column">
<span class="fa" ng-class="c.data.statuses[category.name][n].icon">
<span class="tooltiptext" ng-if="c.data.statuses[category.name][n].comment && n<=5" ng-bind-html="c.data.statuses[category.name][n].comment"></span>
<span class="tooltiptext margin_override" ng-if="c.data.statuses[category.name][n].comment && n>5" ng-bind-html="c.data.statuses[category.name][n].comment"></span>
</span>
</div>
-->
<div ng-repeat="status in c.data.statuses[category.name] | limitTo: 9 track by $index" class="col-sm-1 status-column">
<span class="icon" ng-class="status.icon" tooltip-class="comment-tooltip" tooltip-append-to-body="true" uib-tooltip-html="'{{status.comment}}'" role="tooltip">
</span>
</div>
</div>
</div>
</div>