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.)

     [DefaultProperty("Text"), ToolboxData("<{0}:WPwithBGcolr runat=server></{0}:DisplayLatestPosts"), XmlRoot(Namespace = "WPwithBGcolr")]

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

    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; }
   }

7. For adding a checkbox in tool part pane you need to add the blow code

   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; }
   }

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.

   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; }
   }
   

9. You can retrieve the value, entered by the user, using the below code.

   protected override void RenderWebPart(HtmlTextWriter output)        {        output.Write(this.text  );         }

10. For expanding the custom category default we need to override the  function ‘GetToolParts’.Â

    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;
    }

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.