List Component

Component name: List

Authors who can use: all

Templates/page types that can use component: all

Required or optional: optional 

1. Once on the desired page in Edit mode, add the List component by doing the following:
   1. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “List” in the search bar, or scroll to the List in the list. Double click to add to page.
   2. Option 2- on the left hand rail, navigate to the Components tab. Type “List” in the search bar, or scroll to the List in the list. Double click to add to page.

This List is manually authored. The author must add/remove each List item by editing in the authoring dialog.

1. With the edit wrench, open the component.
2. General tab
   1. Teaser Details fields
      1. List Title field: Optionally add a title to appear above the List.
      2. Title Heading Level dropdown: Select the heading level of the title, between H2-H6.
      3. Display Size of Title dropdown: Select a size for the Title display.
      4. Description field: Optionally add a description to appear above the List. This may contain context on the List entries and purpose.
      5. CTA Label field: Optionally add a CTA to appear above the List. The label here is the text that will appear on the CTA.
      6. CTA Link pathfinder: When the resident clicks the CTA, they will be led to this link. Link may be internal or external..
      7. List Link Type dropdown: Select either Internal/External Link, Phone Number, Email, or SMS Message.
   2. List Columns selector: Select between 1-4 columns to display.
3. List Details tab
   1. List Type dropdown: Select whether the List should include images, icons, or neither. Default: None.
   2. Default List fields
      1. Built List Using dropdown: Select whether the List should be built internally or manually. Default: Internal.
      2. Internal Pages: All List links will be pages pulled from AEM.
      3. Manually (Provide details for each list item): All List links will be added manually, as some may be external or need additional context.
      4. Recently Updated Pages: see next section on dynamic Lists.
      5. Recent Press Releases: see next section on dynamic Lists.
4. If building internal List
   1. Add multifield: Click Add for every item that will display in the List.
   2. Link pathfinder: Use the pathfinder field to navigate to a page within AEM that should display in the List. The page title will appear on the List. If Image or Icon was selected in Step 3.1, and the page has an image or icon in its Page Properties, those will display as well.

1. Add multifield: Click Add for every item that will display in the List.
2. Title field: Add a title for each List entry.
3. Pre-title field: Optionally add a pre-title to appear above the title.
4. Description field: Optionally add a description for each List entry.
5. List Link Type dropdown: Select either Internal/External Link, Phone Number, Email, or SMS Message.
6. Link pathfinder: Add a link for each List entry. Links may be internal or external. For internal links, use the pathfinder field to navigate to the page within AEM that should display in the list.
7. Image List only- image fields
   1. Leading Image: Drag and drop from the side rail, or browse for an image to upload.
   2. Decorative image – no alternative text checkbox: Images which don’t convey additional meaning do not require alternative text for accessibility. Default: unchecked. When unchecked, enable the below fields:
      1. Alternative text for accessibility field: Add alternative text.
      2. Inherit from description of asset checkbox: If selected image already has alternative text defined in Assets, use this text. If unchecked, the “Alternative text for accessibility” field will be enabled. Default: unchecked.
8. Icon List only- icon fields
9. Leading Icon: Enter an icon from the Remix Icon library: https://remixicon.com . Reference Using Icons user guide for more detail.
10. Divider checkbox: When checked, show a line between each List item. Default: checked.

6. Style tab

1. List Style dropdown: Select whether the List should display as a regular List, or in Tile format. Note that Tiles only contain the title and icon/images; no other text will appear. Default: List.

2. Remove Padding dropdown: Select whether bottom padding should display (None) or be removed (Remove Bottom Padding). Default None.

This List is dynamically authored. The author must select a parent page, and the List will update itself when child pages are created or modified.

1. With the edit wrench, open the component.
2. General tab - no changes from above.
   1. List Details tab
   2. List Type dropdown: Select whether the List should include images, icons, or neither. Default: None. None is the best option for dynamic Lists.
   3. Built List Using dropdown: Select whether the list should be built internally or manually. Default: Internal.
      1. Internal Pages: see prior section on manual Lists.
      2. Manually: see prior section on manual Lists.
      3. Recently Updated Pages (dynamically updated): Lists pages that have been created and published, or modified and published.
      4. Recent Press Releases (dynamically updated): Lists pages that have been created and published based on their date in Page Properties.

4. If building Recently Updated Pages List

1. Parent Page Folder Link pathfinder field: Enter the link to the parent page. Child pages under the parent will populate the List.

2. Number of List Items field: Enter the number of items to display in the List, between 2-10.

5. If building Recent Press Releases List

1. Parent Page Folder Link pathfinder field: Enter the link to the parent page. Child pages under the parent will populate the List based on each page’s date in Page Properties, displaying in reverse chronological order.

1. In Page Properties, this is the date picker field “Date of Press Release,” which is found in the CoPA tab. Reference Agency News Article user guide for more info.

2. Number of List Items field: Enter the number of items to display in the List, between 2-10.

6. Divider checkbox: When checked, show a line between each List item. Default: checked.

6. Style tab – no changes from above.

7. Publish the page. Dynamic Lists are best viewed in publish mode. They may take several minutes to refresh as changes are pushed live.

1. If unable to publish, use the Publish to Preview workflow. See Workflows user guide for more info.

8. When a child page is created/modified, and then published, the page will automatically jump to the top of the List (dependent on Page Properties for Recent Press Releases).