Extend the Content list widget
List views
To define a custom List view that you can use with the Content list widget, perform the following:
- Create a
.tsx file that holds the implementation of your custom list view
The component’s props is an object of type ContentListMasterViewProps:
The model has a property called items, which contains all the content items that need to be rendered. The property is automatically populated with objects that contain all the properties defined in the FieldMappings (in the ListFieldMapping prop of the entity). Each object also includes a property called Original, which stores the original content item as returned by Sitefinity CMS. These items are of type SdkItem, which is the base class used for working with Sitefinity CMS REST services.
- Extend the entity.
Add the fields metadata for the new view. For more information, see Extending the entity and views metadata.
- Register the extended entity and custom view in the widget registry.
Add a new entry to the widget-registry.ts file. For more information, see Register the extended entity and custom views.
Views metadata
The view metadata must be passed to the ListFieldMapping and CssClasses properties of the entity in the FieldMappings attribute. It contains all the mappings between views and their corresponding metadata.
Mappings
The purpose of metadata for mappings is to create reusable views that can be used across different content types. This is achieved by providing a list of fields and their types. Thus, when selecting different content types, each of the fields provided by the view can be mapped to a corresponding field of the selected content type.
The supported field types are the following:
ShortText - for string fields.LongText - for html fields.Text - for all kinds of string fields (including LongText).YesNo - for boolean fields.DateTime - for dates.
Number - for all kinds of numbers.Classification - for classifications like tags, categories etc..Address - for address fields.RelatedData - for related data like news, blogs, dynamic.RelatedImages - for related images.
RelatedVideos - for related videos.RelatedDocuments - for related documents.
You can use the following sample for reference:
All these fields are almost a 1:1 mapping with the custom fields dialog in the administrative interface. The entries for the mappings are case sensitive, so be sure to provide an exact match of the field name.
Detail Views
To define your own set of custom detail views in the code, you must do the following:
- Create a
.tsx file that holds implementation of the details view. The component accepts a single property props.
- The model for the view must be of type:
ContentListDetailViewProps
The ContentListDetailViewProps contains a property called detailItem which refers to the resolved item. The item property is of type SdkItem. This object contains the values of the fields that are defined in the DetailItemSelectExpression in the entity. By default it is set to *.
Field values can be accessed by name from props.detailItem
Example:
props.detailItem?.MyShortTextFieldName
- Register the extended entity and custom view in the widget registry.
Add a new entry to the widget-registry.ts file. For more information, see Register the extended entity and custom views.
Extending the entity and views metadata
To register your custom views and their metadata you have to extend the content list entity and modify some of its properties.
To register the custom views metadata you have to pass it in the @FieldMappings attribute of the ListFieldMapping and @CssFieldMappings properties.
NOTE: Decorators added in the extended entity, which are also present in the base entity, override the base ones. Decorators that are not being overridden in the extended entity are being inherited from the base entity.
Register the extended entity and custom views
To register the newly created views and the extended entity you need to go to the file widget-registry.ts and to add a new entry. For example: