Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

For developers: Implement the client component for the multi-view widget designer

You must store the client class in a .js file in the project, where the view resides. 

To implement the client component, perform the following:
  1. Add a new .js to the project of your view.
    You can name the file the same way as the view. 
    For example, if the class is named DesignerView1, name the file DesignerView1.js.
  2. In the context menu of the .js file, click Properties.
  3. In Properties pane set BuildAction field to EmbeddedResource.
  4. Open the .js file.
  5. In the .js file, create the namespace for the client code.
    This is done by calling the registerNamespace of the Type class.

    NOTE: The same namespace must be used throughout the entire client code of this file.

  6. Define the client class.
  7. Define the prototype for the class. 
    It must include the following methods:
    • initialize
      This method is called when an instance of the class is created. In it, you must call the initialize method of the ControlDesignerBase class.
    • dispose
      This method is called when the instance of the class is no longer used. In it, you must call the dispose method of the ControlDesignerBase class.
    • refreshUI
      This method is called when the view is opened. In it, you must get an instance of the widget and populate the UI with the values of the properties of the widget.
    • applyChanges
      This method is called when the changes must be applied to the widget. In it you must get an instance of the widget and set its properties to the new values in the UI.
    • set_parentDesigner
      This method is used by the IDesignerViewControl interface for passing an instance of the designer to the view. Via this instance the view can access the data of the widget.
  8. Register the client class and specify its base class.
    You do this by calling the registerClass method. You must pass the System.UI.Control as the base class and specify that the IDesignerViewControl interface is implemented.

Use the following code sample:

Type.registerNamespace("NewsRotator");
 
NewsRotator.DesignerView1 = function (element) {
    NewsRotator.DesignerView1.initializeBase(this, [element]);
}
 
NewsRotator.DesignerView1.prototype = {
    initialize: function () {
        NewsRotator.DesignerView1.callBaseMethod(this, 'initialize');
    },
    dispose: function () {
        NewsRotator.DesignerView1.callBaseMethod(this, 'dispose');
    },
    refreshUI: function () {
        var controlData = this.get_controlData();
 
        jQuery("#txtTitle").val(controlData.Title);
    },
    applyChanges: function () {
 
        var controlData = this.get_controlData();
 
        controlData.Title = jQuery("#txtTitle").val();
    },
    get_controlData: function () {
        return this.get_parentDesigner().get_propertyEditor().get_control();
    },
    get_parentDesigner: function () {
        return this._parentDesigner;
    },
 
    set_parentDesigner: function (value) {
        this._parentDesigner = value;
    }
}
 
NewsRotator.DesignerView1.registerClass('NewsRotator.DesignerView1', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Back To Top

Next: For developers: Reference the client script for the multi-view widget designer