How to hide a widget when it is empty and show if it has a result?

[Sarah Anjos]

I have a widget that when there is no scheduled maintenance, it brings me a message, but I need to make a change, it is necessary to hide it when there is no scheduled maintenance, instead of showing a message.

Today is like this:

HTML

<div ng-if="!data.service || data.outages.length > 0" class="panel panel-{{options.color}} b">
  <div class="panel-heading">
    <h2 class="panel-title">${Planned Maintenance}<span ng-if="data.serviceDisplay"> - {{data.serviceDisplay}}</span></h2>
  </div>

  <div class="panel-body">
	<div ng-if="!data.service">${We publish information on planned service availability below.} ${This includes events occurring over the next 5 days.}</div>

	<div ng-if="data.outages.length == 0" class="col-xs-12 bs-callout bs-callout-success">
		${No service maintenance is planned over the next 5 days}
	</div>
	<div ng-if="data.outages.length > 0" ng-repeat="outage in data.outages" class="col-xs-12 bs-callout bs-callout-{{outage.type}}">
		<a ng-if="!data.service" style="color:inherit" ng-href="?id=service_status&service={{outage.serviceID}}">${Planned maintenance} - {{outage.ci}}, ${service will be unavailable {{outage.begin}} to {{outage.end}}}</a>
		<span ng-if="data.service" style="color:inherit">${Planned maintenance} - {{outage.ci}}, ${service will be unavailable {{outage.begin}} to {{outage.end}}}</span>
	</div>
  </div>
</div>

Server Script:

// populate the 'data' object
// e.g., data.table = $sp.getValue('table');
var outage = new GlideRecord("cmdb_ci_outage");
outage.addQuery("begin", "<=", gs.daysAgoStart(-5));
outage.addQuery("end", ">=", gs.nowNoTZ());
outage.addQuery("type", "planned");
data.service = (input && input.service) || $sp.getParameter("service");
if (!GlideStringUtil.nil(data.service)) {
  outage.addQuery("cmdb_ci", data.service);
	var serviceGR = new GlideRecord("cmdb_ci_service");
	if (serviceGR.get(data.service))
		data.serviceDisplay = serviceGR.getDisplayValue();
}
outage.query();
data.outages = [];
data.outageIDs = "";
while (outage.next()) {
	var out = {};
	out.typeDisplay = outage.type.getDisplayValue();
	out.type = outage.getValue("type");
	out.ci = outage.cmdb_ci.getDisplayValue();
	out.begin = outage.begin.getDisplayValue();
	out.end = outage.end.getDisplayValue();
	out.serviceID = outage.getValue("cmdb_ci");
	data.outages.push(out);
	data.outageIDs += "," + outage.getUniqueValue();
}

How can I hide the widget instead of displaying the message when it is ==0?

[Jaspal Singh · Accepted solution]

Change HTML as below

<div ng-if="!data.service || data.outages.length > 0" class="panel panel-{{options.color}} b">
  <div class="panel-heading">
    <h2 class="panel-title">${Planned Maintenance}<span ng-if="data.serviceDisplay"> - {{data.serviceDisplay}}</span></h2>
  </div>

  <div class="panel-body" ng-if="data.outages.length>0">

	<div ng-if="!data.service">${We publish information on planned service availability below.} ${This includes events occurring over the next 5 days.}</div>

<!--<div ng-if="data.outages.length == 0" class="col-xs-12 bs-callout bs-callout-success">
		${No service maintenance is planned over the next 5 days}
	</div> -->

	<div ng-if="data.outages.length > 0" ng-repeat="outage in data.outages" class="col-xs-12 bs-callout bs-callout-{{outage.type}}">
		<a ng-if="!data.service" style="color:inherit" ng-href="?id=service_status&service={{outage.serviceID}}">${Planned maintenance} - {{outage.ci}}, ${service will be unavailable {{outage.begin}} to {{outage.end}}}</a>
		<span ng-if="data.service" style="color:inherit">${Planned maintenance} - {{outage.ci}}, ${service will be unavailable {{outage.begin}} to {{outage.end}}}</span>
	</div>
  </div>
</div>

[Sarah Anjos]

It worked out! Thanks