Wednesday, March 6, 2013

Create WebPart Custom Properties in SharePoint 2010


Steps Involved for Web part not for Visual web part

These custom properties will be displayed in the property pane as different controls according to the type of the property.
  • bool -> Check box
  • enum  -> Dropdown list
  • int -> Text box
  • string -> Text box
  • DateTime -> Text box

  • Open Visual Studio 2010.
  • Create an "Empty SharePoint Project".
  • Right click on the solution and click on Add => New Item.
  • Select "Webpart" template from SharePoint 2010 installed templates.
  • Entire solution looks like the following


     
  • Replace CustomProperties.cs file with the following code.
using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace CustomProperties.CustomPropertiesWP
{
    [ToolboxItemAttribute(false)]
    public class CustomPropertiesWP : WebPart    {
           
private string _Name;
        private string _cmd;
        private int _Width = 0;
        public enum ControlModes
        {
            Simple,
            Standard,
            Advanced
        }
          Label lblResult;
          Button btnClick;

 /*Just represnt a label */

       [WebBrowsable(true), WebDisplayName("Name"), WebDescription("Enter Name"),
       Personalizable(PersonalizationScope.Shared), Category("Custom Properties"),
       System.ComponentModel.DefaultValue("Please Enter")]
  /*This actually represents the Field  - Textbox(String)*/
        public string Name
        {
            get { return _Name; }
            set { _Name = value; }

        }

                               //Another way of adding controls to Properties pane
       [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
        System.Web.UI.WebControls.WebParts.WebDisplayName("Enter Comment"),
        System.Web.UI.WebControls.WebParts.WebDescription("Comment"),
        System.Web.UI.WebControls.WebParts.Personalizable(
        System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
        System.ComponentModel.Category("Custom Properties"),
        System.ComponentModel.DefaultValue("")]
        public string Cmd
        {
            get { return _cmd; }
            set { _cmd = value; }
        }
                
        [Personalizable(PersonalizationScope.User),WebBrowsable(true),
       WebDisplayName("Set Width"),WebDescription("Set width"),Category("Custom Properties")]
 /*This actually represents the Field  - Textbox (Integer)*/
        public int setWidth
        {
            get{return _Width;} 
            set{_Width = value;}
        }
       
        protected override void CreateChildControls()
        {
            lblResult = new Label();
            btnClick = new Button();
            btnClick.Text = "Click";
            btnClick.Click += new EventHandler(btnClick_Click);
            this.Controls.Add(lblResult);
            this.Controls.Add(btnClick);
        }
        protected void btnClick_Click(object sender, EventArgs e)
        {
           
lblResult.Text = "Welcome" + " " + _Name.ToString() + "<br /> Your Valuable Comment: " + Cmd.ToString()+"<br/>You have set the width as :"+setWidth+"<br/><br/>";
            if(setWidth!=0)
            btnClick.Width = setWidth;
            else
            btnClick.Width = 500;
        }       
        }       
    }
}
  • Build and deploy the solution.

  • Go to the SharePoint Site =>Site Actions =>Edit Page =>Editing Tools => Insert =>Web Part =>Categories => Custom =>CustomPropertiesWP.

     
  • Click on Add.
  • The web part looks like the following with a button.

     
  • Edit the webpart you could see a new custom category in the webpart properties.
  • Enter the value and click on Ok.

     
  • In the CustomPropertiesWP click on the button.

No comments:

Post a Comment