Lets finish the webparts @pnp/spfx-controls-react Controls | #spfx for Beginners 2025 (Episode 9)

#spfx #pnp #sharepoint #developer #reactjs

PNP UI Controls | Let's Finish the webparts

@pnp/spfx-controls-react

Welcome back to our SPFx for Beginners 2025 series!

In Episode 9, we complete our FAQ and Welcome Message webparts using the PNP React UI Controls

https://pnp.github.io/sp-dev-fx-controls-react

💡 In this tutorial you’ll learn how to:

• Add a Placeholder Control and Invoke the Property Pane from code
• Add an Accordion control to give the FAQ Webpart a professional appearance.

Whether you’re building your first SharePoint Framework solution or improving your existing web parts, this step-by-step guide will help you master PnP UI controls and elevate your SPFx development workflow.

📚 Technologies Covered:
• SharePoint Framework 1.21+
• React & TypeScript
• @pnp/spfx-property-controls
• @pnp/spfx-controls-react
• Modern web part design patterns

Get the PnP UI controls here: https://pnp.github.io/sp-dev-fx-controls-react

Get the latest sourcecode for this episode here:

https://github.com/Yorcloud/spfx-2025/tree/episode9

⏱️ Chapters

0:00 – Intro
0:24 – Introduction to PNP React UI Controls
1:39 – Coding Tutorial - Adding a Placeholder Control with Configure Button
7:20 - Coding Tutorial - Accordion Control
10:06 – Coding Tutorial - Placehold Control for the Welcome webpart and code changes to detect a blank message
12:46 - Outro

🔔 Don’t forget to subscribe for more episodes, dev tips, and our weekly Coffee & Code banter!

☕️ Support us with a coffee! (Or.. beer 🍺)
https://www.buymeacoffee.com/robertsdevtalk

📧 📫 Join us on our developer journey! Sign up to our email newsletter:
https://robertsdevtalk.com

🐦 Follow us on Twitter:
https://twitter.com/robertsdevtalk

🎶 Music by Epidemic Sound:
https://www.epidemicsound.com/referral/rkhnun/

Icons in this video kindly provided by FlatIcon from Freepik
https://www.freepik.com
https://www.flaticon.com

Disclaimer - some of our links are affiliate links, which means that we receive a small commission for any sales made via those links, at no extra cost to you - so a great way to support our channel! Thank you so much for your support 😊

Видео Lets finish the webparts @pnp/spfx-controls-react Controls | #spfx for Beginners 2025 (Episode 9) канала Roberts Dev Talk