Saturday, 20 February 2016

How To Create a new Custom Visual WebPart in SharePoint 2013 with Visual Studio2012

What is a Web Part?

WebPart is  a user control that is deployed at Site Collection level so that all sites under the site collection can reuse it.

Types of a SharePoint Web Part?

There are two types of Web Parts in SharePoint:
  • Standard/Traditional Web Part
  • Visual Web Part
The primary difference is that visual web part has the flexibility to drag and drop items on our canvas giving us a designer experience. While standard web part doesn’t have that flexibility and we have to manually do the coding stuff.

Scenario:
we will learn how to create Custom Visual Web Part using Visual Studio? and further how to add data from Visual Web Part to a SharePoint list?

Step 1: Creating a Custom List in SharePoint Site

  1. Create a customList and give a name as  “Employee” in your SharePoint site using SharePoint2013.
  2. Add following columns in newly created list.
    • Name
    • Phone No
    • Address

Step 2:

Create a new Empty SharePoint 2013 Project using VisualStudio2012.

  1. Provide SharePoint site URL, where you want to deploy your solution and select “Deploy as a farm solution” option.
  2. Now, Right Click on the Project, then Select “Add” and click the “New Item” link in the context menu.
  1. This invoke the “Add New Item” window. In the “Visual C# Section” Templates, select “Visual Web Part”.
  2. Provide a name for the Visual Web Part and click “Add” button to add it to the SharePoint Project.

This will add a new Site Collection scoped Feature to the SharePoint project along with the newly added Visual Web Part. This WebPart will be automatically added to the feature. This you can find out by double.

Double click on the Feature1
Double Click the .ascx file created in Step 5. Add controls that are required for Visual Web Part by expanding the Toolbox pane available in the left hand side of Visual Studio.

Double click the Save button, it will open .cs file. Add following code in button click event.
Now, right click the solution and click on Deploy option.
This process will deploy solution on the SharePoint site and add your custom web part in web part gallery

SharePoint Calender Web Part is an excellent example that shows all events from different data sources including Exchange, SharePoint List, Google, SalesForce, SQL Table or XML and further present in multiple views.

Step 3: Add Web Part to the Page

Open the page and click on the edit page option. From the insert tab, select webpart icon. Choose the custom webpart.

Enter Details and Click on Save button. This data will save in the employee list.


Thanks
--shiva

at