University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

List Builder Component

Create a wide variety of lists, teasers, or an entire reveal of other pages and shared content that can be set up manually or automated by the UBCMS.

New Brand Features

Teaser thumbnails will now be square in most cases to better support portraits and landscapes. Authors may wish to adjust their images.
> read more about the digital brand transition 
read more about changes to this component

The component as it is first displayed on the page.

The component as it is first displayed on the page.

Using This Component

Add the component to the page. You will initially see only the List tab. A third tab appears after the Build list using option is chosen.

Split long lists into several pages

Lists with more than 500 teasers will generate a server error and not show any results. More details in this Known Issue.

List Tab

Standard List Options

The component opened for editing showing the initial List tab settings.

The component opened for editing showing the initial List tab settings.

Here you will choose the type of list, as well as additional advanced settings.

Build list using: This drop-down menu asks how you want to build your list. You have the option to build it using:

  • Advanced search: Do not choose Advanced Search unless you are familiar with writing queries. Build a list using Java API and REST API. Advanced search accepts a query description, and creates and runs an XPath query.
    • An Advanced Search tab will automatically appear.
    • If desired, the XPath query will filter the result set and extract facets.
    • Query descriptions are made up from a set of predicates.
    • For each predicate type, there is an evaluator component that handles that specific predicate for XPath, filtering and facet extraction.
    • The REST API provides access to these features through HTTP with responses sent in JSON.
  • Child pages: Populate the content of the list with the pages found in a segment of a website.
    • A Child Pages tab will automatically appear. Click the magnifying glass icon to the right of the Parent Page field to select a folder from which to display pages in your list. (If you build your list with child pages you do not have the option of displaying them in the order of your choice.)

Be careful not to list the parent page here by mistake--it can create a loop.
Read more

Do not link to DAM assets using a relative path (/content/dam/...). For these you must use a File Download component.
> read more about this Known Issue

  • Curated list: Build a list with selected choices. Requires you to manually add pages to the list (and maintain).
    • A Curated List tab will automatically appear. Click the magnifying glass icons to select Web pages to be displayed.
    • Use the Up and Down buttons to specify the order that the web pages will be displayed in the list. The minus (-) buttons allow you to delete web pages while the + button enables you to add Web pages.
  • Another list: Populate your list using another previously created list. This is useful if you want to mirror items displayed on another page, while perhaps limiting the amount of items displayed.
    • An Another List tab will automatically appear. Click the arrow at the right of the List Reference field to select another page from which to pull a list to imitate:
      • Click on the field to pull up a browser window of all the pages in your UBCMS.
      • Select the page containing the list you want to use.
      • The browser will display all usable components on the right hand side of the browser. Choose the desired list and click OK.
  • Search: Use a particular word or phrase to build a list. Any page that contains the searched-for term will be included in the list. Meta-data including tags can also be found in this way -- read more about searching for tagged pages.
    • Search query: Enter a predetermined unique keyword or phrase; e.g. "ubgreen-event" in our example.
      This is optional, but with no keyword you will display ALL events in the calendar. More complex queries are possible. (See Tips for Building a List Search Query.)
    • Start in: Click the magnifying glass icon to select which page, and subsequent child pages, the search is confined to. Leave the field blank to search all pages in the UBCMS.
  • Tags: Build a list using the tag words assigned to certain pages. (Read more about Tagging Your Shared Content.)
    • A Tags tab will automatically appear. In the Tags field, type the tags you would like to use or select the tags from a drop-down menu by clicking on the downward arrow sign to the right of the field.
      • In the Limit to path field, choose the scope of the list by selecting the page, and subsequent child pages, to which you wish to limit the list. Leave this field blank to populate the list using the content of your entire UBCMS. Web pages with tags matching your selections will then be displayed in your list.
      • Be advised, items in lists built using tags are not sorted in the normal default order even if they all originate in one folder. If you want the items to appear in a specific order, specify that in the Order by field.
    • Tagged pages can also be listed using the Search option (read more), which allows more advanced control.

New window: Select so each clicked page is displayed in a new browser window.

