List v2

The new "List" component allows for the easy creation of dynamic as well as static lists of pages.  You can also build a dynamic list of assets using this component. 

For example, the List component can be used to create a dynamic list of child pages with a folder's hierarchy or a static list of arbitrarily defined pages on your website, or list out pages based on a keyword query or filtered by tags.  You can also build a list of files from an asset folder.

The List component can be used to create a dynamic list of items built from child pages, Search Queries, Tags, Assets, or a static list of arbitrarily defined items.

You can build a List by adding the List component to your page and then configuring the List Settings and the Item Settings.

• Build the list using: Determine how the list should be built using one of the options:
  • Child Pages: Returns pages. Define a Parent Page for the path and determine a Child Depth to traverse that many levels into the path.
  • Fixed LIst: Add individual items from Sites or the DAM. External links will be ignored.
  • Search: Enter a Search Query term to match against and input a Search In path for where to get results from.
  • Tags: Returns pages. Enter the Parent Page of the path and what Tag(s) to match against.
  • Assets: Returns DAM assets. Set an Asset Root Path from where to pull assets from, whether to Fetch all assets under the root path, and whether to Match against any Tags set.
  • Assets and Pages: Returns both DAM assets and pages in a combined list. Options to set are the same as both Child Pages and Assets options.
• Display Header: Allows you to group your list by a header, typically alphabetical or by Tag with the following options:
  • Group By: How the List is headings are grouped and displayed, by Alphabetical (A-Z) or by Tag. 
  • Header Style: Select a heading level to use for the Header Style, H2-H6.
  • Header Sorting: Select an order to sort the grouped headings in the table, Ascending or Descending order.

• Show Search on the Page: When checked, allows users to search the List v2 for results.
• Enable Sorting: When checked, allows sorting of the List v2 results by displaying/enabling an Options for Sorting section.
• Sort By: Displays when Enable Sorting is checked. Determine the method to sort results by. Sorting Options available are determined by the type of list being built:
  • Child Pages: Sorted by Most Viewed, Page Date, Page Publish Date, or Title. 
  • Fixed Lists: Sorted by Date or by Title. 
  • Search/Keyword Lists: Sorted by Date or by Title.
  • Tags: Sorted by Date, Most Viewed, Published Date, or by Title.
  • Assets: Sorted by Asset Date, Meeting Date, Most Downloaded/Viewed, Report Date, Revision Date, or by Title. 
  • Assets and Pages: Sorted by Published Date or Title.
• Sort Order: Displays when Enable Sorting is checked. Select either Ascending or Descending order.
• Show Sorting on page: When checked, a visible checkbox option "Show Descending" displays at the top of the list to quickly swap between Ascending and Descending sort modes.
• Enable Columns: When checked, the List v2 will display in a Column layout based on column options below.
• Column Type (Radio): Displays when Enable Columns is checked. Select either 2, 3, or 4 columns to display the List v2 as.
• Max Rows per Column Before Pagination: When set, forces pagination after the set number of rows. Leaving this field blank will default the List v2 to use "10." To display all items, make sure to disable pagination.
• Content Direction: Determine if the column grid populates sorted results horizontally (across) or vertically (top-to-bottom).
• Paginate after (Desktop/Mobile): Independently set, determine the number of items to display before pagination occurs in each device view.
• Max Items (Desktop/Mobile): Independently set, determine the maximum number of items the List v2 should return in each device view.
• Error/No Results Message: RTE field used to display a custom error message to users when the List v2 has an error or fails to return any results.
• ID & Class: Set an ID and/or Class to the component for CSS targeting.

• Show Title: When checked, displays the Title of results in the List v2.
• Show Date: When checked, displays the Published Date of results in the List v2.
  • Show Date as Icon: When checked, displays the shown date as an "Event Calendar/Feed"-styled icon.
• Show description: When checked, displays the description text set of results in the List v2.
• Show Image: Display an image and determine Image on Left, Bottom, or Top options. - A Default Image may be applied to all pages missing Images. Images for pages are pulled from that pages' Properties > Illinois tab > Image field.
• Link Items: When checked, displays options allowing for Linking of items.
  • Link Item Area: Set to either Title, Title and Date, or Entire List Item.
  • Open in new tab: When checked, opens items in a new tab instead of the same tab.
  • Display link as CTA: When checked, displays links as CTA text links instead of standard text links.
• List item Background Color: Set a background color to be applied to each individual list item.

In this Fixed List, we have selected three pages to display and we have enabled sorting in the List Settings. 

Under Item Settings, we have chosen to display the Title and Description and to Link Items using the Title only and to display as a CTA.

In this Tag List, we have searched for the tags "Social Events" and "Physical Events" within the pages of this Authoring guide which finds certain event items in our calendar. 

In this Search List, we have searched for the term "Illinois" within the pages of this Authoring guide.  
Under Item Settings, we have chosen to display the Title only and to link that title to the page.

In this Asset List, we have selected a folder of Files within our site assets, and we have enabled a 2-column layout.
Under Item Settings, we have chosen to display an Image, Title, and to display the Asset Icon. We've also given a background color on each item. 

Comparing the two Child list below, the list on the left has a depth of "1" while the list on the right has a depth of "2". Both have enabled Sorting but have not displayed that option on the page for the end user. That allowed for an alphabetical ordering of items regardless of when the list items were created.

Please note that both top level and child level items both display in the list set to a depth of "2" but there is no visual indication of hierarchy in the final list display. 

Authors even have the ability to set lists to pull from child pages and asset directories simultaneously into a blended list. The combined list below has the same page and asset configurations as the examples above.