Tutorial: Enable template editing through the UI

The following tutorial demonstrates how to make the template of a custom widget to be editable through the UI.

Perform the following:

1. Open your project in Visual Studio.
2. In your SitefinityWebApp, add a new folder and name it EditableWidgets
3. In this folder, add a class and name it EditableWidget.cs
4. Make the class inherit the SimpleView class.
5. Override the following abstract members:
   • InitializeControls method
   • LayoutTemplateName property
     The string of the template path consists of a prefix and full namespace of your .ascx file. The namespace corresponds to the folder path in your project, where you have put the ASCX embedded resource file. The prefix is used by the virtual path provider to indicate which is the assembly it should be looking for. You have to register that prefix in the advanced settings screen. For more information about the virtual path provider, see blog post Taking advantage of the Virtual Path Provider in Sitefinity.
     
6. Make the widget template persistent in the UI
   To make the widget template persisted in the UI, you must add a new attribute ControlTemplateInfo to the custom widget. The attribute constructor has several overloads. The sample below uses the following parameters:
   • resourceClassId - this is the resource name of the resource class that you create in the next procedure.
   • controlDisplayName - this is the name of the section where the template belongs to.
   • areaName - this is the area in which the widget is registered
7. Change the widget template of the control programmatically.
   To programmatically change a widget template, you must override the TemplateKey property and set its value in the constructor of the class.

   NOTE: You must use an instance of the PageManager class to operate with widget templates. In the code sample below, a specific widget template is retrieved with specific Name, AreaName, DataType, and ControlType.

Use the following code sample:

1. In folder EditableWidgets, add a new class.
2. Name the class EditableWidgetResources.cs
3. Make the class inherit Sitefinity.Localization.Resource class.

Use the following code sample:

To register and use the custom resource class in Global.asax, register the class by subscribing to SystemManager.ApplicationStart method in the ApplicationStart event. The registered custom resource class can be further extended with additional resource entries from Administration » Interface Labels and Messages.

Register the widget template for the control using the resource class entries.
All editable templates are stored in the Sitefinity CMS database. If you edit the templates through the UI, those edits are kept in the database and the template is served from there when the widget is instantiated. If there are no edits, Sitefinity CMS returns the embedded resource. Keeping the templates in the database also gives the possibility to reset them to the default ones. You can always go back one version in the embedded resource, if someone has made the template unusable from the UI.

To create such a database record for your template, you can use the Sitefinity CMS API. You can do this only once in the lifetime of your project in the SystemManager.ApplicationStart method:

Use the following code sample:

The code above creates a new entry in the database with the information you give for your template. That information includes the namespace of your ascx embedded resource, type of the widget, name for the template to display in the UI, the assembly it resides in, etc. From now on your template will be retrieved from the database and will appear in the backend list.

You can also manage templates through the custom control designer. For more information, see Manage custom control templates through the designer.