Create WebPart using SharePoint Framework and test it in SharePoint online Workbench

Check this link to setup the SharePoint Framework environment
http://techchaitu.blogspot.com/2017/09/what-is-sharepoint-framework-development.html

SharePoint Framework 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 that are responsive and mobile-ready from day one. 

Create a new SharePoint Framework project

1. Open any Windows Powershell/command  tool. I prefer to use Powershell.
2. Navigate to a folder or create a new folder.
3. Run the Yeoman Generator to create SharePoint Framework solution package.

yo @microsoft/sharepoint

1. Fill the details required for creating a new SharePoint solution and choose Enter

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

Preview the web part

To preview the web part, build and run it on a local web server our browser will report a certificate error . The client-side toolchain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment. The SPFx toolchain comes with a developer certificate that you can install for building web parts.

To install the developer certificate for use with SPFx development, switch to your console, make sure you are still in the Twinkle-webpart directory and enter the following command:

gulp trust-dev-cert

we have installed the developer certificate.

SharePoint Workbench

SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. Using local workbench application can be tested in many ways. We can also launch the workbench.aspx file from the SharePoint site to test the application in SharePoint Framework.


Example URL : https://xxxxxxxxx.sharepoint.com/sites/dev/_layouts/15/workbench.aspx

After Success message, we can run “gulp serve” 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.

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. The + button opens the toolbox where you can see a list of web parts available for you to add. The list will include the Twinkle web part that we have created recently.

Choose Twinkle webpart to add the web part to the page:

Click on the pencil icon to reveal the webpart properties and we can edit the description property 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.

In the console, go to the src\webparts\twinkle directory.

Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor): CODE

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

After adding the script, save all the files, on save Gulp will rebuild the web part project.Again running ‘gulp serve’ this time it will display the updated web part in the browser with alert message as well.

Preview the web part in SharePoint

upto now we have tested the webpart in SharePoint Workbench locally, let’s try to test it within the SharePoint online. SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. It can be accessed by adding ‘ _layouts/15/workbench.aspx’ to the SharePoint Online URL. The key advantage is that now you are running in SharePoint context and that you will be able to interact with SharePoint data.

Go to the following URL: 'https://your-sharepoint-site/_layouts/workbench.aspx'

Expand the + sign and add the TWINKLE web part.

Web Part added to the page successfully with alert message.

Finally , we have created client web part using SharePoint Framework and tested it within SharePoint online workbench.