In this post we will learn how to Create a Custom WebPart in SharePoint
Step 1: Create the Webpart
The first step is to create the WebPart. Below is the code snippet of a webPart. So we need to reference the ‘WebParts’ , the custom webpart class should inherit from ‘WebPart’ class and finally we need to override the ‘CreateChildControls’ method with our custom implementation.
using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using System.Text;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;------>Refer to "WebParts" namespace
namespace ClassLibraryWebpart
{
[Guid("fe3f223e-1646-4398-b759-57992fc9436e")]
public class SimpleLabelWebPart:WebPart---->Inherit from "WebParts" class
{
/// <summary>
/// Create all your controls here for rendering.
/// Try to avoid using the RenderWebPart() method.
/// </summary>
protected override void CreateChildControls()---->Override the "CreateChildControls" methods
{
base.CreateChildControls();
//we have implemented a simple logic by creating a lable and adding it to controls collection
Label lbl = new Label();
lbl.Text = "Hey this is the lable";
this.Controls.Add(lbl);
}
}
}
Step 2 : Copy the compile DLL to the virtual directory in the BIN folder.
The second step is to copy the compiled DLL in the virtual directory of the sharepoint site.
You can get the virtual directory from the IIS from home directory tab in IIS. For instance the current website is hosted on the sharepoint 80 virtual site which is actually located at ‘C: \Inetpub\wwwroot\wss\VirtualDirectories\80’.
So now let’s browse to ‘C: \Inetpub\wwwroot\wss\VirtualDirectories\80\bin’ directory and copy the DLL in the bin folder.
Step 3: Make entry of the WebPart in to web.config file.
Now that we have copied the DLL to ‘bin’ folder , we need to make a ‘SafeControl’ entry in the ‘Web.Config’ file of the virtual directory.
So now let’s browse to ‘C:\Inetpub\wwwroot\wss\VirtualDirectories\80’ , open the web.config file and add the class library name in the ‘SafeControls’ section of the web.config file. Below code snippet shows the same in a visual manner.
<SafeControl Assembly="ClassLibraryWebpart" Namespace="ClassLibraryWebpart" Version=1.0.0.0, Culture=neutral, PublicKeyToken=d488f7bf0d4a4166" TypeName="*" Safe="True" />
Step 4: Add it to the WebPart gallery
Now that we have added the WebPart in the ‘web.config’ file its time to make it available in the web part gallery. So click on Site settings à then click webparts à Click new button, you should see the figure shown below.
You can also see the webpart which you recently added is seen the gallery. To make it available click the check box and click populate gallery.
You should now see your webpart ( for this context it is SimpleLabelWebPart) in the WebPart gallery.
Step 5: Add the WebPart to site pages.
Ok so now that our WebPart is available in the gallery it’s time to add this WebPart to a SharePoint page. So goto the page where you want to add this WebPart , click on the site action menu and click edit page as shown in the below figure.
On the page you should see a ‘Add a webpart’ button , click on it and it will populate with the existing web parts. Browse to your web part and click add.
Once done your webpart is now added to the site page. You can edit the default webpart properties by clicking on ‘Modify Shared WebPart’. For simplicity sake we have changed the title.
Step 6: View the WebPart
You can see the changed title display when view the page normally. So with a few lines of coding you can see how we have achieved huge customization.
Step 1: Create the Webpart
The first step is to create the WebPart. Below is the code snippet of a webPart. So we need to reference the ‘WebParts’ , the custom webpart class should inherit from ‘WebPart’ class and finally we need to override the ‘CreateChildControls’ method with our custom implementation.
using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using System.Text;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;------>Refer to "WebParts" namespace
namespace ClassLibraryWebpart
{
[Guid("fe3f223e-1646-4398-b759-57992fc9436e")]
public class SimpleLabelWebPart:WebPart---->Inherit from "WebParts" class
{
/// <summary>
/// Create all your controls here for rendering.
/// Try to avoid using the RenderWebPart() method.
/// </summary>
protected override void CreateChildControls()---->Override the "CreateChildControls" methods
{
base.CreateChildControls();
//we have implemented a simple logic by creating a lable and adding it to controls collection
Label lbl = new Label();
lbl.Text = "Hey this is the lable";
this.Controls.Add(lbl);
}
}
}
Step 2 : Copy the compile DLL to the virtual directory in the BIN folder.
The second step is to copy the compiled DLL in the virtual directory of the sharepoint site.
You can get the virtual directory from the IIS from home directory tab in IIS. For instance the current website is hosted on the sharepoint 80 virtual site which is actually located at ‘C: \Inetpub\wwwroot\wss\VirtualDirectories\80’.
So now let’s browse to ‘C: \Inetpub\wwwroot\wss\VirtualDirectories\80\bin’ directory and copy the DLL in the bin folder.
Step 3: Make entry of the WebPart in to web.config file.
Now that we have copied the DLL to ‘bin’ folder , we need to make a ‘SafeControl’ entry in the ‘Web.Config’ file of the virtual directory.
So now let’s browse to ‘C:\Inetpub\wwwroot\wss\VirtualDirectories\80’ , open the web.config file and add the class library name in the ‘SafeControls’ section of the web.config file. Below code snippet shows the same in a visual manner.
<SafeControl Assembly="ClassLibraryWebpart" Namespace="ClassLibraryWebpart" Version=1.0.0.0, Culture=neutral, PublicKeyToken=d488f7bf0d4a4166" TypeName="*" Safe="True" />
Step 4: Add it to the WebPart gallery
Now that we have added the WebPart in the ‘web.config’ file its time to make it available in the web part gallery. So click on Site settings à then click webparts à Click new button, you should see the figure shown below.
You can also see the webpart which you recently added is seen the gallery. To make it available click the check box and click populate gallery.
You should now see your webpart ( for this context it is SimpleLabelWebPart) in the WebPart gallery.
Step 5: Add the WebPart to site pages.
Ok so now that our WebPart is available in the gallery it’s time to add this WebPart to a SharePoint page. So goto the page where you want to add this WebPart , click on the site action menu and click edit page as shown in the below figure.
On the page you should see a ‘Add a webpart’ button , click on it and it will populate with the existing web parts. Browse to your web part and click add.
Once done your webpart is now added to the site page. You can edit the default webpart properties by clicking on ‘Modify Shared WebPart’. For simplicity sake we have changed the title.
Step 6: View the WebPart
You can see the changed title display when view the page normally. So with a few lines of coding you can see how we have achieved huge customization.
