Tutorial: Manage custom control templates through the designer | WebForms

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:

• Create a new custom widget
• Create a simple widget designer

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

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.

 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.

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.

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

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.

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

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

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.