I want to hide the Announcement Widget if there aren't any to show

[Stacy1]

Hello,

I love the announcement widget.  However, if there aren't any announcements marked as Widget I don't want the widget to show at all.

I have cloned the OOTB announcment widget.  I have added the Option Schema {"name":"always_show","section":"Behavior","label":"Show even when empty","type":"boolean"}, and NOT checked it on my widget.  But it still shows even if the box is false.

I am super new at this and want to know if I also need to update my HTML, client and server code also?  And if I do what am I supposed to be putting in there?

Thank you,

Stacy

[SanjivMeher · Accepted solution]

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

[Talya]

@SanjivMeher , Screenshots are not displayed. Can you please repost the same.

Thanks,

[Sreeraj CP]

You can use the below html:

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