Tip of the week

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
Read Full Post | Make a Comment ( 2 so far )

Tip #1 : Finding child pages based upon a parent page

Posted on February 18, 2007. Filed under: Tip of the week |

 

The scenario

Well, except from the fact that one of the pillars of good parenthood is the ability to tell your own children from all the other kids, there are actually other (more practical and less formal) reasons why you may need to get the reference to all the child pages of any given page made with Sitefinity.

Let’s imagine following scenario. You ran a website for a local car dealership. The dealership strucks a deal with a monthly car fan magazine to be published online on their website. So, you go and create a page for the car magazine. This page then contains pages that each represent a monthly issue. Inside of these monthly issue pages, you then have pages like news, car tests, articles etc.

What you’d like to do is to show on the right side of the magazine front page description and link to all the cover stories from each issue.

Take a look at the screenshot to get an idea what am I talking about (click on the thumbnail to enlarge it).

Finding child pages based upon a parent page

Implementation

First create the page structure like described in the scenario : Magazine > Issue #1 > News, Articles… Create two issue pages just to see the point of the example.

For each “magazine issue” page set the page title to the cover story title and in description type the brief introduction of the cover story. Take a look at the screenshot to get an idea (click on the thumbnail to enlarge it).

Page properties

It is important to set these values to reflect the cover story of the issue, since we will use the CmsPage.Title and CmsPage.Description properties to create our User Control with the cover stories.

Create CoverStories.ascx User Control

Once, you are done with that we’ll create a User Control that will display all Cover stories on the right side of magazine front page. The approach we’ll take here is to get the current node of the sitemap (magazine front page) and then loop through all of it immediate children (issue pages), extract page title and page description and create controls with those value. Take a look at the code bellow :

Open code in new window

Now, all that’s left is to upload the user control and add it to our magazine page. Consult the Developer Manual if you are unsure how to add User Control to Sitefinity page.

Hopefully, you’ll find some use of this )

Read Full Post | Make a Comment ( None so far )

Welcome to the “Tip of the week category”

Posted on February 18, 2007. Filed under: Tip of the week |

We’d like to welcome you the “Tip of the week category” at Sitefinity Developer Blog.

It’s hard to explain what are we going to write in this category without sounding trivial, nontheless here is my try 🙂

Once a week (I bet you’d never guess that!), we’ll write a short, very focused post on a subject that may not look obvious to developers outside of the Sitefinity team. In addition to that, if you come up with some neat solution for a particular problem, we encourage you to send it to us and if we like it we’ll publish it here and credit you for it (we’ve noticed on our forum some pretty cool input from you guys).

Read Full Post | Make a Comment ( None so far )

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