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 :
- 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)
- 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 :
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 :
public string Quotes
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”.