Create Client Web Parts Using SharePoint Framework

SharePoint Framework is the new development model in which lots of work has been going on in the past year. It went to General Availability on Feb 23^rd 2017. It is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps in SharePoint.

In the previous article, we saw how to set up the development environment for SharePoint Framework. In this article, we will see how to create and deploy the first client web part using SharePoint Framework.

Create the SharePoint Framework Web part Project

We will be creating a Hello World client web part to understand the project structure and testing procedure. Before moving forward, ensure that the SharePoint Framework development environment is ready. Spin up Node.js command prompt using which we will be creating the web part project structure.

We can create the directory where we would be adding the solution using the below command:

md ClientWebPart-HelloWorld

Let’s move to the newly created working directory using the command:

cd ClientWebPart-HelloWorld

We will then create the client web part by running the Yeoman SharePoint Generator:

yo @microsoft/sharepoint

This will display the prompt which we will have to fill up so as to proceed with project creation,

• What is your solution name? : Accept the default client-web-part-hello-world as your solution name and choose Enter.
• Where do you want to place your files : Use Current Folder
• What framework would you like to start with : Select “No javaScript web framework” for the time being as this is a sample web part
  
  
  

• What is your webpart name : Go on and press enter to accept the default Web part name as HelloWorld
• Go on and press enter to accept the default Web part description as HelloWorld description

Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the HelloWorld web part which will take some time to complete. Once completed, we will get a Congratulations message.

Test the web part

So as to test the client web part, we can build and run it on the local web server where we are developing the web part. SharePoint Framework development uses HTTPS endpoint by default. Since a default certificate is not configured for the local development environment, our browser will report a certificate error. The SharePoint Framework tool chain comes with a developer certificate that we can install for testing client web parts locally. From the current web part directory, run the below command:

gulp trust-dev-cert



Click on Yes to install the certificate.

Now, let’s preview the web part by running the gulp serve command. This command will execute a series of gulp tasks and will create a Node-based HTTPS server at 'localhost:4321'. It will then open the browser and display the client web part.

SharePoint Workbench

SharePoint Workbench is a developer design surface that enables us to test the developed client web parts without deploying them directly to SharePoint. It provides a client-side page to which we can add the created web parts.

Thus the SharePoint Workbench has opened up in the browser but there are no visible web parts. So let’s go ahead and click on the Plus sign.

It will give us the option to add the Hello World web part that we have created recently.

On clicking it, the web part will be added to the page. The web part contains few custom messages.

We can edit the description property directly from the UI as shown below. However if we want to edit this web part to add more details and functionality, we will have to go back and terminate the gulp server command. 

To stop Gulp from listening to the process we can press ‘Control + C’ . This will terminate the Gulp Serve command and stop the server.

Edit the web part

Now, let’s try to edit the web part and add more functionality to it. To do that, navigate to ‘src\webparts\helloWorld’ location.

Run ‘Code .’ in the console which will open up the Visual Studio Code editor window.

In the left pane of Visual Studio Code, we can see the project structure. The bulk of the logic resides within the HelloWorldWebPart.ts file. Let’s add JavaScript code to alert a message within this typescript file.

On clicking save Gulp will rebuild the web part project as shown below.

Again running ‘gulp serve’ will display the updated web part in the browser. This time it will display the alert message as well.

Add the web part to SharePoint

So far we were testing the web part in SharePoint Workbench locally, now let’s try to test it within the SharePoint Context. SharePoint Workbench is also hosted in SharePoint Online to preview the web part. It can be accessed by adding ‘ _layouts/15/workbench.aspx’ to the SharePoint Online URL.

Expand the Plus sign and add the Hello World web part.

The web part has triggered the alert message in the page indicating successful hosting of the web part within SharePoint.

Summary

Thus, we saw how to create a client web part using SharePoint Framework and test it within SharePoint. In the upcoming article we will see more in detail about the SharePoint Framework Project structure.