SharePoint 2013 - Custom Webparts

Overview
Many times you may come across a situation where OOB webparts would not satisfy all you business needs.  In such scenarios you can use Visual studio 2012 to create rich customized webparts using Server object model.

Types of Custom Webparts
Based upon your requirement you can choose either of the following type:-

1) Classic Webparts: Classic webparts can be created by deriving from the WebPart class. You must write the code from scratch, in the CreateChildControls method, to create the layout design of the Web Part, which can be time consuming. One of the challenges that you face when designing a Web Part that has a complex user interface (UI) is the lack of drag-and-drop support.

2) Visual Webparts: Visual webparts wraps asp.net user control inside a classic webpart, so that programmer could work on ascx file as for any other web project instead to have to resort to programmatically create the controls via the CreateChildControl method.

Note: Visual webparts evolved in SharePoint 2013 and can be used for easily creating webparts with rich UI. But the performance is somewhat less compared to classic webparts, since there is an overhead of loading the user controls

The  Solution Package (.wsp)
A solution package is a distribution package that delivers your custom SharePoint Server 2013 development work to the Web servers or the application servers in your server farm. Use solutions to package and deploy custom Features, site definitions, templates, layout pages, Web Parts, cascading style sheets, and assemblies.

Webpart Deployment
To deploy our sample Web Part, as well as any other Web Part implementation, we need to complete the following steps:
1) Build the class into a .NET assembly of type DLL.
2) Make the assembly available to the web application (putting it into GAC, or into web application local bin folder, or into Solution Gallery of current Site Collection).
3) Authorize the Web Part to execute within the SharePoint environment, by adding a specific configuration item into the web.config file of the current web application, declaring the Web Part as a “SafeControl.”
4) Load the Web Part into the Web Parts Gallery of the current site so that it is available to the end user.

Note: In previous versions all the above mentioned steps where done using STSADM.exe command only. But Visual Studio 2012 makes it easy to complete all these deployment steps. Simply select the Build | Deploy Solution to automatically deploy the Web Part on the website.

This is just an overview of custom webparts. In the coming posts we will create and explore the capabilities of custom webparts.

SharePoint 2013 - Adding an out of box webpart

In the previous post we saw the steps for creating a webpart page. In this post we will add a content editor webpart (which is an out of box webpart) to the webpart page.

Adding a webpart

Following are the steps for adding a webpart.

1) Open the webpart page in edit mode.

2) Click on Add a web part link on the page. All the weparts in the current site collection will be listed. Select Media and Content->Content Editor as shown in the image below. Click on Add button to add this webpart.

3) Once the webpart is added, you can add any custom content by clicking on the link "Click here to add new content".

4) After adding the contents, click on Stop Editing link to close the edit mode and view the page in normal display mode.

5) The webpart will be displayed on the page as follows. If the webpart content needs to be changed, open the page again in edit mode and modify the webpart.

Modifying a webpart

6) For editing webpart properties like contents, height, weight etc, open the page in edit mode and select Edit Web Part link as follows. The webpart properties window will appear on the right hand side of the page.

Deleting a webpart

7) For deleting the webpart, open the page in edit mode and select Delete link as follows.

SharePoint 2013 - Creating a WebPart Page

Following are the steps for creating a SharePoint 2013 webpart page.

1) Go to the site and select Page->View All Pages. Alternatively, you can create your own library and select View All Pages option.

2) Click on New Document button and select Web Part Page option.

3) Provide a name for your page and select the suitable layout template. While selecting the template, a layout preview will be displayed on the left. At this point you can also change the document library to which this page will be saved. Click on Create button to complete the creation of the webpart page.

4) Go to the document library and the newly created webpart page will be available there.

SharePoint 2013 - WebParts Overview

In this post we will  discuss about the fundamentals of Webparts in SharePoint 2013.

Webparts
A Web Part, also called a Web Widget, is an ASP.NET server control which is added to a Web Part Zone on Web Part Pages by users at run time. The controls enable end users to modify the content, appearance, and behavior of Web pages directly from a browser. It can be put into certain places in a web page by end users, after development by a programmer.

Types of Webparts
There are 2 types of webparts in SharePoint.
1) ASP.Net Webparts: These webparts are built on top of ASP.Net and inherit from the WebPart base class in the System.Web.UI.WebControls.WebParts. We can use these web part to create rich and highly reusable custom webparts.
2) SharePoint Webparts:  These Web Parts inherits from the WebPart base class in the Microsoft.SharePoint.WebPartPages namespace. These Web Parts can only be used in SharePoint websites to provide backwards compatability with MOSS 2003 webparts.

Webpart Archietecture
Following figure shows the overall architecture of a SharePoint 2013 Webpart.

Where, the main components supporting Webparts are:
1) Webpart Zones
To be able to fully utilize a Web Part in a page, you need to define a WebPartZone control, which is a container for a set of Web Parts.
2) Webpart Manager
Another fundamental control in the Web Parts architecture is the WebPartManager, which handles all the tasks related to Web Parts lifetime management, such as loading/unloading and serializing/deserializing their state within the current page, and connecting Web Parts into Web Part Zones. The WebPartManager control has been redefined in SharePoint into a custom implementation called SPWebPartManager, which handles some specific activities exclusively available in SharePoint.
3) Webpart Page
In order to leverage these controls, SharePoint also provides a custom page type called WebPartPage (available in the Microsoft.SharePoint.WebPartPages namespace) that includes a preconfigured and unique instance of a SPWebPartManager control and the main Web Part Zones, which are useful for rendering a page made of Web Parts.

Webpart Life Cycle Events
1) OnInit: Configuration values set using WebBrowsable properties and those in web part task pane are loaded into the web part.
2) LoadViewState: The view state of the web part is populated over here.
3) CreateChildControls: All the controls specified are created and added to controls collection. When the page is being rendered for the first time the method generally occurs after the OnLoad() event. In case of postback, it is called before the OnLoad() event. We can make use of EnsureChildControls() - It checks to see if the CreateChildControls method has yet been called, and if it has not, calls it.
4) OnLoad: User Generated Event  for e.g. button click on the web part.
5) OnPreRender: Here we can change any of the web part properties before the control output is drawn.
6) RenderContents: Html Output is generated.
7) SaveViewState: View state of the web part is serialized and saved.
8) Dispose: UnLoad.

Webpart Life Cycle Stages

Based on the events mentioned aove following are the webpart life cycle pages.

1) Initialization Stage

Web Part’s OnInit() is called BEFORE the Page’s OnInit()

The SPWebPartManager loads and applies any personalization settings

2) Loading Stage

Web Part’s OnLoad() is called AFTER the Page’s OnLoad()

3) Render Stage

CreateChildControls() is called.

OnPreRender() is called AFTER the page’s OnPreRender()

RenderContents() is called.