SharePoint 2010 – Web Parts Programming

In this article we can explore Web Parts one of the important extensible tool inside SharePoint. Using Visual Studio we can create Web Parts.

What are Web Parts?

Web Parts are user customizable regions inside a SharePoint web page. It is an ASP.NET custom control which inherits from System.Web.UI.WebControls.WebPart. A Web Part needs the following to work with:

· WebPartZone

· WebPartManager

We can create Web Part using the following ways:

1. Inside SharePoint

2. Using Visual Studio

clip_image002

Creating Web Part using Visual Studio

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

clip_image004

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

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

clip_image006

Add a label and change the text of it.

clip_image008

Building

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

clip_image010

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 our help, Visual Studio does all these activities.

Viewing the Web Part

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

clip_image012

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

clip_image014

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 Controls.Add() method.

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

Kinds of Web Part

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.

clip_image016

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

Following are the activities involved:

· Add a CustomerName property inside Web Part

· Create a custom class inheriting ToolPart

· Render Controls inside ToolPart

Following are the modifications inside 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;

}

Following is the definition of 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 can see the new controls in the Tool Part panel as shown below:

clip_image018

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

clip_image020

Custom Properties for Web Part

You might have noticed that the Web Part custom property having some attributes. Each of them are described below:

Following is an example code for 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(v=office.11).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.

2 thoughts on “SharePoint 2010 – Web Parts Programming

  1. Pascal says:

    Can you put your example??? please

    1. Jean Paul says:

      Hello Mixon,

      You can download source code from following location:
      http://sharepoint.inzeon.com/sp2010/Source.zip

      Regards,
      Jean Paul

Leave a Reply

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