Create a SharePoint Web Part In JavaScript

A SharePoint tutorial by Peter Kalmstrom

In the demo below Peter Kalmstrom, CEO of kalmstrom.com Business Solutions and Microsoft certified SharePoint specialist and trainer, shows how to create a web part using as much of HTML5 techniques as possible.

Peter creates it as sandboxed solution, and he minimizes the server-side code to be able to re-use the JavaScript code as much as possible.

Peter first creates the webpart in SharePoint 2010, to be able to use it in SharePoint 2013 and Office 365 SharePoint too. By the end of the demo he activates the solution on a SharePoint 2013 site to make sure it works there also.

When you are building web parts for SharePoint 2010 you need to have a local installation of SharePoint on the same machine.

These are the steps shown in the demo below:

Create a new C# SharePoint 2010 project in Visual Studio.
Specify the local site you want to use for debugging.
Add a module (= a file folder on the SharePoint site)
Create subfolders for JavaScript, images and CSS
Add an existing JQuery file into the JaveScript subfolder
Add a Web Part
Go into the Feature Designer, rename the feature and change the scope to Site
Save and Run
In the SharePoint site, check under Site Settings >Site features, that the new feature is there and activated.
In the SharePoint site, check that the new web part is there under Insert >Web Part.
In Visual Studio, add some script control code in the C# section of the web part.
Add some code in the JavaScript file.
In the SharePoint site, insert the web part and check that it works.
Publish the project
Upload the project package to a SharePoint 2013 site, under Site Settings >Solutions, and activate it.
Activate the feature under Site Settings >Site Collection Features.
Edit the SharePoint page and Insert the Web Part.
Save and make sure the web part is visible where you want it.