# Dynamic content widgets

## Use a dynamic content widget

If you have created and activated a dynamic module, the system automatically creates a separate widget group for the module and adds one widget for each content type. You use the widget to select which of your dynamic content to display on the website and to choose how to display the content. There are two types of widgets – the first type is used to display the top-level content types, the second – to display all other content types.

After you have dragged the widget on your page, the widget automatically displays all published dynamic items.

> info **NOTE**: If you have multiple sites and you create a module with the *Module builder* **after** you create a site, it is **not** automatically activated for this site. If you want to use it, you must manually activate it. For more information, see [Edit site properties and configure site modules](https://www.progress.com/documentation/sitefinity-cms/edit-site-properties-and-configure-site-modules) » *Configuring the modules of a site*.

To configure the display of the items, click *Edit* button in the upper-right corner of the widget.\
The *Edit* window appears where you can configure the widget.\
By default, the widget designer has three views:

* Content tab
* List settings tab
* Single item settings tab

### Display more than one dynamic widgets on the same page

If on one page, you want to have more than one  dynamic module widget, either from the same module, or from different dynamic modules, you must tell the system how to distinguish them by setting the *UrlKeyPrefix*.\
To do this, perform the following:

1. Open the widget’s *Edit* window.
2. Click the *Advanced* button, in the lower-right corner of the dynamic widget, then click the *Model* button.
3. In the *UrlKeyPrefix* field, enter a prefix of your choice. For example, if the widgets are from two different modules, you can enter the name of the module.\
   For more information about advanced configuration options, see [Advanced configuration of widgets](https://www.progress.com/documentation/sitefinity-cms/web-forms-deprecation-with-sitefinity-cms-14.1).
4. To confirm the changes, click *Save*.\
   The *Edit* window closes and the widget is configured to display the  dynamic items you have selected.

> info **NOTE**: If your site is multilingual and the page you are editing is synchronized with another translation, when you edit the widget, the *Save All translations* button appears. If you click it, the current widget configuration will be saved to all translations. On the other hand, if you click *Save*, the widget configuration is saves only to the current translation, but the pages are still synchronized. If your pages are synchronized, you can have different widget configurations, but you cannot have different widgets.

## Content tab

On this tab, you choose which dynamic items to display.

> info **NOTE**: If you are using multisite management and the dynamic module uses data sources from more than one site, you must first choose the source from which you want to display items.\
> For more information, see [Multisite](https://www.progress.com/documentation/sitefinity-cms/multisite-manage-multiple-sites).

This tab has different functions, depending on the dynamic content type that it is displaying.

### Content types without parent type

These are content types that are at first level in the hierarchy of content types of a module and do not have a parent type.

In *Which \<item name> to display?* radio button, select one of the following:

* *All published \<content items>*\
  All created and published items are displayed.
* *Selected \<content item>…*\
  To manually select the items that you want to be displayed, click the *Select* button and select the items you want to be displayed. To confirm your selection, click *Done selecting*.
* Narrow *selection by*\
  You can narrow the displayed items by dates and by classification.\
  To use classifications to filter the items displayed by the widget, you must first have added the classification as a custom field to the content type.\
  You can use the standard classifications – *Tags* and *Categories*, or you can add a custom classification.\
  For more information about adding a classification to a dynamic content type, see [Create custom fields](https://www.progress.com/documentation/sitefinity-cms/create-custom-fields).

### Content types that have parent type

These are content types that are on second, third, etc. level in the hierarchy of content types. These types have a parent that can be used to filter their items.

1. In \*Which \<item name> to display?\*radio button, select one of the following:
   * *From all \<parent content type>*\
     All items from all parent content type items are displayed.\
     For example, if blogs is parent of blog posts – all published posts from all blogs are displayed.
   * *From* *selected \<parent content item> only…*\
     You select a particular parent item, whose child items to display.
   * *From currently open \<parent content item>*\
     Use this option when you need to display the hierarchy of content items.\
     For example – on the left display a list of parent items, on the right – display a list of child items. When you click a parent item on the left, on the right, the system filters only its child items.

     You have the following two scenarios:

     * Filter by direct parent item\
       If the widget resolves a parent item from the URL, it filters all child items and display only these that are children to the resolved parent item.
     * Filter by parent item resolved from the URL of any of its descendants.\
       The widget displays child items from a parent item, when a descendant of another child type is opened in details view.\
       For more information, see *Display hierarchy of content items* below.
   * *Select \<content item>*\
     To manually select the items that you want to be displayed, click the *Select* button and select the items you want to be displayed. To confirm your selection, click *Done selecting*.
2. Under *Narrow selection*, select one of the following:
   * All published *\<content items>*\
     All created and published items are displayed.
   * Selection of *\<content items>*:\
     You can narrow the displayed items by dates and by classification.\
     To use classifications to filter the items displayed by the widget, you must first have added the classification as a custom field to the content type.\
     You can use the standard classifications – *Tags* and *Categories*, or you can add a custom classification.\
     For more information about adding a classification to a dynamic content type, see [Create custom fields](https://www.progress.com/documentation/sitefinity-cms/create-custom-fields).

## List settings tab

On this tab you choose how to display the items you have selected.

* *Use paging*\
  Sitefinity CMS divides the items into pages.\
  In the input field you specify how many items per page you want to display.
* *Use limit*\
  Sitefinity CMS displays only a limited number of the items you have chosen to display.\
  In the input field, you specify how many items you want to display.
* *No limit and paging*\
  Sitefinity CMS displays all the items that you have selected in *Content* tab.

In *Sort \<item name>* dropdown box, select a sorting criterion for the items.

In *List template*, select the template which is used to display the items on the webpage. For more information, see [Create and edit widget templates](https://www.progress.com/documentation/sitefinity-cms/create-and-edit-widget-templates-mvc).

## Single item settings tab

On this tab you choose the way to display the items.\
In *Open Single item in…* radio button, select one of the following:

* *Auto-generated page*\
  When an item is clicked, it is displayed in a page, which is automatically generated and has the same layout as the current page.
* *Selected existing page…*\
  You select a page from the existing pages with certain layout where an item will be displayed when clicked.

> info **NOTE**: To display the dynamic item, the page you have selected must have your dynamic widget added.

1. Click *Select* or *Change*.\
   In the treeview, select the page where you want to display the item.
2. Click *Done selecting*.

In *Detail template*, select the template that is used to display the items on the webpage. For more information, see [Create and edit widget templates](https://www.progress.com/documentation/sitefinity-cms/create-and-edit-widget-templates-mvc).

## Filter and sort content items in the widget

You can filter and sort the dynamic items, which the widget displays, using fields of the item. Perform the following:

1. Click *Advanced* button in the lower-right corner of the window.\
   The advanced editing mode opens.
2. To filter the items, in *FilterExpression* input field, enter the desired filtering expression.\
   The field supports `AND` and `OR` Boolean operators.\
   For example, enter `Visible = true AND Status = Live`.\
   For more information, see [Filter expressions for content items](https://www.progress.com/documentation/sitefinity-cms/web-forms-deprecation-with-sitefinity-cms-14.1).
3. To sort the items, in the *SortExpression* input field, enter the desired sorting expression.\
   The field supports operators `ASC` for ascending and `DESC` for descending.\
   For example, enter `PublicationDate DESC`.

## Filter dynamic content items

When you have multiple dynamic content types, you can create various structures and offer filtering according to parent type on the frontend.

### Direct parent filtering

> success **EXAMPLE**: You have a dynamic module named *Travelling Agency*. Your hierarchy of dynamic types is *Cities »* *Hotels*. You want to filter hotels by city – when you click a *City*, all *Hotels* in this *City* are displayed.

1. Drop the *Cities* and the *Hotels* widgets on the page.
2. Open the *Hotels* widget for editing.
3. On *Content* tab, select *From the currently open city*.
4. Save your changes.

### Filter by explicitly set parent

> success **EXAMPLE**: You have a dynamic module named *Travelling Agency*. Your hierarchy of dynamic types is *Countries* » *Cities* » *Hotels*. You want to filter *Hotels* by *Country*. *Country* is nor a direct parent, but a grandparent of *Hotels*. When you click a *Country*, all *Hotels* in this country are displayed.

1. Drop the *Countries* and the *Hotels* widgets on the page.
2. Open the *Hotels* widget for editing.
3. On *Content* tab, select *From the currently open country*.

### Multilevel filtering

> success **EXAMPLE**: You have a dynamic module named *Travelling Agency*. Your hierarchy of dynamic types is *Countries* » *Cities* » *Hotels*. You want to filter *Cities* by *Countries*, *Hotels* by *Country*, and *Hotels* by *Cities*. When you click a *Country*, all *Cities* in this *County* are displayed and all *Hotels* in this country are displayed. When you click a *City* – the list of the *Hotels* in the *Country* are filtered by this *City*.

1. Drop the *Countries*, *Cities*, and *Hotels* widget on the page.
2. Open the *Cities* widget for editing.
3. On *Content* tab, select *From the currently open country*.
4. Save you changes.
5. Open the *Hotels* widget for editing.
6. On *Content* tab, select *From currently open Any parent content type*.
7. Save your changes.

### Display parent item in child items List View

> success **EXAMPLE**: Your hierarchy of dynamic types is *Cities* » *Hotels*. When you display the list of Hotels in the city of London, you want to add a heading before the list - *Listed hotels are in London city*.

If you want to display information about the parent item in the list view of a child type, you can add the following template to the list template of child items. For more information, see [Access parent or child items in dynamic widget views](https://www.progress.com/documentation/sitefinity-cms/access-parent-or-child-items-in-dynamic-widget-views-mvc).

### Configure parent types to behave as filters

When you apply filtering in hierarchical structures, you can configure the content types to behave as filters, rather than as regular lists and details views. For example, not to open the detailed view when a parent item is clicked and also to highlight the currently selected item.

* To set the child type widget to display a list of item before any filter is applied, open its widget for editing and in the *Advanced* settings, in *ShowListViewOnEmpyParentFilter*, enter `true`.\
  This way, the widget will not display an empty list, if no parent item has been selected.
* To set the parent type widget to display items in list mode only, open its *Advanced* settings and in *ContentViewDisplayMode*, enter `Master`.\
  This way, when you use a content type, only as filter, when you click an item in the list, it will not open in *Details* mode.

## Display hierarchy of content items

Use this procedure to configure the widget to display hierarchy of content items.

For example, you have a parent content type *Countries* that has child content types – *Cities* and *Resorts*.\
You drop the *Countries* widget in the left pane of the page. In the right, you drop the *Cities* and the *Resorts* widgets.

Depending on how you want to view the details of an item, there are the following scenarios:

### Open the detailed view on another page

In this scenario, you have a list of *Countries* on the left, when you click a country, the widgets on the right display the list of cities and the list of resorts in this country. When you click a city or a resort, you can view its details on another page.\
Perform the following:

1. Drop the *Countries* widget on the left, drop the *Cities* and the *Resorts* widgets on the right.
2. Click the *Edit* button of the *Countries* widget.
3. On the *Single Item Settings*, select *Auto-generated page*.
4. Click *Save*.
5. Click the *Edit* button of the *Cities* and the *Resorts* widgets.
6. On *Content* tab, select *From the currently open Country*.
7. On the *Single Item Settings*, select *Selected existing page ..*.\
   Select a different page that has the *Cities* and the *Resorts* widgets.
8. Click *Save*.

### Open the detailed view on the same page

In this scenario, you have a list of *Countries* on the left, when you click a country, the widgets on the right display the list of cities and the list of resorts in this country. When you click a *City*, its details open on the same page. The *Countries* widget continues to display the selected country; the *Resorts* widget continues to display the list of resorts.

1. Drop the *Countries* widget on the left, drop the *Cities* and the *Resorts* widgets on the right.
2. Click the *Edit* button of the *Cities* and the *Resorts* widgets.
3. On *Content* tab, select *From the currently open Country*.
4. On the *Single Item Settings*, click *Selected existing page ...*
5. Select the page you are currently editing.
6. Click *Save*.
7. Click the *Edit* button of the *Countries* widget.
8. On the *Single Item Settings*, select *Auto-generated page*.
9. Click *Advanced* button.
10. Click *Model*.
11. In *ShowDetailsViewOnChildDetailsView*, enter `true`.
12. In *HideListViewOnChildDetailsView*, enter `false`.

    > info  **NOTE**: If you want to hide the currently selected country when a city or resort is opened in detailed view, In *ShowDetailsViewOnChildDetailsView*, enter `false`, in *HideListViewOnChildDetailsView*, enter `true`.
13. Click *Save*.