Build a custom field control: Implement the client control

Field controls in Sitefinity CMS provide most of their functionality in client code. As the Sitefinity CMS backend where those controls are used is wholly AJAX-ified and works through services, custom field controls have to provide a client API to be called by Sitefinity CMS. Here is how to implement the client component for a custom field control.

The client control is just a regular ASP.NET Ajax client control, that resides in a javascript file. There is a snippet in Visual Studio that can create one for you. Just open an empty JS file, type "control" in it and press Tab twice. You will need to provide the name of the control. By convention, this should be the same as the fully qualified type name of your server class.

You must also derive this javascript class from the FieldControl javascript class to get all base functionality. This is done in the call to registerClass, which by default uses Sys.UI.Control. Change that to Telerik.Sitefinity.Web.UI.Fields.FieldControl.

Sitefinity CMS expects every field control to have get_value() and set_value() client properties. They should return and save the value of the field, respectively. The implementation is up to you and depends on the UI of your custom field. For simplicity, the following code sample just returns and sets the value of a different DOM element, depending on the current mode (Read or Write).

You can notice the call to raisePropertyChanged in the set_value property. This is a convention in the MS Ajax library that you can use to notify any listeners that the value of a specific property changed.

Use the following code sample: