How to program a simple SharePoint web part
Web parts can be little components that can be added a SharePoint page. SharePoint already has a number of web parts that already come installed in the package (e.g. lists, calendars).
These web parts do not always meet the business needs of an end user and as such some customisation may be required to align the web part with what the business needs.
For this reason, we will create a simple web part that will ask a user to enter text and at the click of a button, the text will be displayed back to the user. We will achieve this by:
- Using Visual Studio 2010 . Net framework to create a web project.
- Add a Web Part
- Add some c# code and commands to the web Part for the controls (i.e. buttons, text box and labels)
- Build and deploy the web part
- Add it to the page of a SharePoint site
Create a web project
For this part, we will be creating a project called QuestionsAndAnswers.
- As an administrator, Launch Visual Studio 2010
- Select File | New | Project
The SharePoint Customization Wizard will now be displayed. Click on validate to ensure you have connectivity, then select "Deploy as a farm solution" and then click on "finish".
The project will now be created and will appear in Solution Explorer
Create The Web Part
Right click on the QuestionsAndAnswer Node in the solution explorer and click on Add | New Item
Click on the template called Web Part and enter the name of the web part as QuestionsAndAnswerWebPart and then click on Add.
The QuestionsAndAnswersweb part .cs file will now be created and made visible. There will already exist some code of which will now need to be edited so as to perform what is required.
Add some code
As above, when you create the web part.cs file some program data is already included. This will now have to be written and edited with additional c# methods so as to make it perform actions.
using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace QuestionsAndAnswers.QuestionsAndAnswersWebPart
{
[ToolboxItemAttribute(false)]
public class QuestionsAndAnswersWebPart : WebPart
{
Label QuestionTitle = new Label();
Label QuestionLabel = new Label();
TextBox TheQuestionTextbox = new TextBox();
Label TheAnswerLabel = new Label();
Button TheClickButton = new Button();
protected override void CreateChildControls()
{
QuestionTitle.Text = "Question and Answers";
QuestionLabel.Text = "Enter Text:";
TheAnswerLabel.Text = "";
TheQuestionTextbox.Enabled = true;
TheQuestionTextbox.Text = "";
TheClickButton.Text = "Click";
this.Controls.Add(QuestionTitle);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(QuestionLabel);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(TheQuestionTextbox);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(TheClickButton);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(TheAnswerLabel);
TheClickButton.Click += new EventHandler(TheClickButton_Click);
}
void TheClickButton_Click(object sender, EventArgs e)
{
string userResponse = "You entered " + TheQuestionTextbox.Text;
TheAnswerLabel.Text = userResponse;
}
void TheClearButton_Click(object sender, EventArgs e)
{
TheQuestionTextbox.Text = "";
TheAnswerLabel.Text = "";
}
}
}
Build and Deploy the web part
After adding the code, ensure that there are no syntax errors.
Add web part to SharePoint site
Customised web parts appear in the SharePoint web part galleries under the node "Custom"
On the SharePoint site, click on Site Actions | Edit Page | Add Web Part
Select Categories | Custom | Web parts and then select the Questions and Answers Web Part and click on Add.
- The web part will now be added
Complete Code
using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace QuestionsAndAnswers.QuestionsAndAnswersWebPart
{
[ToolboxItemAttribute(false)]
public class QuestionsAndAnswersWebPart : WebPart
{
Label QuestionTitle = new Label();
Label QuestionLabel = new Label();
TextBox TheQuestionTextbox = new TextBox();
Label TheAnswerLabel = new Label();
Button TheClickButton = new Button();
Button TheClearButton = new Button();
protected override void CreateChildControls()
{
QuestionTitle.Text = "Question and Answers";
QuestionLabel.Text = "Please Enter some text:";
TheAnswerLabel.Text = "";
TheQuestionTextbox.Enabled = true;
TheQuestionTextbox.Text = "";
TheClickButton.Text = "Click";
TheClearButton.Text = "Clear";
this.Controls.Add(QuestionTitle);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(QuestionLabel);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(TheQuestionTextbox);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(TheClickButton);
this.Controls.Add(TheClearButton);
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(new LiteralControl("<br/>"));
this.Controls.Add(TheAnswerLabel);
TheClickButton.Click += new EventHandler(TheClickButton_Click);
TheClearButton.Click += new EventHandler(TheClearButton_Click);
}
void TheClickButton_Click(object sender, EventArgs e)
{
string userResponse = "You entered " + TheQuestionTextbox.Text;
TheAnswerLabel.Text = userResponse;
}
void TheClearButton_Click(object sender, EventArgs e)
{
TheQuestionTextbox.Text = "";
TheAnswerLabel.Text = "";
}
}
}