When you edit Sitefinity controls in a page editor, there are two modes for editing (or setting the properties): simple and advanced. This topic explains how to achieve this same functionality for the user controls you create and upload to Sitefinity toolbox.

Figure 1 shows the pros and cons of the two editor modes, which also shows why the two editor modes are chosen instead of one:

Figure 1

As you can see in Figure 1, both modes have their advantages, so choosing either of them depends on the actual user. When designing controls, one should keep in mind the knowledge level of the user that is likely to use the control. Based on this assumption, you can decide whether to create a control designer or not.

In this sample we are going to build a simple user control that will wrap standard ASP.NET 2.0 BulletedList control. We are going to let users set the DisplayMode (Text,HyperLink, LinkButton) of a control and in addition to that let them add or remove the items from the list. All in all, it should vaguely resemble the designer of this control that is available in Visual Studio. Since we are assuming that some pretty unexperienced user will be using this control, we are going to provide them with a Control Designer, or Simple mode for editing the control. To get an idea of how this simple editing mode will look like, see Figure 2:

Figure 2

Download the Sample Code from here.

Installation

1. Download the project from here.
2. Unzip the project
3. Copy the ~/App_Code/Designer folder to your ~/App_Code folder (add App_Code folder if it does not exist)
4. Copy the ~/MyTemplates folder to your project
5. Copy the ~/MyControls folder to your project
6. Create a page in Sitefinity and upload a new user control. The control that should be uploaded is  ~/MyControls/MyBulletedList.ascx (make sure to upload the code-behind as well).

   For instructions on how to upload a control, see Uploading User Control to Toolbox

7. Drag the control onto the page and click on Edit (if in Overlay mode, it will appear when you hover over the control).

Explanation

Following are the steps that we needed to undertake to make this happen:

1. Create a user control; define the properties of this user control so that they function.
2. Create a designer class for this control. Since this is for a user control, put that class in the App_Code folder.
3. Create a connection between the designer and the user controls. In modules and custom controls, we generally use the type of our control as a reference. However, when working with user controls this does not apply. Since C# does not support multiple inheritance, we could not have created a base class and let our user control inherit from that class as well (in addition to inheriting UserControl base class). So, the solution is to create an interface and implement that interface on our User Control. Then, we will be able to treat the user control from our designer as a control that implements a specific interface. This approach also provides the ability to create one designer and use it by multiple controls.
4. Finally, you will see that our Custom designer is nothing but a custom control, which creates its user interface through a template (same principle as with creating pluggable modules).

Conclusion

In order to implement a custom designer on a User Control, you will need:

1. User control
2. Custom control representing a designer
3. Template for the UI of the designer
4. Interface to which to cast user control

Download the Sample Code from here.

See Also

© 2002-2008 Telerik. All Rights Reserved.