Here is a quick tutorial on how to insert data into a SharePoint list using a web part. The web part will have an input form for the users and when submitted, will add the data to the list. I have used SharePoint 2010 and Visual Studio 2010 in this tutorial.
You can access files for this project at http://feedbackWP.codeplex.com/
The Project
We have a SharePoint list “Feedback”.We need a WebPart to allow users to submit feedback. The feedback will consist of the “Title” and the “comments”. These two items will need to be saved in the SharePoint list.
The Solution
We will create a WebPart which will display an HTML form and will insert the data into the SharePoint list. The structure of the page this WebPart will create is as follows:Outer most Division (div)
---- Top Heading (h2)
---- Description (p)
---- Outer division for Table (div)
----- Table
----Table Row
---- Confirmation message Paragraph (p)
Important Note: I personally don’t like hardcoding SP List names in my WebParts because if the name of the list where data will be saved changes or if it is deleted, my WebPart will cease to work. So in this WebPart I will make use of what is called a “WebPart property”. WebPart properties allow you to set values using WebPart edit area.
Ok, so let’s start!
Step#1 Create a New SharePoint Project
Open visual studio 2010 and create a new “Empty SharePoint Project”. We will save this project as “feedBackWP”.Visual Studio 2010 has the capability of deploying your WebPart right from the studio. So, when you create a new project, it will ask you for the SharePoint server URL where your WebPart will be deployed.
Confirm your SharePoint URL by clicking on “validate” button.
Once you are done, you should see your project solution similar to the following image.
Step#2 Add trust information
Your assembly file should now look like:
Step#3 Writing the Code
Right click on your project and add new Item. Select WebPart from the list and name it “InputForm”.At this point you should see InputForm folder created for you.
Inside this folder you should have InputForm.cs file (this is where our WebPart code will go).
Open InputForm.cs and add the following namespace:
System.Web.UI.HtmlControls
Also insert the global variables block as shown in the image.
A little explanation about this code:
- We added the namespace because we will be using html tags in our WebPart.
- We declared global variables so that they are accessible throughout the WebPart code.
- _FeedbackListName variable will hold the name of the list where we will save our data. Earlier on in this post I had mention that I will not hardcode the list name.
- Comments and f_title are the textboxes. I need them globally because I need to access them from inside the Submit Button function.
- InputFormDiv will be a “div” tag and it is global so that I can hide or show it from anywhere I want.
WebPart property
Now we will add the FeedbackListName WebPart property so that users can set this variable from GUI interface.Add the initialization section and the property section as shown in the image.
Here is a screenshot of how this property will look like, in case you are wondering.
Important Functions
In our WebPart we will use three functions DisplayForm(),GetRow() and SubmitBtn_Click().Displayform Function
This function will return complete HTML for our input form. The form textboxes will be inside HTML Table and the Table will be inside a Division. We did it this way so that we can easily hide the whole table by setting the outer division to hidden.
GetRow Function(label text, HTML control)
This function takes two arguments, the text for the label and the HTML control. This function returns TABLE row (TR) and inside the TR are two columns (two TDs). One TD contains the label and the other one contains the control.
SubmitBtn_Click function
This is the event handler for our submit button. This function saves the data into the SharePoint list, hides the input form and displays the confirmation message.
Here is the DisplayForm function
Here is the GetRow Function
Here is the SubmitBtn_Click function
Main WebPart area code
Now let’s code the main area. We will begin by adding the Outer most division (div). Keep in mind that all of this code goes inside CreateChildControls().Add Heading
The heading will be h2 and will go on the top of the page. It will be styled to align center.
Add top paragraph
This is a regular HTML P tag paragraph.
Calling the input form.
The if statement in this code checks if list name has been set. A warning is shown if list name is absent.
Deployment
IMPORTANT NOTE: There is more than one way you can deploy your webpart. Click here to see a post about these different methods.Once the coding is complete, click on build > deploy
In the output window you should see the deployment success status.
Go to the SharePoint site and click on Site Action > New Page.
From new page click on Insert and then on WebPart.
From WebPart list click on custom. This should bring up our WebPart on the right hand side.
With the WebPart selected click on the add button.
When the WebPart is added you will see the default message to add list name.
WebPart Setup
Go into WebPart edit mode and enter the list name. In our case the name of the list is “feedback”.One the list name is entered; you should see the input form. Fill out the form and hit submit.
Check the list. Your entry should appear there.
So that’s it!
I will try to find some time to write post on how to use the comments from the list and display it using WebPart.
You can access files for this project at http://feedbackWP.codeplex.com/
7 comments:
thanks very much for this! I have been looking for a springboard into creating an insert webpart.
Hi There, brilliant work, can this be modified easily as a solution fo an Office 365 environment?
Hi,
You should be able to user this in your Office sharepoint. If your environment does not allow you to publish web parts using Visual Studio..... you can install this using the DLL and/or WSP file it creates. Just make sure you have created a Sharepoint list. You read about deploying solution using DLL here http://www.razafayyaz.com/2012/11/different-ways-to-deploy-webpart-on.html
if this is not what you were asking, please feel free to let me know.
Thanks.
Hey! Just wanted to ask how I can add checkboxlist column to the Sharepoint list?
Hi Roohiya,
//declare a chec box
CheckBoxList MyCheckBoxList = new CheckBoxList();
MyCheckBoxList.ID = "MyCheckBoxListID";
//add items
MyCheckBoxList.Items.Add("I Like Apple");
MyCheckBoxList.Items.Add("I like Mango");
MyCheckBoxList.Items.Add("I like Pineapple");
//Add the checkbox to the page
phCurrentStep.Controls.Add(MyCheckBoxList);
How can I add a Sharepoint PeoplePicker? Thanks
you can use People Editor for this.
PeopleEditor pe = new PeopleEditor();
pe.ShowEntityDisplayTextInTextBox = true;
pe.AllowTypeIn = true;
pe.BorderColor = System.Drawing.Color.Black;
pe.BorderWidth = 1;
pe.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid;
this.Controls.Add(pe);
Post a Comment