August 04, 2011

Creating a Sitefinity 3.7 Custom ControlDesigner

Here’s a simplified summary of the process of creating a custom designer to edit properties for a Sitefinity control:

For simple text fields, edit fields are automatically generated just by exposing properties of type string on the user control.
...but for an elaborate field editing interface on a Sitefinity control here's a diagram and overview:
(apologies for the VB code :))
In App_Code
BaseControl.cs (contains the properties on our usercontrol we need to edit)
Inherits UserControl
ControlDesigner.cs (control displays the editing UI and sets the properties on BaseControl)
Inherits Telerik…ControlDesigner

The control itself must inherit from BaseControl.cs - this later allows it to be cast to type DesignedControl from the ControlDesigner.

It must also have a control designer specified as a class attribute. ex:
[Telerik.Framework.Web.Design.ControlDesigner("ControlDesigner")]

To layout the UI for the Control designer, you need to create a separate LayoutTemplate user control, and specify it’s path as the ControlDesigner’s LayoutTemplatePath property.

The ControlDesigner references the LayoutTemplate’s properties like:
base.Container.GetControl("litDataString", true)

and sets the property on the usercontrol like:
((DesignedControl)BaseControl).Data = “xyz”
For simpler, unstyled layouts, you can get away without a LayoutTemplate and just specifying the controls’ positions via css in the ControlDesigner.
Here’s a more in-depth Sitefinity walk-through and sample code.

Share |

No comments:

Post a Comment