Develop SharePoint webparts 


Most of the times you need to  develop SharePoint webparts based on various requirements of the project by customizing your SharePoint site.

Even though there are lots of requirements and functionality can be achieved using SharePoint OOB (out of the box) features, still you might require more often than not need to write code to develop SharePoint webparts in SharePoint server to achieve the requirements of the client. 

To understand the SharePoint webpart development, in this post we will work on one basic example where you will insert the details to a SharePoint list and display those details in a gridview.  

Once you complete this article, you will understand what is 

  1. Scope in SharePoint,
  2. Elements.xml for deployment of SharePoint webparts,
  3. . webpart file in webparts,
  4. Object model using SPlist object for performing list operations,
  5. CAML query.


Most of the above details are important while developing a basic SharePoint development. Especially while developing the SharePoint webparts.

Webpart development:

We will use Visual studio 2012 to develop SharePoint webparts and deployed them to SharePoint 2013 environment.

To start developing webparts, open visual studio 2012

Click on [file] [New Project] ,  it will open the below figure from the SharePoint solutions  select SharePoint 2013-empty project .

SharePoint 2013 Empty project

Once you click ok, It will open the create project wizard where you can select or enter  the site URL from where you can deploy the SharePoint webparts as a sandboxed solution or farm solution. In this POC select deploy as a sandbox solution.

project-wizard

Click on finish button. It will create an empty project. Now its time to add web part to the project that has been created.

Right click on the project and [add] [New item..] , select web part item  and enter "Projects" in Name section and click  "Add" button. The web part item will get added to the project.

SharePoint Webpart

Once you add the SharePoint webpart it will create feature1 under features folder. Edit the feature by right clicking on the feature or select it and press F2 keyword then modify the feature name.

To change the Title and description properties double click on it. In the below figure we are mentioning Title as Projects and Description as "Add and display the Projects"  and also the scope of the web part always is at site level i.e. Referring a particular Site collection.

There are four levels of scopes in SharePoint.

1. Farm : This scope will be used to deploy the components at Farm level.

2. Web application : This scope will be used to deploy the components at web application level.

3. Site : This scope will be used to deploy the components at site collection level.

4. Web : This scope will be used to deploy the components at site level.


webpart feature

Elements.xml :

Once you add a webpart to the project it will create two files one is Elemnts.xml and other one is .webpart file. Below code snippet shows the details of elements.xml file.

Module in elements.xml file specifys where to deploy the component or arifact in SharePoint site and the list id =113, which specifies web part gallery  and URL Specifies the virtual path where the files will get deployed when you deploy the feature.


Please check more details about module  here.

.webpart File :

Below code snippet shows the details of .webpart file.

In the below code metadata  will have information about the webpart. Type contains the full path of the source file and importErrorMessage  used to display the message to the users where there is an error while importing the webpart and you can see the usage of resource files for multilingual support..

To see how the properties will work, deploy this SharePoint webpart by right clicking on the project and click on deploy, it will get deployed to the SharePoint site which you specified in the properties. 

Open the SharePoint site ..

Go to [site settings] [webparts under web designer galleries] where all SharePoint webparts will be available.

To check the webpart you have deployed just now by sorting modified date field. Recently deployed web part  will show  *New symbol.

Click on Edit button against your webpart, it will show the below figure how the values of Title and Description properties you have in .webpart file showing it here.

If you want to change the values of  these properties, you simply use the Export button in the ribbon control and download it your local folder and upload it back again to change the Title and description values.

web-part-gallery

Please check here for full reference of .webpart file

Webpart class file:

The webpart class file inherits from System.Web.UI.WebControls.WebParts.webpart and which is an ASP.net class. Once you add a webpart, CreateChildControls method will get created by default. This method is very important in a webpart life cycle where different events will fire.

CreateChildControls method used to render various controls like textbox, button, gridview etc.


Add List Item:

The below code snippet is used to add project details to a SharePoint list.

In the below code I have used Textbox and button controls.

If you observe the below snippet the controls are created and added in createchildcontrols method.

In the button click event we have written a simple object model to deploy the values to SharePoint list.

Check the best coding practices article.

After adding the above code, build the solution and right click on the project and deploy it.

To add webpart click on Page and click on the Edit button from the ribbon control.

From the below figure click on Insert and select webpart from custom category select your webpart and click on add.

Add-webpart-to-page

Once you have added the webpart, save and publish the page.

Project Details-Add Item

Test webpart:

Create SharePoint List:

Create Projects List to store the values by clicking on site contents from recent section on the home page or the settings button on the top right of the site.

Click on add an App button and select the Custom List and enter the Name as Projects and click on create button.

Once you created the Projects list, go the webpart page enter Project name as "Project A" and click Add, you can see that item has been added to the list. See the below figure for reference.

Project Details-Added to List

So far we have developed SharePoint webpart which will used to save items in custom SharePoint list.

The next part is how to display the details which we have stored in a SharePoint list.


Display List details:

To display SharePoint list we have many ways such as using CAML query, Jquery with the help of SPservices etc.

In this post we will be using CAML query to get the list details which have been stored before.

Lets quickly see the below code snippet where we are using getdata method to get the Id and Title of projects list. We are using SPquery object to execute the CAML query.

If you are learning CAML check this article to learn the basics of CAML.

You can check the CAML designer  under the downloads section of site for SharePoint 2013 here earlier we call it as CAML builder.

In the below CAML query where condition doesn't have any impact, but you can learn how the Where condition will be used in CAML query.

Once you complete the code, build and deploy the solution to test.

Conclusion:

In this post you have seen how to develop SharePoint webparts in SharePoint 2013 using visual studio 2012.

Which will be used to insert a list item using object model and get the list details using  CAML query and display it in a gridview.

You have also understood the importance of scope in SharePoint. Elemnets.xml and .webpart importance in development of SharePoint Web Parts.

In the next article you will get to know how to develop custom properties in a webpart and what is the importance of it in SharePoint server.



› SharePoint webparts

About Author

Devendra Velegandla is a four-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2017) for Office Servers and Services MVP and  SharePoint Server. He received the MCC award for his contributions in Microsoft MSDN/TechNet forums. He loves sharing articles, videos, and tutorial on SharePoint and Office 365.


If you found this post helpful, please share it with your friends!!


Join 6,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers