- Create a new SharePoint 2010 Empty SharePoint Project. Name it MyWebPartProject.
- Once it’s been created, click on the project, choose Add > New Item.
- Choose the Visual Web Part template and name it MyWebPart.
- MyWebPartUserControl.ascx
This UserControl files take care of all the visual front-end controls and functionality. It’s associated MyWebPartUserControl.ascx.cs file takes care of the code-behind work. - MyWebPart.cs
This file is the class that is used to handle all the behind-the-scenes functionality of your Web part. This where the Web Part is initialized, where it loads up, and references the UserControl.
Add some functionality
- Add an asp Label Control named lbl_MySelection to the MyWebPartUserControl.ascx file.
- Open the MyWebPartUserControl.ascx.cs file and override the OnPreRender method like such and add the following code to it:
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
lbl_MySelection.Text = “Please make a selection.”;
} - Deploy the project to your SharePoint instance
- Edit a page and add your Web part to the page
Web Part Properties
When you edit a Web part, and the Web part editor pops up in your browser, each one of those options are called properties. We can add our own properties and in real development environments they’re not a novelty but a necessity.Before we begin with the code, it’s important to understand that there are two major categories to Web part properties:
- Standard Toolbox Properties
These are standard text fields, checkboxes, or dropdown lists that are able to receive data from the user and push those values to the Webpart. These do not display dynamic data. For instance: You couldn’t use a standard dropdownlist property to display a list of items from a SharePoint list. This is because the there’s no way to bind data to the dropdownlist, it uses a hard-coded enum in your Web part .CS file (more on this in the example code below). - Custom EditorPart Toolbox Properties
These allow you to build up any type of asp control (or third party control) bind custom data to do (like list data from within SharePoint or an external database) and push these values to the Web part.
Creating Standard Toolbox Properties
- Open up your MyWebPart.cs file.
- Right before the private const string _ascxPath … declaration, add the following code:
[WebBrowsable(true),The Category seen here can be any existing category within the Web part editor tool pane, or you can type your own custom category. The WebDisplayName option is what the label will say above the property. And of course, the final line is the actual property.
Category("Miscellaneous"),
Personalizable(PersonalizationScope.Shared),
WebDisplayName("Enter some text")]
public string CustomTextProp { get; set; }
If we deploy our project now, we will see our property show up in the Web part tool pane when editing the Web part, but it simply is a dummy property area. It doesn’t do anything because we haven’t tied the property to our MyWebPartUserControl. Let’s do that now… - Open the MyWebPartUserControl.ascx.cs file and right before the empty Page_Load() method, add the following property:
public MyWebPart WebPart { get; set; }This will allow us to reference our other MyWebPart.cs class in this ascx code-beind class and ultimately expose the tool pane properties to us.
- Back in the MyWebPart.cs file, locate the CreateChildControls() method and replace it with the following:
protected override void CreateChildControls()This looks for our user control on the page and it’s not null, we set the WebPart property (which we created in the previous step). Then we add the usercontrol to the controls collection.
{
MyWebPartUserControl control = Page.LoadControl(_ascxPath) as MyWebPartUserControl;
if (control != null)
control.WebPart = this;
Controls.Add(control);
}
} - Switch back again to the MyWebPartUserControl.ascx.cs file. Locate the OnPreRender method and replace it with the following:
protected override void OnPreRender(EventArgs e)This is the final piece to the puzzle. We’re setting the text field within our Web parts’ user control to the tool pane’s property text field.
{
base.OnPreRender(e);
if (this.WebPart != null && this.WebPart.CustomTextProp!=null)
{
lbl_MySelection.Text = this.WebPart.CustomTextProp.ToString();
}
}
- Checkboxes
[WebBrowsable(true),
Category("Miscellaneous"),
Personalizable(PersonalizationScope.Shared),
WebDisplayName("Checkbox Option Text")]
public bool CustomCheckboxProp { get; set; } - Dropdown Lists
public enum ddlEnum { option1, option2, option3 }
[WebBrowsable(true),
Category("Miscellaneous"),
Personalizable(PersonalizationScope.Shared),
WebDisplayName("Dropdown List Display Text")]
public ddlEnum ddlProp { get; set; }
Creating custom EditorPart properties
We’re going to create our own custom DropDownList control EditorPart that feeds in some values from a custom SharePoint list.- In your root SharePoint site, create a new custom list. You can keep the new custom list really simple, or you can add your own custom fields; doesn’t matter. If you’d like to use a already existing list, feel free to reference that list instead.
- Open your MyWebPart.cs file and after the private const string _ascxPath declaration add the following code:
public string _OptionValue { get; set; }
- After the whole MyWebPart.cs class declaration, add the following class:
public class MyEditorPart : EditorPartThis is the meat and potatoes, if you will, of what makes the custom EditorPart a reality. But there is some more tweaking to do in order for it all to work:
{
private DropDownList ddl_Options;
protected override void CreateChildControls()
{
base.CreateChildControls();
}
public override bool ApplyChanges()
{
EnsureChildControls();
MyWebPart webPart = WebPartToEdit as MyWebPart;
if (webPart != null)
webPart._OptionValue=ddl_Panels.SelectedValue.ToString();
return true;
}
public override void SyncChanges()
{
EnsureChildControls();
MyWebPart webPart = WebPartToEdit as MyWebPart;
if (webPart != null)
ddl_Options.SelectedValue = webPart._OptionValue .ToString();
}
} - Locate the CreateChildControls() method you created in the code in the previous step. Replace what’s inside with the following:
base.CreateChildControls();
ddl_Options = new DropDownList();
lbl_Options = new Label();
lbl_Options.Text = “<strong>Choose:</strong><br />:”;
using (SPSite site = new SPSite(“http://” + Page.Request.Url.Host.ToString()))
{
using (SPWeb web = site.OpenWeb())
{
SPList Forms = web.Lists["Side Panel Content"];
SPQuery qry = new SPQuery();
qry.Query = @”<Query><Where><Gt><FieldRef Name=’ID’ /><Value Type=’Counter’>0</Value></Gt></Where></Query>”;
SPListItemCollection SPLIC = Forms.GetItems(qry);
if (SPLIC != null && SPLIC.Count > 0)
{
foreach (SPListItem SPLI in SPLIC)
{
string OptionTitle = “”;
string OptionID = “”;
if (SPLI["ID"] != null)
PanelID = SPLI["ID"].ToString();
if (SPLI["Title"] != null)
PanelTitle = SPLI["Title"].ToString();
if (PanelTitle != “” && PanelID != “”)
ddl_Options.Items.Add(new ListItem(OptionTitle, OptionID));
}
}
}
}
Controls.Add(lbl_Panels);
Controls.Add(ddl_Panels); - Now, back in your MyWebPartUserControl.ascx.cs file, add the following line of code to your OnPreRender() method:
lbl_MySelection.Text = WebPart._OptionValue;This will set the label in your Web part’s User Control to the value of the DropDown list in your custom EditorPart tool pane property.
