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:  by setting the root path, building a fixed list, search by keywords, or searching by tags.
  • Child Pages: If you select Child Page, you will need to select a parent folder from which to pull items in your list. and then select the dept of which you want to pull items.
  • Fixed LIst: Browse and Choose each item you want to include in your list. 
  • Search: Select the Search terms you want to use and the Root Folder in which you would like to conduct your search.
  • Tags: For building a list based on tags, first select the Parent Page within which you want to include tags.  Then select the tags you want to include and specify if you want to include items in your list that only include ALL of the tags you chose, or if you want to include items that include any single tag.    
  • Assets: Select the folder of Assets you want to include in your list and specify if you want to include assets in just this folder, or all assets under this root folder. You can also opt to filter by specific tags, matching ANY or ALL.
  • Assets and Pages: This option allows you to build a combined list of both assets and pages. You set this up by using the "Assets" and "Child Pages" options outlined above. 
• Display Header: Allows you to organize your list by a header, typically alphabetical or by Tag with the following options:
  • Group By: Alphabetical or by Tag    
  • Header Style: Select a CSS Stylling for your headers
  • Header Sorting: Select Ascending or Descending order
• Show Search on the Page: Check this box if you would like users to have the ability to search your list
• Enable Sorting: Check this box if you would like users to be able to sort your list. Sorting Options by the type of list you have selected:
  • Child Pages: Can be sorted by Most Viewed, Page Date, Page Publish Date,or by title. 
  • Fixed Lists: can be sorted by Date or by Title. 
  •  Search/Keyword Lists: can be sorted by Date or Title.
  • Assets: Sort by Asset Date, Meeting Date, Most Downloaded/Viewed, Report Date, Revision Date, or by Ttile. 
  • Tags: Sort by Title, Most Viewed, Date, or Published Date. 
    
    Once you choose how you would like to sort you will be able to choose if you want to default to Ascending or Descending order, and whether you would like users to change sorting by selecting "Show Sorting on Page.
• Enable Columns: checking this allows you to display your list in Columns
  • Select 2, 3, or 4 columns
  • For large lists, set a maximum number to display before pagination
  •  Content Direction: Set your columns to list either horizontally or vertically
• Enable Filters: This allows you to add filters to your list that allow the users to control filtering. Settings vary depending on what type of filters you select:
  • Title, Description, or Type:
    • Equal or Not Equal to the keywords you enter.
    • Show Filter on the page for the end user to control
  • Audience, Category, and Topics
    • Select an audience tag.
    • CHoose if your list items should match ALL tags or ANY tag that you set.
    • Decide if you want to display these tags to your audience.
• Paginate after: determine how to paginate your list for both Mobile and Desktop. 
  Please note that pagination will not be available for lists where header rows are enabled. 
  
• Max Items: determine the maximum number of items to display for both Mobile and Desktop

You can configure your list so that each item displays the following:

• Show Title
• Show Date: Will display as "Day, Month DD, YYYY"
• Show Asset Icon.  Asset Icons exist for the following types of assets:
  • PDF
  • Word Document
  • Powerpoint Document
  • Excel Document
  • CSV File
  • TXT File
• Show Description
• Show Image: Images have some display options
  • Show image on the Left, Top, or Bottom of listing
  • Set a default image to display in case your item doesn't have an image.
• Link Items: Determine how you want to link your list items:
  • Link Item Area: Select a specific item element to link or select to link the entire List Item
  • Determine if item should open in a new tab
  • Display as CTA will display a Caret next to your list item
• Link Item Background Color will display beneath each item to help distinguish List items from each other.

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 "Physcial 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.