Build SharePoint Framework client side web part – III

Suggested Articles


What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II


It is a continuation of last article on SharePoint Framework Client Side Web Part development.

Configure web part property pane

Property Pane is defined in SharePoint Framework web part itself. In my case, it is in defined in HelloWorldWebPart.ts file. I’ll be adding one new Toggle field in web part property pane.



Before starting the steps, let me share information that these controls are automatically added with this project by Yeoman. You can see a package under


Wow! It reminded me the time of programming in C/C++ on Turbo C. Packages are same as header files.

Let’s continue with the steps:

Add new field “customToggle” as boolean type in IHelloWebPartProps.ts




Add this field in exiting group of Property Pane in web part.

File Name: HelloWorldWebPart.ts

Additional Code: Highlighted in screen shot below





Now, add below statement in class HelloWorldWenPart available in file HelloWorldWebPart.ts

<p class=”ms-font-l ms-fontColor-white”>${}</p>




Import PropertyPaneToggle from @microsoft/sp-webpart-base. You need to add highlighted text in HelloWorldWebPart.ts




Now, add default value of newly added property as True in HelloWorldWebPart.manifest.json file. This file is a manifest file of web part which defines web part metadata. Every web part should has this manifest file.




Let’s run the project now. Open command prompt and run following command in current web part’s root directory i.e. helloworld-webpart



gulp serve

It will run the project and launch workbench.html in browser. Just add your web part on the page.




You will see page as below





Click edit icon (i.e. pencil image) on top left corner, it will open web part property pane on right side of desktop.




As soon as you toggle the switch, you will see changes in value on web part false or true. Refer the screen shot below.




And, That’s done 🙂

What’s next?

Well, we’ll go deep in SharePoint Framework programming further and see how can we consume REST APIs in SharePoint Framework (SPFx) web parts? One more thing, we’ll also see, how to debug SharePoint Framework projects in Visual Studio Code?

Hey, in command prompt, why do you not run CTRL+C to stop GULP?


Thank you for reading!



About Satyendra Mishra

An Engineer by education, Satyendra is a PMP certified Project Manager, Author, Blogger and Learner with 13+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (Angular), Xamarin for Android and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →