Working with complex properties in Custom public controls (WebTypeEditor)

Posted on May 25, 2007. Filed under: Tip of the week |

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 overriden 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”.

Advertisements

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

2 Responses to “Working with complex properties in Custom public controls (WebTypeEditor)”

RSS Feed for Sitefinity blog Comments RSS Feed

Hi – this is excellent – thanks!

I am new to SiteFinity and find the documentation very poor, at least as soon as you have to do something slightly above the basics, for example I managed to establish the fact that I needed a custom WebEditor control for extended properties – but nothing anywhere on how to actually implement these.

Thanks for this again!

hi I downloaded added your solution, however I cannot upload your assembly, i get ‘Unable to load one or more of the requested types. Retrieve the LoaderExceptions property for more information.’ exception, googling it doesn’t help either.

While trying to add the control through web.config I don’t see the select button for selection ?


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: