+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Working with complex properties in Custom public controls (WebTypeEditor)

by Ivan Osmak

When working with Sitefinity, specifically with public web controls (such as Image of Posts list) you may have noticed some properties that have a “Select” button next to them. Those properties (we’ll call them Complex properties for the purpose of this post) have one thing in common : It is impossible or very hard for the user to type in the value of those properties so another window opens and let’s user visually determine the value of that property.

To show you how you can implement those complex property editors, I’ve created a short project called Quotes. The project has two controls :

  1. QuoteList - public control that displays all quotes inside of one category of quotes (this control has a complex property Quotes, which can be edited in QuotesSelector control)
  2. QuotesSelector - web editor control that let’s user select which category of quotes to display

Take a look at the following screenshots to get the idea of the functionality that’s being described :

Complex property

Complex property editor

Though the project is available for download and it is commented, let me just simply explain the concept.

You create a custom control as you would usually (same principle applies if your custom control is part of module as well) and then you set up a complex property just as any other you would. So my complex property is named Quotes and it’s of type string. The value of this property is the key of the dictionary that holds different categories of Quotes. Since users don’t know which categories of quotes are available I wanted to provide them with a new control that will let them choose among various Quote categories. In order to attach a Web Editor to a property I needed to add an attribute. This is how the property is defined in QuoteList control :

[WebEditor(”Sample.Quotes.QuotesSelector, Sample.Quotes”)]
public string Quotes
{
get
{
return this.selectedQuotesCategory;
}
set
{
this.selectedQuotesCategory = value;
}
}

As you can see I’ve added WebEditor attribute and set it to QuotesSelector control, the other control in my project.

QuotesSelector control is just another custom control where I can do whatever I please, but with one important property! The overridden Value property of WebUITypeEditor is the value that will be returned to the QuotesList Quote property when user clicks “I’m done” button. So, one central purpose of QuotesSelector control is to set the it’s Value property. How will this been done really doesn’t matter, though should be user-friendly as possible :).

The Sample.Quotes project you can download here. (Note : I’ve used the fake data source which is implemented in QuotesDat.cs file)

p.s. when you upload Sample.Quotes.dll control through page editor Both controls will appear. Since you don’t want users to be able to drag QuotesSelector control, go to web config and delete QuotesSelector from toolboxControl section. Optionally set section of QuoteList to “Quotes”.

7 comments

Leave a comment
  1. Gabe Oct 02, 2007
    Nice article. Some of the Sitefinity controls have tabs. For example, "GenericContent" has a "Content" tab and a "Properties" tab. How is this accomplished?
  2. Gabe Oct 09, 2007
    I just tried this. It doesn't seem to work. I get a "The type or namespace name 'WebEditor' could not be found (are you missing a using directive or an assembly reference?)" error. What assembly is "WebEditor" in?
  3. stumped Oct 10, 2007
    I get the same error message as Gabe. Ive tried referencing the following dlls: * Telerik.Framework * Telerik.Cms.Web.UI with their "Copy local" build property set to both true and false and i still get a similar error. Has anyone manage to make a complex property editor work?
  4. Chad Mar 13, 2008
    Very helpful article! Is there a way to limit the user from typing in the textbox so they are forced to choose from the selector?
  5. Scott Mar 21, 2008
    I have this working with simple text boxes but I wanted to create the same kind of thing using the RadEditor but I get the ol' "A potentially dangerous Request.Form value was detected from the client" error because I'm posting HTML tags in a textbox. Is there anyway around this? I can't set validateRequest="false" - is there something else I can do?
  6. Scott Mar 23, 2008
    Never mind - got it with HtmlEncode.
  7. Kevin Apr 15, 2008
    For reference sake, the full namespace for WebEditor is "Telerik.Cms.Web.UI.WebEditor".

    Leave a comment