An announcement page consists of the following elements:

1. a <breadcrumbs> widget that allows users to navigate within the structure of the portal pages.
2. an Announcement Page Portal Widget that is implemented as a bundle of the existing widgets, widget attributes; the server and client logic is also used.
3. a <previewList>widget that displays the announcement list.

These widgets interact with each other.

The announcement page looks as shown below:

Breadcrumbs configuration

To configure breadcrumbs correctly, it is preferable to use the attribute values as in the example below (type these values in the Template field of the breadcrumbs widget form):

<div class="announcement__breadcrumbs">
  <breadcrumbs>
</div>

Announcement widget configuration

An announcement widget looks like a card containing information that the administrator wanted to deliver to users. This card contains formatted text that can be typed with the Announcements functionality. To use this widget, add it to the widget instance configured on the appropriate page by selecting the widget dictionary (select the Announcement Page Portal Widget item from the list).

To modify an announcement appearance, clone a widget template and make changes in your copy:

1. Navigate to the widget form and open the hamburger menu.
2. Click Make a copy.
3. Change the copy, and use it on the portal pages.
4. Specify the newly created and configured widget in the Widget field of the related Widget Instance record. To do this, complete the steps below:
   1. Navigate to Portal Structure → Widget Instances.
   2. Select the created widget instance.
   3. Click the record to modify it.
   4. Specify your widget in the Widget field.
   5. Click Save or Save and exit to apply the changes.

List preview configuration

This widget is used to display a list of already created announcements, you can switch between them without reloading the page. It is recommended to follow the recommendations when filling in the attribute values. Use the example below as a pattern:

<previewList tableName="announcement" view="AnnounceView" elementCount="5" subjectColumn="subject"
dateColumn="sys_created_at" stateColumn="state" wrap="true" itemView="announceView">
  <ListHeader>
    <div>
      Announcements
    </div>
  </ListHeader>
</previewList>