Topics

All topics

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:

  1. 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.
  2.  Extend the entity.
    Add the fields metadata for the new view. For more information, see Extending the entity and views metadata.
  3. 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.
 
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.
You can use the following sample for reference:

Detail Views
To define your own set of custom detail views in the code, you must do the following:
  1. Create a .tsx file that holds implementation of the details view. The component accepts a single property props.
  2. 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 all field values of the content item.
    Field values can be accessed by name from props.detailItem 
    Example:
    props.detailItem?.MyShortTextFieldName
  3. 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 CssClasses 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:

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?