If you are a SharePoint developer creating SPFx solutions, you must have heard about the PnP reusable controls and PnPJS library. They help you accelerate the development of custom solutions by providing tools that help you overcome common problems/requirements.
Last week I have delivered an internal session at work, and this time the focus was on the PnP reusable controls, property pane controls, and PnPJS library.
You can find the presentation slides and a link to the demo project below. The slides contain a Resources section with all the relevant links.
Please be aware that most of the content on the slides was extracted from the documentation available, as the purpose was only to provide a quick introduction to the controls available. The demo is based on the PnP Controls sample web part, located on the PnP sp-dev-fx-webparts repository.
Presentation slides
Demo
The demo requires that you have a SharePoint site with a document library (you can use the default Documents library). Add a managed metadata column to the library and upload some documents (don’t forget to populate the managed metadata field when uploading the documents).
You can find the demo resources on my GitHub repository:
https://github.com/joelfmrodrigues/demos/tree/master/PnP%20Controls
The repository contains two folders: start and final.
The start folder is an empty SPFx web part project where I have already added the required npm modules as dependencies and completed the required configurations (as per the documentation) so that I could save some time during the demo. The guide on the link provided will guide you through the code changes required to achieve the final solution.
The final folder is a complete solution with a functional web part, in case you just want to see it working.
Conclusion
The PnP reusable controls, property pane controls, and PnPJS library are the “Swiss Army Knife” of SharePoint Framework solutions, and if you are not using them, you are probably doing SharePoint development the hard way.
Hope you find this post useful.