Help displaying announcement name

Ryax1 · ‎09-19-2022

Hi,

I am trying to customise the OOB announcements widget so that I can display additional fields from the announcement table. OOB it displays the announcement title and summary by using ::a.summary however I have tried changing this to ::a.name (to display the announcement name) but nothing displays.

Please can you help how I can change the below OOB code to be able to display announcent name (or another field)?

<div 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 name="{{::c.options.glyph}}"/></span>{{::c.options.title}}</h3>
  </div>
  <ul ng-if="::(c.totalAnnouncements > 0)" 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" 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">
          <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 ng-if="::(c.totalAnnouncements === 0)" class="empty-state-content panel-body">
    <p>${No information available}</p>
  </div>
  <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: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"></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: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: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"></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>

Thanks

Richard

Ryax1 · ‎09-23-2022

I've also tried cloning it in my Personal Developer Instance but get exactly the same issue:

This is what the OOB widget looks like expanded:

And here is the Custom widget expanded (with the summary code replaced for 'name'):

SO10 · ‎09-03-2023

Hi
Has this problem been resolved?
I also have a problem similar to this.
By default, the widget displays the title of the Announcement, but I would like to add a custom field so that it is displayed next to the title.
The custom field is a group reference field (u_group).
Adding code like {{::a.u_group}} to the HTML Template does not work.
Could someone please help me edit this widget?

Thankyou.