11.13.2012

Using WebPart to insert data into SharePoint List

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


Open AssemblyInfo.cs file from properties folder and at the very end of the file add:


[assembly: AllowPartiallyTrustedCallers]

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).



Global Variables and NameSpace

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:

  1. We added the namespace because we will be using html tags in our WebPart.
  2. We declared global variables so that they are accessible throughout the WebPart code.
  3. _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.
  4. Comments and f_title are the textboxes. I need them globally because I need to access them from inside the Submit Button function.
  5. 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:

  1. thanks very much for this! I have been looking for a springboard into creating an insert webpart.

    ReplyDelete
  2. Hi There, brilliant work, can this be modified easily as a solution fo an Office 365 environment?

    ReplyDelete
    Replies
    1. 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.

      Delete
  3. Hey! Just wanted to ask how I can add checkboxlist column to the Sharepoint list?

    ReplyDelete
    Replies
    1. 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);

      Delete
  4. How can I add a Sharepoint PeoplePicker? Thanks

    ReplyDelete
    Replies
    1. 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);

      Delete