How To Create SharePoint 2010 custom visual webpart properties

If you’ve created SharePoint 2010 classic web parts before, you know that you can easily define custom web part properties which your web part code-behind can consume.
Page Content

If you’ve created SharePoint 2010 classic web parts before, you know that you can easily define custom web part properties which your web part code-behind can consume.

2011-11-29-CustomWebpartProperties-01.png

With the popularity of SharePoint 2010 Visual Webpart, you’re probably interested in having custom properties defined there too.

There are few things different about exposing your custom properties in a Visual Web part.

Let’s see the steps involved:

    1. Add new or use existing Visual Web Part to your project, in our case called Webpart1
    2. Open the Webpart1.cs file which will look something like this:
01 [ToolboxItemAttribute(false)]
02     public class Webpart1: WebPart
03     {
04         private const string _ascxPath = @"~/_CONTROLTEMPLATES/[your ASCX].ascx";
05         protected override void CreateChildControls()
06         {
07             Control control = Page.LoadControl(_ascxPath);
08             Controls.Add(control);
09         }
10     }

and add your custom property definition right below the CreateChildControls method, in our case the property will look something like this:

1 [WebBrowsable(true),
2         Category("Configuration"),
3         Personalizable(PersonalizationScope.Shared),
4         WebDisplayName("Friendly Display Name"),
5         WebDescription("Values: Whatever value you need)]
6         public string PropertyValue { get; set; }

In here, the PropertyValue is the actual variable which will be later consumed by your web part user control.

    1. Update your CreateChildControls logic to look like this:
1 protected override void CreateChildControls()
2         {
3             Control control = Page.LoadControl(_ascxPath);
4             if (control!= null)
5             {
6                 ((Webpart1UserControl)control).WebPart = this;
7             }
8             Controls.Add(control);
9         }

This piece here will pass in the properties every time the control is reloaded. In here, the only change you’ll need to make is to rename Webpart1UserControl to the [name of your webpart]UserControl. This will reference the ASCX used for the Visual Webpart.

    1. Switch to your user control … Webpart1UserControl.ascx.cs

and define public variable right below the class declaration:

1 public Webpart1 WebPart { get; set; }

Here the Webpart1 is referencing the actual web part class file (not ASCX).

That’s all, in your code you can get a hold of the web part property value by using this: this.WebPart.PropertyValue, where the PropertyValue is the name of the variable we’ve chosen earlier.

Advertisements

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

%d bloggers like this: