Manage custom control templates through the designer

If you have build a custom Sitefinity CMS widget and a designer for it, it is either part of a module or you a standalone widget. In this case, the template cannot be edited through the user interface in the way built-in templates can. This tutorial explains how to manage the widget templates through the control designer.

For more information, see:

To manage the custom template through the widget designer, perform the following:

Create the template of the designer

The template contains the UI of the designer. It is represented by an .ascx file built as an embedded resource. To manage widget templates, you must use the TemplateSelector control provided by Sitefinity CMS.

GitHubLogo SAMPLE: For more information about the template of the designer, see CustomWidgetDesigner.ascx in Sitefinity documentation-samples on GitHub.

NOTE: Mark the template as embedded resource by opening the Properties pane and setting the BuildAction field to EmbeddedResource.

Create the class for the designer

To create the class for the designer, perform the following:

  1. Inherit the ControlDesignerBase class.
  2. Override LayoutTemplatePath
    You override the LayoutTemplatePath to to tell the designer where the widget template is. In this case, because the template can be outside of SitefinityWebApp, you use a virtual path provider.
  3. Override InitializeControls
    In this override, you must set the default mode of the designer - in this case Simple. You must also set the designer control type of the template selector.
  4. Override GetScriptReferences
    In this method you must reference the script for the client component.
  5. Override GetScriptDescriptors
    To register the template selector control in the client component of the designer, you must override the GetScriptDescriptors method.

GitHubLogo SAMPLE: For more information about the code of the designer, see CustomWidgetDesigner.cs in Sitefinity documentation-samples on GitHub.

Create the client component of the designer

To implement the client component of the designer, perform the following:

  1. Add new JavaScript file with name CustomWidgetDesigner.js
  2. Mark the file as embedded resource.
  3. Define the client class.
    First, you create the namespace for the client code, by calling the registerNamespace of Type class.
  4. Define the prototype for the class.
    For more information, see For developers: Implement the client component for the simple widget designer.

GitHubLogo SAMPLE: For more information about the code of the designer, see CustomWidgetDesigner.js in Sitefinity documentation-samples on GitHub.

Register the virtual path provider prefix

The CustomPrefix that you used to pass the path to the widget template is a virtual path provider prefix. You must add it in the VirtualPathSettingsConfig.config.
You can register the new prefix in the in the Global.asax file.

GitHubLogo SAMPLE: For more information about the code of the designer, see Global.asax.cs in Sitefinity documentation-samples on GitHub.

Assign the designer to the custom control

You must associate the widget class with the control designer. This is done by the ControlDesignerAttribute class. You must add this attribute to the widget class.

Was this article helpful?