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

Suggested Topics

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Microsoft 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

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

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

How to Provision SharePoint assets with solution packages

How to Upgrade SharePoint Framework client side solutions in SharePoint Online

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

/node_modules/@microsoft/sp-webpart-base/lib/propertyPane/propertyPaneFields/propertyPaneToggle

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”>${this.properties.customToggle}</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!

Please like, share and subscribe us.

Hope you enjoyed reading it.

Please don't forget to Share, Follow and Like to get updated with latest posts.

It gives me motivation to share more knowledge with you.

About Author

Satyendra Mishra

Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.

My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.

Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).

I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.