University at Buffalo (UB)
Transforming UB’s digital communications.
Dynamic List Builder Component
Search, landing pages and tag clouds in conjunction with other Dynamic List components.
On this page:
Last reviewed: November 27, 2023
Accessibility
- List Teaser images require Alt text.
- Beware of duplicate link text.
- Link text should be meaningful.
- Use 'Open in New Window' sparingly.
This is one of a series of Dynamic List components that are designed to work together, centering on this Dynamic List Builder.
It is always required for a dynamic list; the other (optional) elements are listed in Related Components.
Overview of the dynamic list example, identifying the various components in use.
Overview
Dynamic Lists are user-centric in the sense that the content is prepared on-the-fly based on user actions (e.g. a search query or a link that is clicked), and does not need to be previously prepared as standard UBCMS pages.
For example, a link to 'see more on this topic' could drive a tagged search. And this list of topic links can be generated automatically. For example, a standard looking search could evolve into a faceted search with successive layers of filters as selected by the user.
A course catalog search "anthropology" could then allow choice between the semester of availability, time offered, online versus classroom setting, etc., and individual filters can readily be removed if they are no longer desirable. All of this functionality and content can be delivered automatically.
Using This Component
This component has only one tab.
Be Careful With the 'host page' Setting
This component is intended to link to shared content hosted on another page. The linked content CANNOT be hosted on your home page. If you use the default hosting setting, the home page will simply refresh, and the linked content will not be displayed.
> Read more about use on a home page
Technical Restrictions
- This is one of a series of Dynamic List components that are designed to work together. The others are listed in Related Components (right sidebar).
Configure - Main Settings
Click the wrench icon to 'configure' these settings.
Dynamic List Tab
The component opened for editing, showing the topmost settings.
Start in - Click the magnifying glass icon to choose where to focus the search. Child pages but not the selected parent will be included.
Leave blank to use the current page.
Tag filter - Select one or more tags to limit the pages that are returned. All tags must be matched for a page to be included.
Limit / Page size - Set a maximum number of items to display. (It is possible to set up pagination when this is used in conjunction with the Dynamic List Pager.)
Start at - Select how many items you would like to skip at the beginning of the list (example: '5' will skip the first four items and begin the list at the fifth item). Left blank, the default value of '1' will result in the list displaying every item in your list. This setting can be useful if you wish to feature several items in one group, perhaps at the top of your news page, or on your homepage, and NOT have them repeated with the rest of your list displayed elsewhere on your site.
Title - Add a descriptive title as a user hint. It is only displayed when the list first appears (e.g. "Matching Titles," or "Search results").
Empty text - Choose a suitable message that will display if the list is currently empty. (By default it will say "No matching pages.")
The component opened for editing, showing the remainings ettings
Display as - This drop-down menu asks how you would like your list to be displayed. Lists fall into the general categories of Links, Teasers and Content:
- Links - Display the pages in the list as underlined links. Clicking on one of the links will redirect the user to the page selected. The types of links available are:
- Plain (default) - If no other option is selected, the list will automatically be displayed as a set of plain links. They are bulleted with the right angle bracket (>) symbol.
- Call to Action - The links are bulleted with the Call to Action component’s circular, exclamatory icon (large size).
- Grouped by Date - The un-bulleted list will be displayed with emphasis on the separate entries' time of creation. The date appears as the heading for each entry while the exact time of the page's creation and the link to the page are placed beneath.
- News (with dates) - This option also displays an un-bulleted list with the date of creation. A simpler format than Links: Grouped by Date, the title of each entry is followed by the date of creation all on a single line.
- Teasers - Display a preview of the information that's on the pages from your list. The types of teasers available are:
- With Images - Instead of bullets, an image from each page appears to the left of the page’s title. The introductory text of each page is displayed beneath the title.
- Without Images - Displays the title of the page with its introductory paragraph. Items are bulleted with the Call to Action component’s circular, exclamatory icon (large size).
- News (with dates) - Instead of bullets, an image from each page appears to the left of each page’s title and its date of creation, and the page’s introductory paragraph appears below.
- News (with dates and feature story) - Instead of bullets, an image from each page appears to the left of each page’s title and its date of creation, and the page’s introductory paragraph appears below. Plus the image on the first story is displayed larger (like the Feature option in a News List).
- Grid - Displays the list as a gallery of images. Each page is represented by an image with its name beneath the picture.
- Search Results: With Excerpt - Instead of teaser description, show portion of page that matches search query.
- Content: Full Content - Displays the full content of each page in the list.
New window - Select so each clicked page is displayed in a new browser window.
Require query - Choose between:
- Always show list (default)
- Only show list when user searches. Used in conjunction with Dynamic List Search.
Order by - Here are some ways you can order your list entries. Not all appear in the dropdown -- contact the DCT Help Team if you wish to explore other options.
Note: By default, this field is blank, but this list needs an value to make the results predictable for a Dynamic List.
- cq:lastModified - Results displayed chronologically by page last modification date, with the page most recently edited on top.
- cq:template - Not compatible with Dynamic Lists.
- jcr:created - Results displayed chronologically by page creation date, with the earliest created page on top. The results can be confusing because the order in Author will often not match that on the live site. The order of live pages is by first activation date, not original creation date in Author. Subsequent reactivations have no impact, but a page that is deactivated and then reactivated will receive that latest activation date.
- jcr:path: Results displayed alphabetically by each page's full path in the UBCMS (/content/www/abs/page-name). For pages all in the same folder, it effectively alphabetizes by page name.
- jcr:title - Results displayed alphabetically by page title.
- navTitle: Results displayed alphabetically by each page's Navigation Title (as set in Page Properties).
- postDate - Results displayed chronologically. For News Article Template pages, will be by by date created. For other template pages, requires use of the Date Created component. If not all pages have a compatible date, the display order will be unpredictable.
Reverse order - Check the box to select whether you would like to inverse the order selected in the Order by field.
Primary - If there are several of these components on this page, the one marked primary will be selected by dynamic list components on other pages.
Host page - Specify on what page of your site you would like any shared content shown. By default will be the current page.
Accessibility Concerns
Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.
Images displayed as teasers in lists require Alt text. Normally this is supplied in the original listed pages, often in shared content, and in some cases, in the metadata of the referenced images in Assets.
Best practice, Alt text should be added whenever an image is uploaded into Assets.
Additional Reference:
To avoid confusion, every unique link on a page must have unique link text. It is not hard to compose comprehensive text for manually coded links, but links that are generated automatically by lists and carousels must also be different, which takes more planning.
Also consider Call to Action, Button, and Tabs components, as well as the pagination and "see all" links in the Event and News List components which may have the same labels and appear more than once on a page. (Some of these have additional label settings that can help prevent this redundancy.)
Best practice: when creating shared content pages that will be used in lists, use distinct titles, or set the Navigation Title in the page Properties so none of your pages have the same title if they are displayed together. Also take advantage of additional label settings in other components when you will have several on a page.
Additional Reference:
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Additional Reference:
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:
- Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
- Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.
Additional Reference:
If you wish to deliver news stories and other mixed shared content content consistently and effectively through a home page slide deck, we recommend the following best practice steps.
- Lists and carousels are designed to 'host' linked stories somewhere else in your site, such as a news page. But the default Host Page setting is blank, which means if you do not supply a preferred host page, it will try to host the linked content "on the same page as the component” (i.e. your home page), and the UBCMS will not allow you to host other content on a home page. (Home pages are critical. This prevents accidentally breaking them or confusing visitors by replacing the expected content. It also prevents third parties to 'overpower' your home page with their own content... all very undesirable.) There is a solution.
- Choose a suitable page on your site to act as a host page, perhaps your news page (e.g. /content/www/your-site/news).
- Enter the path to this page in the Advanced settings for the slide deck.
- Once this is set, any headline clicked in the slide deck will then shunt people to that linked content, displayed on your specified host page.
- Choose a suitable page on your site to act as a host page, perhaps your news page (e.g. /content/www/your-site/news).
- Many carousels (and slide decks) are meant to drive shared content created using the Highlight Template. This is the ideal way to achieve full and consistent functionality for all of the displayed content. This is easily attained for content that your own unit creates, but there are times when desired content has been built using other templates (e.g. News Article) or is not shared content. There is a solution.
- Build ‘teaser’ pages in your own site's shared content area (perhaps in a folder called “home page slide deck”).
- In that folder, create a shared content page using the Highlight Template for every item you wish to feature in your homepage slide deck. For each, You will need to add a picture, title, and some text, which you can repurpose from the story for consistency.
- If you create a call to action within the shared content page using the List Builder (e.g. "read more about Susan's story") and want that call to action link to go to the same place as the main headline, you MUST add the same host page path in the List Builder component as you are using on your home page's slide deck (e.g. /content/www/your-site/news). Otherwise your call to action will display the story in its natural location, while your headline will display it on your preferred host page.