Create custom views for the Content list widget

ASP.NET Core

Overview

The Content list widget supports custom Razor views that you create in your ASP.NET Core Renderer project. Custom views let you control how content items are displayed on a page. After you create and register the views, editors can select them in the widget designer.

There are two types of custom views:

• List view: renders multiple content items at the same time, for example, a list or grid of articles.
• Details view: renders a single content item, for example, a full article page.

Create a custom List view

To define a custom List view that you can use with the Content list widget, perform the following:

1. Create a .cshtml file. The file name must not start or end with Details.
2. Place it in Views/Shared/Components/SitefinityContentList/ directory in the root of your project. If such a folder does not exist, you must create it.
3. The model for the view must be of type: @model Progress.Sitefinity.AspNetCore.Widgets.Models.ContentList.ContentListViewModel

The ContentListViewModel class has a method T GetValue<T>(string name) which works with the field mappings, described below. The name argument of the function accepts one of the mappings defined for this view and automatically maps the name to the field name, selected in the user interface for the current content type.

Additionally, the ContentListViewModel has a property, called Items, which contains all the content items that need to be rendered. These items are of type Progress.Sitefinity.RestSdk.Dto.SdkItem, which is the base class for working with the REST services in Sitefinity CMS.

GITHUB EXAMPLE: To see a custom list view, see the Extended Content list » CardsListCustom.cshtml sample on Sitefinity GitHub repository.

Create a custom Details view

To define a custom Details view that you can use with the Content list widget, perform the following:

1. Create a .cshtml file. The file name must be in the format Details.<customname>.cshtml.
2. Place it in Views/Shared/Components/SitefinityContentList/ directory in the root of your project. If such a folder does not exist, you must create it.
3. The model for the view must be of type: @model Progress.Sitefinity.AspNetCore.Widgets.Models.ContentList.ContentDetailViewModel

The ContentDetailViewModel contains a property called Item, which refers to the currently rendered item. The item property is of type Progress.Sitefinity.RestSdk.Dto.SdkItem. This class contains a method called T GetValue<T>(string fieldName), by which the field values of the content item can be accessed.

For example, you can access a ShortText field value in the following way:
Model.Item.GetValue<string>("MyShortTextFieldName"))

GITHUB EXAMPLE: To see a custom details view, see the Extended Content list » Details.Custom.cshtml sample in Sitefinity GitHub repository.

GITHUB EXAMPLE: To see an example with all field types, see the All fields sample in Sitefinity GitHub repository.

Field mappings

The Content list widget implements a concept for view reusability across different content types called field mappings. The view has its own abstract set of fields that it can work with. Then, these fields are mapped to the field names of the content type. Thus, the view knows that it can work with a predefined set of fields and can be reused for several different content types.

The workflow is the following:

1. The developer defines a set of views (Razor .cshtml files) for the content list widget and provides mappings for these views.
2. The developer implements the view logic with the predefined set of fields.
3. The views and their mappings appear in the UI for the marketer to use.
4. The marketer builds a page to display content items on that page, selects the content type, and selects one of the views that the developer has provided.
5. The mappings are regenerated for the specific view and the marketer selects the ones that are appropriate for the currently selected type.

The relation between views and field mappings is controlled by a ViewsMetaData.json file located in the Views/Shared/Components/SitefinityContentList/ directory in the root of your project.

Each key in the JSON object corresponds to the name of a .cshtml view file. The value is an array of field mapping objects, each defining a fieldTitle (the label shown in the widget designer) and a fieldType (restricts which content fields can be mapped). For example:

{
  "CardsListCustom": [
    {
      "fieldTitle": "Heading",
      "fieldType": "ShortText"
    }
  ]
}

In your view file, use the GetValue<T> method with the fieldTitle value as the argument to retrieve the mapped field value at runtime.

GITHUB EXAMPLE: To see a full field mappings example, see the Extended Content list » ViewsMetaData.json sample in Sitefinity GitHub repository.