Sitefinity CMS can be extended very easily using traditional ASP.NET UserControls. Once a UserControl is added to Sitefinity, Sitefinity will automatically generate a web admin interface.
To make this web interface less intimidating we can use design time attributes to hide properties, apply categories or set default properties:
WebEditors can be added to assist with setting complex properties:
Control Designers are the final step in this process and make control editing VERY user friendly
In this post we'll examine how to add a Control Designer to an existing User Control.
What is a Control Designer?
Control Designers add a new Basic tab to the Sitefinity Control Editor. The default auto-generated property editor gets put into the Advanced tab. Within the Basic tab, Control Designers create an entirely custom interface for configuring underlying control properties.
Control Designers empower us to create user-friendly forms, multi-step wizards, search interfaces, etc. for configuring controls.
Attaching a Sitefinity Control Designer to a User Control
Control Designers can be added to a UserControl by adding a Telerik.Framework.Web.Design.ControlDesigner attribute.
using System;
[Telerik.Framework.Web.Design.ControlDesigner("CustomDesigner")]
public partial class Custom_UserControls_CustomControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
With a single line of code a Control Designer can be attached to a UserControl. The ControlDesigner attribute accepts a TypeName and this TypeName points to the associated Control Designer.
The Control Designer itself becomes responsible for rendering a web-interface and setting the underlying control properties. To create the (empty) ControlDesigner referenced above, create the following ~/App_Code/CustomDesigner.cs file:
public class CustomDesigner : Telerik.Framework.Web.Design.ControlDesigner
{
public CustomDesigner()
{
}
}
The code above works, although it is obviously incomplete. Feel free to add the ControlDesigner attribute (shown above) to a UserControl. When the control is edited in Sitefinity a new (empty) Basic tab will be added.
Creating a Custom Control Designer
Control Designers must inherit from the Telerik.Framework.Web.Design.ControlDesigner base class. This base class contains some very useful methods & properties. For example, the DesignedControl property is a reference to the underlying control. The OnSaving method is executed automatically when the I'm done button is clicked.
In my next post, I'll demonstrate how to get & set the properties in the underlying control.