'Open links in new window' and 'Display as: Full content' are incompatible and will disable each other when selected.

Link Label Icons

When New Window is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website.

And if the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)

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.
    • Medium Call to Action: The links are bulleted with the Call to Action component’s circular, exclamatory icon (medium size).
    • Large Call to Action: The links are bulleted with the Call to Action component’s circular, exclamatory icon (large size).
    • Compact: The links are shown in a simple comma-separated list.
    • 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.
    • Grouped by Title: Links are grouped alphabetically by the first letter of their titles and that letter precedes each group; e.g.
      T

      > Terminator
      > Trains, Planes and Automobiles
  • 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).
    • With Dates: Instead of bullets, an image from each page appears to the left of each page’s title and its date of creation. The page’s introductory paragraph appears below.
    • Grid: Displays the list as a gallery of images. Each page is represented by an image with its name beneath the picture as the link.
    • Directory (with interests): Meant to be used with the Faculty Profile Template, it reveals each person's name, contact details, titles, and research interests.
  • Content:
    • Full Content Displays the full content of each page in the list.

'Display as: Full content' and 'Open links in new window' are incompatible and will disable each other when selected.

Settings available for Display As.

Settings available for Display As.

Order by: There are several ways in which you can order your list:

  • (blank): The default option sorts the list by the natural page order in the Website Console. This only applies to lists that pull entries directly from the Console, such as Child Pages.
  • postDate: Arrange the list items by the date the pages were created for pages created using the News Article Template or for pages that include the Date Created component. Using postDate for other pages will result in a randomized order.
  • jcr:created: Order the list by the date of creation, with the earliest date of creation beginning the list.
  • cq:lastModified: The list will be ordered by the date of modification. The page most recently edited will appear on top.
  • cq:template: The order will be established according to its arrangement in the Page Tree, sorted by template type used on each page.
  • jcr:title: The list is ordered alphabetically by title.
  • random: Each time someone views the page, they will see a random order to the list.
Settings available for Order By.

Settings available for Order By. Custom options can be type din manually.

Reverse order - Check the box to select whether you would like to inverse the order selected in the Order by field.

Advanced List Options

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.

Limit: Choose a maximum number of entries (optional).

  • If left blank, the default value is 100; for example, if you leave it blank, no more than 100 items will be available.
  • If you set the Limit value smaller than the Paginate after value, users will never see the next page navigation!

If you want all items to appear in the list, do not leave the Limit field blank. Instead, enter a value that you anticipate will meet your needs; for example, 200, 500, etc. (The News Center has used 9999 as a 'very large number' because their archives date to 1990.)

Mobile limit - Maximum number of items to be displayed on a small screen device.

  • Leave blank to use the same limit as desktop.
  • Not compatible with pagination.

Paginate after - This setting turns on paginated returns, with the maximum number chosen displayed for each page (optional).

  • If left blank, the page will display all entries in the list.
  • If defined, a button labeled Next will appear at the bottom of the list on the first page. The subsequent pages will also include a Previous button until the final page of entries.

Display in Columns - Allows the list to be split into more than one column.

  • Choose between 1 (default), 2, 3 or 4.
  • Not compatible with these display styles: Grouped by Date, Compact, Teasers or Full Content.

Exclude current page - Do not display any entries that link to the page on which the list is shown (optional).

Enable scheduling - Select to enable shared content Scheduling.

  • Scheduling can be used to automatically change the content in a list over time.
  • When scheduling is enabled, only pages whose “Featured on/off time” (as set in each page’s Page Properties) will be shown in the list.
  • Scheduled lists can be previewed for a given date and time by right-clicking the list and choosing “Schedule Preview”.
  • Unlike Delayed Activation or Scheduled On/Off Time, Featured On/Off Time does not affect the page’s visibility elsewhere on the site; it is still visible in navigation or by direct link.
  • Pages with “Featured on/off time” set must also be activated.
  • Examples of uses for list scheduling:
    • Hide an application link after a deadline has passed.
    • Switch from one featured image to another in a slideshow each day (set the start time of one item to the end time of another).

