Customizing the Announcements Widget

SHWA · ‎08-20-2023

Hello,

I’ｍ working on customizing the Announcements widget to display the From field in addition to the Title field.

When I added {{::a.from}} to the HTML of the widget, the numbers are displayed like the image. Is it possible to set the display format to date?

Thank you.

Karthiga S · ‎08-21-2023

Hello @SHWA ,

I just implemented it to check. please follow the same.

Update your line 11 as below

<div class="from">{{::a.from | date:'MMM d, yyyy'}}</div>

The output will be like

There are other date formats available too. Listed below

<div>

      <b><u>Formatting using date elements</u></b>

      <br><b>Date in MMM d, yyyy:</b> {{data.mydate | date:'MMM d, yyyy'}}

      <br><b>Date in yyyy-MM-dd HH:mm:ss Z:</b> {{data.mydate | date:'yyyy-MM-dd HH:mm:ss Z'}}

      <br><b>Date in MM/dd/yyyy @ h:mma:</b> {{data.mydate | date:'MM/dd/yyyy @ h:mma'}}

      <br><b>Date in "MM/dd/yyyy 'at' h:mma":</b> {{data.mydate | date:"MM/dd/yyyy 'at' h:mma"}}

      <br><b>Time in "h:mma":</b> {{data.mydate | date:"h:mma"}}

  <br><br>

  <b><u>Formatting using Predefined format</u></b>

      <br><b>Date in medium:</b> {{data.mydate | date:'medium'}}

      <br><b>Date in fullDate:</b> {{data.mydate | date:'fullDate'}}

      <br><b>Date in longDate:</b> {{data.mydate | date:'longDate'}}

      <br><b>Date in mediumDate:</b> {{data.mydate | date:'mediumDate'}}

      <br><b>Time in mediumTime:</b> {{data.mydate | date:'mediumTime'}}

      <br><b>Time in shortTime:</b> {{data.mydate | date:'shortTime'}}

</div>

Results

Please mark it Correct and Hit Like if you find this helpful!

Regards,

Karthiga

View solution in original post

Karthiga S · ‎08-21-2023

Hi @SHWA

Glad my solution helped you!

Will you able to mark it helpful?

Regards,

Karthiga

Sonu Parab · ‎08-20-2023

Hi @SHWA ,
Could you please share your HTML script for this widget.

SHWA · ‎08-20-2023

Hi @Sonu Parab ,

The following is HTML script.

<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}}"></fa></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)">
      <div class="details" ng-init="c.linkSetup(a)">

        <!-- From and Title field -->
        <div class="from-title">
          <div class="from">{{::a.from}}</div>
          <div class="spacer"></div>
          <div class="title-container">
            <div ng-click="c.goToRecord(a)" class="title" ng-if="a.linkType !== 'title'" id="{{::c.wid}}-{{::a.id}}-title">{{::a.title}}</div>
            <a ng-click="c.goToRecord(a)" class="title" ng-if="a.linkType === 'title'" ng-bind="::a.title" ng-href="{{::a.targetLink}}" target="_blank" id="{{::c.wid}}-{{::a.id}}-title" tabindex="0"></a>
          </div>
        </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&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"></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"></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>

Thank you.