Build a form widget: Implementing the client control

In Sitefinity CMS - widgets provide most of their functionality in client code. As the Sitefinity CMS backend, where these controls are used, is fully AJAX-ified and works through services, custom field controls must provide a client API that is called by Sitefinity CMS.

The following procedure shows how to implement the client component for a custom field control:

  1. Implement a basic client control.
    The client control is a regular ASP.NET Ajax client control that resides in a JavaScript file. In Visual Studio, there is a snippet that can create a client control for you.
    To do this perform the following:
    • Create an empty JavaScript file
    • In the file, type control and press TAB twice.
    • Provide the name of the control.
      By convention, this must be the same as the fully qualified type name of your server class.
  2. Inherit from the FieldControl client class.
    To get all the base functionality, you must derive this JavaScript class from the FieldControl JavaScript class . This is done in the call to registerClass, which, by default, uses Sys.UI.Control. Change this to Telerik.Sitefinity.Web.UI.Fields.FieldControl.
  3. Include the required properties.
    Sitefinity CMS expects every field control or widget to have get_value() and set_value() client properties. They must return and save the value of the widget, respectively. The implementation depends on the UI of your custom field. For simplicity, the following code sample only returns and sets the value of a different DOM element, depending on the current mode - Read or Write.
    This example is getting and setting the value of the text box control.

EXAMPLE: For more information about the contents of the JavaScript file, see FormWidget.js in Sitefinity documentation-samples on GitHub.

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?