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]

Are you sure, you are editing the right widget? The text 'data.count is ' should definitely show on the UI

[Kevin McGartlan]

I figured it out finally. I added a css variable for panel-heading .row that sets the background color to grey. This is what I'm seeing now: 

However, now I have a different issue... how can I get the background color to display for printing to PDF? 

[Kevin McGartlan]

I have finally gotten it to work. I was able to get the light gray header bar there, but had an issue with displaying the background color when printing to PDF. I added !important to the css variable where I set the background color, but after doing that, the background color doesn't display without printing. Any idea how to get the background color there in both web page view, and printing? 

This is what I see in web: 

And this is what I see when printing: 

[Kevin McGartlan]

Oops, syntax got me there. I finally figured out how to get the gray header bars to display now, thank you very much! However, I still am having issues with getting the Risk tab to display only when there is data in the table. How would the server script look like in order to query the Risk table for Risks that match the project number? I am unsure of how to do this as the server script uses the "data" object. I'm used to querying tables by "var gr = new GlideRecord('Risk');", but I am not sure if this is possible with the "data" object there. Here is my current server script so far: 

(function() {
data.count = 0;
var p = {table: 'risk', fields: 'short_description,probability,state'};
p.hide_header = true;
p.hide_footer = true;
p.filter = "^state=pending^task=" + $sp.getParameter('sysparm_sys_id');
data.pending_risks = $sp.getWidget('widget-data-table', p);
p.filter = "^state!=pending^task=" + $sp.getParameter('sysparm_sys_id');
data.closed_risks = $sp.getWidget('widget-data-table', p);
})();

HTML:

<div ng-if="data.count>0">
<div class="panel panel-{{::c.options.color}} b">
<div class="panel-heading">
<div class="panel-title">${Risks}</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li ng-class="{'active': isPending == true}"><a href="" ng-click="setPending(true)">${Pending}</a></li>
<li ng-class="{'active': isPending == false}"><a href="" ng-click="setPending(false)">${Completed}</a></li>
</ul>
<span ng-if="isPending" class="overflow-override">
<sp-widget widget="data.pending_risks" />
</span>
<span ng-if="!isPending" class="overflow-override">
<sp-widget widget="data.closed_risks" />
</span>
</div>
</div>
</div>
</div>
</div>

Thank you for all of your help so far, it is very appreciated!

[SanjivMeher]

You can do

(function() {
data.count = 0;
var p = {table: 'risk', fields: 'short_description,probability,state'};
p.hide_header = true;
p.hide_footer = true;
p.filter = "^state=pending^task=" + $sp.getParameter('sysparm_sys_id');
data.pending_risks = $sp.getWidget('widget-data-table', p);
p.filter = "^state!=pending^task=" + $sp.getParameter('sysparm_sys_id');
data.closed_risks = $sp.getWidget('widget-data-table', p);

var rs = new GlideRecord('risk');

rs.addEncodedQuery("state=pending^task=" + $sp.getParameter('sysparm_sys_id'));

rs.query();

if (rs.next())

{

data.count = 1;

}

})();