Wednesday, June 6, 2007

Developing Custom Web Part

Prerequisites

Make sure you have the following in your development environment:
1. A server with Microsoft Office SharePoint Server 2007 installed.
2. Microsoft Visual Studio 2005 or a similar Microsoft .NET Framework 2.0-compatible development tool installed.

To create the project for the Web Part
1. In Visual Studio 2005, on the File menu, point to New, and then click Project.
2. In Project types, under C#, select Windows.
3. Under Templates, select Web Control Library.
4. In the Name field, type SampleWebPart, and then click OK.



Note : If you are using Visual Studio 2008, then select Class Library project template.


Next you must add the required references to your Web Part project.


To add references to the SearchBDCWebPart project
1. On the Project menu, click Add Reference.
2. On the .NET tab, select each of the following references, and then click OK after each selection:
a. System.Data
b. System.XML
c. Microsoft.SharePoint
Note: “Microsoft.SharePoint”, “Microsoft.Office.Server” and “Microsoft.Office.Server.Search” dlls are present at following locations: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\ISAPI\

Before you add code for the Web Part, replace the default class file with a new class file.

To create the class file for the Web Part
1. In Solution Explorer, right-click WebCustomControl1.cs, and then click Delete to remove the default class created with the project.
2. On the Project menu, click Add New Item.
3. In the Add New Item dialog box, click Web Custom Control, type Display.cs, and then click Add.




To modify the default code in Display
1. Add the following namespace directives near the top of the code in Display.cs:using System.Web.UI.WebControls.WebParts;
2. In the following code line, replace WebControl with System.Web.UI.WebControls.WebParts.WebPart.public class Display : System.Web.UI.WebControls.WebParts.WebPart

To add the Web Part's child controls and render them
1. Add the following code below the class declaration:




TextBox tb = new TextBox();
Button btn = new Button();
Label lbl = new Label();





2. Override the CreateChildControls method by using the following code:




protected override void CreateChildControls()
{
btn.Text = "Click Me";
btn.Click += new EventHandler(btn_Click);

this.Controls.Add(tb);
this.Controls.Add(btn);
this.Controls.Add(lbl);
}



3. Add a click event for btn, using the following code:




void btn_Click(object sender, EventArgs e)
{
lbl.Text = tb.Text;
}




4. Add following code to render the controls:





protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
EnsureChildControls();
RenderChildren(writer);
}





To deploy the custom Web Part to your site

Note : For development and testing purpose, don't use Central Administration site. You can create your own site from
Central Administration > Application Management > Create or Extend Web Application. For detailed instructions, please refer Create or extend Web applications.

1. Create a strong-named for your Web Part, so you can deploy it in the global assembly cache.

Right click the project in Solution Explorer, and then select Properties.
Select Signing, check Sign the assembly check bob. In the dropdown select New. In Create a Strong Name Key dialog box, enter the key and uncheck Protect my key file with a password.




Press OK and build the solution.
2. Drag-n-drop your project dll to Global Assembly Cache (i.e. “C:\WINDOWS\assembly”).
3. Open the web.config of your site.



Note : In the above figure --- 80 is the port number of my site, it may be different in your case.

Enter following code in it under SafeControls element:


<SafeControl Assembly="SampleWebPart, Version=1.0.2708.19816, Culture=neutral, PublicKeyToken=feb6aaf72958fff3" Namespace="SampleWebPart" TypeName="*" Safe="True" />

For Version and PublicKeyToken, right click the dll in GAC and select Properties.



4. Create a SampleWebPart.webpart, and enter following code in it:


<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<type name="SampleWebPart.Display" />
<importErrorMessage>Cannot import this Web Part.
</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">Sample Web Part
</property>
<property name="Description" type="string">Sample Web Part
that display label.</property>
</properties>
</data>
</webPart>
</webParts>




You can Save SampleWebPart.webpart to any desired location.
To test the custom Web Part
1. Select your site, on which you want to add your Web Part.
2. Under Site Actions, click Edit Page. All the Web Parts in your site gets displayed in Edit mode.
3. Click any Add a Web Part link present in your edit-mode site.
4. Add Web Parts -- Web Page Dialog gets open. In that select Advanced Web Part gallery and options present in the bottom of the dialog box.

5. Add Web Parts window gets open on the right side of your side. Under Browse tab, click the small triangle present in it on the right side. Select Import present in the menu.

6. Import page gets open on the right side of your site. Browse the SampleWebPart.webpart file and upload it by clicking the Upload button.

Your Web Part gets displayed in the Uploaded Web Part section in Import page.

7. Now drag-n-drop your Web Part to any Web Part zone.


8. Now exit the Edit mode by clicking the Exit Edit Mode link present below the Site Actions.

9. Now your Web Part is ready for use.



Appendix

Display.cs


using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

namespace SampleWebPart
{
public class Display :
System.Web.UI.WebControls.WebParts.WebPart
{
TextBox tb = new TextBox();
Button btn = new Button();
Label lbl = new Label();

protected override void CreateChildControls()
{
btn.Text = "Click Me";
btn.Click += new EventHandler(btn_Click);

this.Controls.Add(tb);
this.Controls.Add(btn);
this.Controls.Add(lbl);
}

protected override void Render
(System.Web.UI.HtmlTextWriter writer)
{
EnsureChildControls();
RenderChildren(writer);
}

void btn_Click(object sender, EventArgs e)
{
lbl.Text = tb.Text;
}
}
}






SampleWebPart.webpart


<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<type name="SampleWebPart.Display" />
<importErrorMessage>Cannot import this Web Part.
</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">Sample Web Part
</property>
<property name="Description" type="string">Sample Web Part
that display label.</property>
</properties>
</data>
</webPart>
</webParts>







Suggested Links:

1. Getting Started with Custom Enterprise Search Web Parts:
http://msdn2.microsoft.com/en-us/library/ms564508.aspx

2. Building Custom Enterprise Search Web Parts:
http://msdn2.microsoft.com/en-us/library/ms584220.aspx

3. Walkthrough: Creating a Custom Enterprise Search Web Part:
http://msdn2.microsoft.com/en-us/library/ms551453.aspx

4. Walkthrough: Creating an ASP.NET Web Part for the AdventureWorks Business Data Application Sample:
http://msdn2.microsoft.com/en-us/library/ms558854.aspx

2 comments:

Anonymous said...

Hi,

I did try your code. It compiled properly. But while adding the web part to the sharepoint page, it gives "Cannot import thi webpart" error.

Any idea what could be the issue. Are there any logs where I can go to check the problem?

Avinash said...

Hi,

You can check following thing before running / using your webpart:

1) Inherit from WebPart (ASP.Net or MOSS) class.
2) Implement method(s) specified in the post.
3) Create Strong name of project.
4) Create *.webpart (ASP.NET webpart) or *.dwp (MOSS webpart) file.
5) Register DLL in GAC.
6) Safecontrol entry in Site's web config.
7) Drag-n-Drop your webpart in Site's page.

Google