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? 

[Kevin McGartlan]

This is exactly what I was looking for. Thank you! I'm trying to do the same with both Issues and Changes, but I am not able to get the queries to work correctly. Here's the code below for Issue:

(function() {
var p = {table: 'issue', fields: 'short_description,priority,state,assigned_to'};
p.hide_header = true;
p.hide_footer = true;
p.filter = "^active=true^parent=" + $sp.getParameter('sysparm_sys_id');
data.pending_issues = $sp.getWidget('widget-data-table', p);
p.filter = "^active=false^parent=" + $sp.getParameter('sysparm_sys_id');
data.closed_issues = $sp.getWidget('widget-data-table', p);
data.count = 0;
var rs = new GlideRecord('issue');
rs.addEncodedQuery("state=pending^parent=" + $sp.getParameter('sysparm_sys_id'));
rs.query();
if (rs.next()) {
data.count = 1;
}
})();

How can I edit this server script do the same thing we did with Issue? And how about for Change?

Thank you for your continued support!

[Kevin McGartlan]

This was exactly what I needed there, I have now successfully gotten the widget to display only when data is in those tables for that project. Thank you so much for your help! I did have one more question that I'm hoping you can help me with since you know a lot about service portal configuration. For the two widgets "Project Overall Status" and "Project Weekly Status", the "Status" column is not displaying any of the icons for the different statuses. Below is a screenshot: 

Would you know how to get the icons to display here? Here's the HTML for the "Project Overall Status" widget:

<div class="panel panel-{{::c.options.color}} b">
<div class="panel-heading">
<div class="hidden-xs row">
<span class="col-sm-3 panel-title-col">
<div class="panel-title">${Current Status}</div>
</span>
<span class="col-sm-1 center panel-title-col">
<div class="panel-title">${Status}</div>
</span>
<span class="col-sm-8 panel-title-col">
<div class="panel-title">${Comments}</div>
</span>
</div>
</div>

<div class="hidden-xs panel-body">
<div class="row service" ng-repeat="data in c.data.displayFields">
<div class="col-sm-3 bold panel-body-col">
<h5 ng-bind="::data.label"></h5>
</div>
<div class="col-sm-1 center panel-body-col">
<span class="icon" ng-class="data.icon"></span>
</div>
<div class="col-sm-8 panel-body-col">
<span ng-bind-html="::data.comments" class="comment"> </span>
</div>
</div>
</div>
</div>

And here is the HTML for the "Project Weekly Status" widget:

<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>

Thank you so much Sanjiv for all of your help. I really appreciate it!

[SanjivMeher]

Great. Can you mark my response correct, if it worked for you?

Also where are you storing these icons? Is it stored in a table?

[SanjivMeher]

Please mark the response correct if it worked for you

[Pranav Bhagat]

Use ngif

in your html

somethinglike

<li ng-if="data.tatrue">
<a href="?id=askhr_approval&sys_id={{a1.sys_id}}"><span class="short_desc">Approver:{{a1.approver}}</span></a>
<span class="text-right">{{a1.state}}</span>
<span class="text-right text-muted">Created:{{a1.sys_created_on}}</span>
</li>

Regards,

Pranav

Mark my Responses as Correct and Helpful if you find it relevant.