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 MultiViewWidgetDesignerView.cs, name the file MultiViewWidgetDesignerView.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:

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?