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.
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:
- Inherit the
ControlDesignerBase
class.
- 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.
- 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.
- Override
GetScriptReferences
In this method you must reference the script for the client component.
- 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.
Create the client component of the designer
To implement the client component of the designer, perform the following:
- Add new JavaScript file with name CustomWidgetDesigner.js
- Mark the file as embedded resource.
- Define the client class.
First, you create the namespace for the client code, by calling the registerNamespace
of Type
class.
- 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.
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.
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.