SharePoint 2010 - Web Parts Programming

In this article we will explore Web Parts, one of the important extensible tools in SharePoint. We can use Visual Studio to create Web Parts.

What are Web Parts?

Web Parts are user-customizable regions in a SharePoint web page. It is an ASP.NET custom control which inherits from Microsoft.SharePoint.WebPartPages.WebPart. A Web Part needs the following to work with:

• WebPartZone
• WebPartManager

We can create a Web Part using the following ways:

1. Inside SharePoint
2. Using Visual Studio

Creating Web Part using Visual Studio

Now we can try creating a Web Part using Visual Studio 2010. Create a new Visual Web Part project from the SharePoint 2010 templates.



In the next page select the site and click the Finish button.

Inside the Solution Explorer, open the Visual Web Part User Control. This control represents the User Interface of the web part.



Add a label and change the text of it.



Building

Now build the project and once it succeeds, use the Deploy option of project.



Wait for a few minutes and our Web Part gets deployed into the SharePoint site.

Steps in Manual Deployment

Following are the steps in manual deployment:

1. Create Web Part
2. Sign the Assembly
3. Copy to bin/GAC folder
4. Add to SafeControl list of web application

To help us, Visual Studio does all this for us.

Viewing the Web Part

For viewing the web part, use the Edit Page from any page and access the Add Web Part dialog.



Inside the Custom category we will see the newly created web part. Click on the Add button and you will see the web part as shown below.



Rendering Web Part

The rendering of the web part is done by the class named VisualWebPart1. You can see the CreateChildControls() method inside it.

protected override void CreateChildControls()
{
    Control control = Page.LoadControl(_ascxPath);
    Controls.Add(control);
}

Here the User Control (ASCX) is rendered to the web part using the Controls.Add() method.

Note: In this example we have just used the label control. We can also use the other ASP.NET controls ins web parts.

Kinds of Web Parts

There are 2 kinds of web parts:

1. Classic Web Parts (Add new item > Web part)
2. Visual Web Parts (Add new item > Visual Web part)

Tool Parts

Along with the web part, we can associate specific controls in the properties area of the web part. The Edit Web part command brings the Tool window on the right side.



If we add a custom control or property into the above area it is called as Tool Part.

• We are experimenting with adding a Tool part consisting of following controls:
  Drop Down List with existing List Names
• Text Box control to capture the Customer Name

The following are the activities involved:

• Add a CustomerName property inside Web Part
• Create a custom class inheriting ToolPart
• Render Controls inside ToolPart

The following are the modifications in the VisualWebPart class:

public override ToolPart[] GetToolParts()
{
    ToolPart[] allToolParts = new ToolPart[3];
    WebPartToolPart standardToolParts = new WebPartToolPart();
    CustomPropertyToolPart customToolParts = new CustomPropertyToolPart();

    allToolParts[0] = standardToolParts;
    allToolParts[1] = customToolParts;
    allToolParts[2] = new MyToolPart();

    return allToolParts;
}

protected override void Render(HtmlTextWriter writer)
{
    base.Render(writer);
    writer.Write(CustomerName);
}

[Browsable(false),
    Category("CustomToolPart"),
    DefaultValue("Default Name"),
    WebPartStorage(Storage.Personal),
    Personalizable(PersonalizationScope.User),
    FriendlyName("Customer Name"),
    Description("The name of the customer")]
public string CustomerName
{
    get;
    set;
}

The following is the definition of the ToolPart class:

public class MyToolPart : Microsoft.SharePoint.WebPartPages.ToolPart
{
    private DropDownList _dropDownList;

    protected override void CreateChildControls()
    {
        Panel panel = new Panel();
        dropDownList = new DropDownList();
        _dropDownList.ID = "id2";

        // Populate lists inside DropDownList control
        SPListCollection lists = SPContext.Current.Web.Lists;
        foreach (SPList list in lists)
            _dropDownList.Items.Add(list.Title);

        TextBox textbox = new TextBox();
        textbox.ID = "id3";

        panel.Controls.Add(_dropDownList);
        panel.Controls.Add(textbox);
        Controls.Add(panel);

        base.CreateChildControls();
    }

    public override void ApplyChanges()
    {
        VisualWebPartProject1.VisualWebPart1.VisualWebPart1 webpart = (VisualWebPartProject1.VisualWebPart1.VisualWebPart1)this.ParentToolPane.SelectedWebPart;
        webpart.CustomerName = "You selected: " + _dropDownList.SelectedValue;
    }
}

Build and Deploy the project and use the Edit Web Part option. You will see the new controls in the Tool Part panel as shown below:



Select a List item and click the Ok button. You will see the List item name displayed in the web part as shown below:



Custom Properties for Web Part

You might have noticed that the Web Part custom property has some attributes. Each of them are described below.
The following is example code for the custom property:
 

Property	Description
Browsable	If false, the property is not displayed on the web part property pane
DefaultValue	Default Value for the property
WebPartStorage	Shared, Personal and None are the enumeration members
FriendlyName	The name for the property for display purposes
Description	The tooltip about the property

References

http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webpartpages.webpart.aspx
http://archive.msdn.microsoft.com/DataAccessWebPart
http://www.zimmergren.net/technical/how-to-custom-web-part-properties-toolpart
http://msdn.microsoft.com/en-us/library/dd584174%28v=office.11%29.aspx

Summary

In this article we have explored Web Parts creation, data access, connectable web parts etc. In real-world scenarios Web Parts provide a handy tool for the developer. The attachment contains the source code we discussed.