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.