Topics

All topics

Client components

Sitefinity CMS provides an assortment of built-in, reusable client components you can use on widget designers' frontend. Client components allow flexible widget designer implementation that reflect various requirements of the UI of widget designers, for example, having a search box or a date and time picker.

The following types of client components are available out-of-the-box:

Component Description
Selectors  Components that allow single and multiple selection of content items.
Examples: Page selector, Event selector, News selector, and so on.
For more information, see Selectors.
Fields  Examples: HTML field (rich text), Media field (combines selectors). Media field is used for images, videos and documents. In addition, the Image field provides more frontend functionality on top of the Media field.
For more information, see Fields.
Custom components 

Built-in components that provide additional frontend functionality for widget designers.
Examples: Code area, Infinite scroll, Tree view, and others.
For more information, see Custom components.

You use client components in the widget designer views either as an HTML element attribute, or as an HTML element. However, just adding components in the view is not enough. You also need to specify the dependency in the widget designer JSON config file, as well as in the widget controller.

The following example demonstrates how to use the Event selector in the Simple view of a widget designer. You have the following widget designer files:

  • DesignerView.Simple.cshtml - represents the designer view, located in the Views folder
  • DesignerView.Simple.json - represents the designer configuration, located in the Views folder
  • designerview-simple.js - represents the designer controller, located in the Scripts folder

To use the Event selector, you need to have the following code in the respective files, listed above:

DesignerView.Simple.cshtml:

<sf-list-selector sf-event-selector sf-selected-item-id="properties.SelectedItemId.PropertyValue"></sf-list-selector>

DesignerView.Simple.json:

designerview-simple.js:

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?