Webpart Development part 4: Creating Custom Web Part Properties

In recent blog posts we learnt webPart development, deployment  and adding controls etc..

In this blog post we will see how to add custom properties for SharePoint web part. There are several properties available in SharePoint web part for setting its look and feel like Title, Height and Width etc.. In this example we will see how to add Dropdown, Check box and a Text box in webPart tool pane.

  1. Open Visual studio and create a new web part project
  2. Open the .cs file
  3. import the name space System.ComponentModel;
  4. To define the XML namespace to be used for the Custom WebPart, add the below code just above the class declaration. (These values can be whatever you choose and aren’t related to the class name.)
    [sourcecode language='csharp']  [DefaultProperty(“Text”), ToolboxData(“<{0}:WPwithBGcolr runat=server>
  5. Change the base class from System.Web.UI.WebControls.WebParts.WebParttoMicrosoft.SharePoint.WebPartPages.WebPart
  6. For adding a text box in tool part pane, add the below property in the class
    [sourcecode language="csharp"] public string text;
    [Category("Advanced Settings"),
    Personalizable(PersonalizationScope.Shared),
    WebBrowsable, WebDisplayName("Text"),
    WebDescription("Enter your text")]
    public string Text
    {
    get { return text; }
    set { text = value; }
    }[/sourcecode]
  7. For adding a checkbox in tool part pane you need to add the blow code
    [sourcecode language="csharp"]public Boolean border;
    [Category("Advanced Settings"),
    Personalizable(PersonalizationScope.User),
    WebBrowsable, WebDisplayName("Border"),
    WebDescription("Do you want border")]
    public Boolean Border
    {
    get { return border; }
    set { border = value; }
    }[/sourcecode]
  8. For adding a dropdown in tool part pane , first declare an enum variable and create the property using this new variable as shown in the below code.
    [sourcecode language="csharp"]
    public enum ColorByEnum { Red, Blue, Green };
    protected ColorByEnum colorBy;
    [Category("Advanced Settings"),
    Personalizable(PersonalizationScope.User),
    WebBrowsable,
    WebDisplayName("Background Color"),
    WebDescription("Choose a background color for your webpart")]
    public ColorByEnum ColorBy
    {
    get { return colorBy; }
    set { colorBy = value; }
    }
    [/sourcecode]
  9. You can retrieve the value, entered by the user, using the below code.
    [sourcecode language="csharp"
    ]protected override void RenderWebPart(HtmlTextWriter output)        {        output.Write(this.text  );         }[/sourcecode]
  10. For expanding the custom category default we need to override the  function ‘GetToolParts’. 

    [sourcecode language="csharp"]public override ToolPart[] GetToolParts()
    {
    ToolPart[] toolpart = new ToolPart[3];
    CustomPropertyToolPart custom = new CustomPropertyToolPart();
    custom.Expand(“Advanced Settings”);
    WebPartToolPart Wptp = new WebPartToolPart();
    Wptp.FrameState = FrameState.Normal;
    Wptp.FrameType = FrameType.Default;
    toolpart[0] = Wptp;
    toolpart[1] = custom;
    return toolpart;
    }[/sourcecode]

The following properties can be added to costom controls in the tool part pane.

The custom property will be displayed automatically in the default property pane based on the property type string, bool, int or enum. The following table describes how each of these property types is displayed in the property pane.

In the coming articles we will see how to validate custom controls in tool part pane.

Download the sample source code here.

About Hojo Clement

Hojo Clement was working in US Technology in Trivandrum as a Senior Software Engineer. He has 6 years experience in working with Web Development Technologies inlcuding MOSS and ASP.net.

2 thoughts on “Webpart Development part 4: Creating Custom Web Part Properties

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>