Content list widget

Overview

The Content list widget is an out-of-the-box Next.js widget that you can use to render Sitefinity CMS content on the frontend. This is a single widget that can work with both static and dynamic content at the same time.

Scope

The Content list widget does not support Pages, Content blocks, and Media items.

Place the widget on the page

You can place a Content list widget only inside a Section widget.
To do this, perform the following:

  1. Inside a column from the Section widget, click Add widget here…
  2. Click the Content tab.
  3. Under the Content lists section, select the template that you want to use to display the list of content items.
    If you have created any custom temples, they also appear in this list. 
    Select between:
    • CARD LIST
    • LIST WITH IMAGE
    • LIST WITH SUMMARY
  4. Click Select content.

Select content to display

In this section, you choose the content to be displayed by the widget. 

  1. In the Content type dropdown box, select the module where you want to display content from.
    The list includes all built-in and dynamic modules, except for media modules content blocks, and pages.
  2. If the selected content type has more than one content providers, in Source, you can choose which provider you want to display items from.
  3. In the Selection range radio button, you can select which content to display, based on their publication date.
    There are the following filtering options:
    • All published items
    • From currently open parent
      This option is available only for hierarchical static and dynamic modules, such as Blog posts or Events.
    • Selected items
      Click Add (Select <type>) icon and select an item that you want to include in the list of items. 
      Repeated this step for as many single items as you want to include in the list.
  4. Under Filter by <parent type>, you can select patent items whose children you want to display.
    This option is available for hierarchical items only.
    1. Click Add (Select <type>) icon.
    2. Select the items whose children you want to add to the list. 
    3. Repeated this step for as many single items as you want to include in the list.
  5. Under Filter by category, you can filter the selected items by the category where they are classified.
    Click Add (Select categories) and select the categories that you want to filter by.
  6. Under Filter by tag, you can filter the selected items by the tags they are tagged with.
    Click Add (Select tags) and select the tags that you want to filter by.

    NOTE: The values for a single filter are interpreted as a logical OR. This means that, if you have selected two tags – tag1 and tag2, then the items tagged with either tag1 or tag2 are displayed on the frontend.

  7. In Date published dropdown box, select one of the following:
    • Any time
    • Last…
      Enter a number and select between day(s), week(s), month(s), years(s).
    • From – to
      Enter the exact date range of publication dates.
      Items that are published during this range, will be displayed in the widget.
  8. In List template, you can change the originally selected template.
    Choose between:
    • Cards list
    • List with image
    • List with summary
  9. In Field mappings, map the fields in the widget to the fields of the selected content type.
    For example, as Publication date for news, you can choose to display the creation date or the date that the news was last modified.

NOTE: If you apply multiple filters – for example, by tags and by parent, the filters are applied by using a logical AND. This means that all the conditions must be true – for example, News items tagged with tag Sports and Weather AND having been published in the last week.

You can change the logical operator to OR from the advanced settings of the widget.
For more information, see Advanced widget settings section below.

Configure the List settings

In this section, choose how to display the selected items on the page.

  1. In Number of list items, you can select between:
    • Use paging
      Enter the number of items per page that you want to display.
    • Show limited numbers
      Enter the total number of items that you want to display.
  2. In Sort items, select how to sort the items in the list.
    Choose between:
    • Last published
    • Last Modified
    • Alphabetically – ascending or descending
    • As set in Advanced mode.
      You can sort items, using custom expressions.
      For more information, see Advanced widget settings section below.

Configure the Single item settings

Single item settings define how individual items are displayed. Choose one of the following options:

  1. Open single item in...
    Select one of the following:
    • Auto-generated page
      When you click an item, it is displayed in an automatically generated page with the same layout as the list page.
    • Selected existing page…
      From the list of existing pages, select the specific page in which the item will be displayed.

      NOTE: To display an item in a page, the page must have a Content list widget, configured with the same content type, added in advance.

  2. In Single items template dropdown, select the template that you want to use to display the item, when it is clicked in the list of items.

Advanced widget settings

To open the Advanced settings for Content list widget, in the upper-right corner, click Settings (Advanced settings). 

Content locations

The Content list widget supports content locations automatically.

Limitations for more than one widget on a page

Support for more than one Content List widget on a page has the following limitations:

  • You can configure only one widget with the setting ContentViewDisplayMode – Automatic. The other widgets must be in Details or Master mode. This way, the other widgets do not interfere with the resolving of the segments from the URL of the currently opened Details item.
  • Multiple content widgets, config ured in Master mode, on the same page can support pagination separately from each other, if they have a different custom template, defined for their pagination parameters. This allows them to monitor various parts of the URL or different parts of the query string, so that when pagination is applied to one of the widgets, the others do not apply paging to their items.
  • If one of the widgets on the page is configured with ContentViewDisplayMode - Automatic, then the paging of the other content list widget should be configured with paging mode query parameters. 

Resolve detail items URLs

By default, the content list has a built-in functionality to open the detailed views of the items. This happens by appending the item’s default URL (or one of its redirect URLs) to the URL of the page. 

EXAMPLE: For the given page with content list widget on it and page URL ~/home that lists the item with URL - ~/2022/02/02/mynewsarticle. The page will be able to handle the following detail item URL: ~/home/2022/02/02/mynewsarticle

To efficiently resolve the possible detail item URLs that this page has, there is an underlying cache that is used to store the possible URLs of those items, including the redirect ones.

This cache has a maximum value of 1000 per item type – for example, 1000 per news item.
If you have more items, it is recommended to increase this limit. 

To do this, navigate to AdministrationSettings » Advanced » Pages » DetailView and add a new entry for the item type you want to configure. Increase the Max item cache count property to a higher value.


Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Classification widget