Dynamically Show / Hide Announcements widget

[jmcm]

Hi all,

I am looking for a way to dynamically hide the announcements widget when there are no announcements. I also want to re format the container so there is no white space, is this possible?

When there are no announcements, I want it to look like this:

When there are announcements, I want it to look like this:

I don't want it to appear like this:

Thanks in advance!

[Dan O Connor · Accepted solution]

That could be an issue, because essentially what you want to have happen (in the backend) is for the widget to be removed entirely, when there is no content.

The reason the white space exists is because the widget is active and present. So while there might not be an announcement, the page has to have the widget present for when an announcement is made available.

It might be the case you need to move the announcement widget, under say where you have Featured.

So you get to move to a two column sort of layout, and when there are no announcements, it doesn't 'create' any white space. 

[Community Alums]

Hi @jmcm ,

you can select widget on the page designer. And also in the HTML, add ng-if="::(c.totalAnnouncements != 0)" to the first line in the HTML.

Refer to this thread :  https://www.servicenow.com/community/developer-forum/i-want-to-hide-the-announcement-widget-if-there...

[Sreeraj CP]

I've cloned the OOTB announcement widget and replaced HTML with the below and it worked: 

<div ng-if="c.totalAnnouncements > 0" ng-class="['panel', 'panel-{{::c.options.color}}', 'b', 'spw-announcements-root', '{{::c.wid}}', {'accessibility-off': c.accessibilityOff}]">
<div class="panel-heading">
<h3 class="h4 panel-title"><span ng-if="c.options.glyph"><fa class="flip-icon-rtl m-r-sm" name="{{::c.options.glyph}}"></fa></span>{{::c.options.title}}</h3>
</div>
<ul class="list-group" style="max-height: none; overflow-y: auto;">
<li ng-class="['list-group-item', {'can-expand': a.canExpand, expanded: a.expanded}, cssId]" ng-repeat="a in c.announcements" ng-init="::(cssId = 'announcement-' + a.id + '-' + c.wid)">
<style ng-if="::c.options.use_display_style" ng-init="::(ds = c.getDisplayStyle(a))">
li.{{::cssId}} {
background-color: {{::ds.backgroundColor}};
text-align: {{::ds.alignment.toLowerCase()}};
}

li.{{::cssId}},
li.{{::cssId}} .details div.title div,
li.{{::cssId}} .details div.title a,
li.{{::cssId}} .details a.info-link {
color: {{::ds.foregroundColor}} !important;
}

li.{{::cssId}} .details p {
font-weight: 100;
}

li.{{::cssId}}:hover .details div.title a,
li.{{::cssId}} .details a.info-link {
text-decoration: underline;
}
</style>
<div class="details" ng-init="c.linkSetup(a)">
<div ng-if="a.canExpand" class="title" ng-class="{'expanded': !a.expanded}" data-aid="{{::a.id}}" ng-click="c.toggleDetails(a)" tabindex="0" role="button" aria-expanded="{{a.expanded}}" ng-attr-aria-controls="{{a.canExpand ? c.wid+'-'+a.id+'-summary' : undefined}}">
<div ng-if="a.linkType !== 'title'" ng-bind="::a.title" id="{{::c.wid}}-{{::a.id}}-title"></div>
<a ng-if="a.linkType === 'title'" ng-bind="::a.title" ng-href="{{::a.targetLink}}" target="{{::a.linkTarget}}" id="{{::c.wid}}-{{::a.id}}-title" tabindex="0"></a>
<span ng-if="a.canExpand" class="glyphicon glyphicon-menu-down" role="button" aria-label="{{a.expanded ? '${Hide details}' : '${Show details}'}}"></span>
</div>

<div ng-if="!a.canExpand" class="title" data-aid="{{::a.id}}">
<div ng-if="a.linkType !== 'title'" ng-bind="::a.title" id="{{::c.wid}}-{{::a.id}}-title"></div>
<a ng-if="a.linkType === 'title'" ng-bind="::a.title" ng-href="{{::a.targetLink}}" target="{{::a.linkTarget}}" id="{{::c.wid}}-{{::a.id}}-title" tabindex="0"></a>
</div>

<div ng-if="a.canExpand" id="{{::c.wid}}-{{::a.id}}-summary" aria-labelledby="{{::c.wid}}-{{::a.id}}-title" role="region" aria-hidden={{!a.expanded}}>
<p ng-if="::a.summary" ng-bind="::a.summary"></p>
<a class="info-link" ng-if="a.linkType === 'normal'" ng-bind="::a.targetLinkText" ng-href="{{::a.targetLink}}" target="{{a.linkTarget}}" aria-label="{{a.targetLinkText}}" tabindex="{{a.expanded ? 0 : -1}}"></a>
</div>
</div>
</li>
</ul>
<div class="panel-footer" ng-if="c.totalPages > 1">
<div ng-if="::c.options.paginate" class="btn-toolbar m-r pull-left">
<div class="btn-group">
<a ng-disabled="c.currentPage === 1" href="javascript&colon;void(0)" ng-click="c.currentPage === 1 ? null : c.goToPage(c.currentPage - 1)" class="btn btn-default" aria-label="${Previous page}" role="button"><i class="fa fa-chevron-left flip-icon-rtl"></i></a>
</div>
<div ng-if="c.totalPages > 1 && c.totalPages < 3" class="btn-group">
<a ng-repeat="i in c.getNumArray(c.totalPages) track by $index" ng-click="c.goToPage($index + 1)" href="javascript&colon;void(0)" ng-class="{active: ($index + 1) === c.currentPage}" type="button" class="btn btn-default" aria-label="${Page} {{$index + 1}}" role="button">{{$index + 1}}</a>
</div>
<div class="btn-group">
<a ng-disabled="c.currentPage === c.totalPages" href="javascript&colon;void(0)" ng-click="c.currentPage === c.totalPages ? null : c.goToPage(c.currentPage + 1)" class="btn btn-default" aria-label="${Next page}" role="button"><i class="fa fa-chevron-right flip-icon-rtl"></i></a>
</div>
</div>
<div ng-if="::c.options.paginate" class="m-t-xs panel-title pull-left">{{c.getPageInfo()}}</div>
<div ng-if="::(!c.options.paginate)" class="m-t-xs panel-title pull-left no-margin">${First {{::c.totalAnnouncements}} of {{::c.totalRecords}}}</div>
<a ng-if="::(c.options.view_all_page && !c.isViewAllPage())" ng-class="['pull-right', {'push-margin': c.options.paginate}]" ng-href="?id={{::c.options.view_all_page}}" role="link">${View all}</a>
<span class="clearfix"></span>
</div>
</div>