SharePoint Framework Development - Creating Client Webpart



Published: 9 June 2017

This is the second post in the SharePoint Framework Development series, In the earlier article we saw how to set up the environment and the tool chains required to start the development using SharePoint Framework(SPFx). Lets create a simple Hello World Web part using TypeScript and explore the project structure of SPFx. 

Create the Web part project

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

Press enter to accept the default Web part description as HelloWorld description

Yeoman has started working on the creation of the project strucure. 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.

Download the guide to develop client webpart using SharePoint Framework.

Test the web part

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 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 default 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 must go back and terminate the gulp server command. 

Download the guide to develop client webpart using SharePoint Framework.

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 using CD command.

 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 simple Hello World Web part using SharePoint Framework. In the next post we will see how to use SharePoint Framework to create a web part that retrieves and displays SharePoint List Items. 

 

Download the guide to develop client webpart using SharePoint Framework.



Join 7,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here