Host page - Specify on what page of your site you would like any shared content shown. By default will be the current page.

Be Careful Using Another Site's Host Page

If you use another site's page as a host page, your list will be indexed with that other site's pages, and appear in tehri search reults.

Empty message - Choose a suitable message that will display if the list is currently empty. (In the example shown above, it will say "Sorry, there is no news today.")

The opened for editing showing the initial List tab's advanced settings.

The opened for editing showing the initial List tab's advanced settings.

New Brand Features

At a Glance
Teaser thumbnails will now be square.
Authors may wish to adjust their images accordingly.

Overview

There are no functional changes, but teaser thumbnails will be square in most cases to better support portraits and landscapes.

Authors may wish to adjust these images. This is an opportunity to evaluate how the page presents in lists and if a different image is needed for teasers (e.g. a custom crop to show more detail in a smaller size or an alternate image that works better as a small thumbnail). When present, the teaser will preferentially use an image in the Page Properties. Consider adding a customized image there in addition to what is on your page, or recrop what you have previously loaded there to work better as a square thumbnail.

Restrictions

  • Mobile limit is not compatible with pagination.

Advanced - Customizing a Teaser

Customizing a Teaser

By default, the following is shown when you choose to display your list as these types of teasers:

  • Teasers with Images: The first image from each page and the page’s full introductory text is displayed. (If no Intro Text exists, the first paragraph of the Body Text closest to the top of your page will be displayed.)
  • Teasers without Images: The page’s full introductory text is displayed. (If no Intro Text exists, the first paragraph of the Body Text closest to the top of your page will be displayed.)
  • News Teasers with Date: The first image from each page and the page’s full introductory text is displayed. (If no Intro Text exists, the first paragraph of the Body Text closest to the top of your page will be displayed.)

To override the default and use custom text in your teaser: 

  1. In the Websites console, under the Page Tree, locate the page from your list that you wish to have custom text.
  2. Double-click it to begin editing it.
  3. Click on the Page tab (the second tab from the left) in the Sidekick.
  4. Click Page Properties.
  5. Click the downwards arrow next to More Titles and Description.
  6. Enter the custom text that you wish to appear in the teaser.
  7. Click OK. The page’s introductory text will no longer be displayed in your teaser. Instead, your custom text will appear.

To override the default and use a custom image in your teaser:

  1. In the Websites console, under the Page Tree, locate the page from your list that you wish to have custom text.
  2. Double-click it to begin editing it.
  3. Click on the Page tab (the second tab from the left) in the Sidekick.
  4. Click Page Properties.
  5. Click the Image tab.
  6. Drag the image of your choice into the Image tab.

Click OK. The first image on the page will no longer be displayed in your teaser. Instead, the image you selected will appear.

Advanced Use - Generating RSS

Any list can be used to build an RSS feed so people can pull your content into their own website.

  1. In Author, navigate to the page with the list you would like to turn into an RSS feed. (The page with the list must be published.) e.g. https://ubcms-author.buffalo.edu/cf#/content/demo/templates/news_and_events_list.html .
  2. Modify the URL of the page in the browser by doing the following:
  3. When the browser refreshes, you will now see a series of components listed.
  4. Select the List you are interested in; e.g. 'newslist,' 'eventlist,' 'list', 'list1.'
  5. Again, modify the URL in the browser by adding ".rss" to the end of the URL. Your URL will now look like https://ubcms-author.buffalo.edu/content/demo/templates/news_and_events_list/_jcr_content/par/list.rss .
  6. Your browser should now show an RSS feed of your chosen list.
  7. If you like the look of the feed, you can use this URL after replacing "ubcms-author" with "www." Your URL will now look something like http://www.buffalo.edu/content/demo/test/_jcr_content/par/list.rss.

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See An Example:

Master Class Resources:

Related Video:

Editing a Teaser in a List. Video courtesy of School of Public Health and Health Professions.

Tip: Learn how to make a quick link to the top of your page.

Related Components:

Last reviewed:

June 19, 2017