Modern SharePoint Goodie Box
Going from our classic SharePoint development approaches to Modern SharePoint development was quite a steep learning curve for me. Microsoft documentation for all of the basics of developing your first “Hello world” SPFx web part or learning about PnP PowerShell is a great place to start, but over the months and years, the development team at PixelMill has gathered a number of tips, tricks, and approaches that weren’t immediately obvious from the start. In this blog post, I’ll throw out a few of the goodies from our processes that are too good to keep to ourselves.
Some of our clients are on Office 365/SharePoint Online, others are on SharePoint 2016, still others are on SharePoint 2019, and we still have the occasional client who is on SharePoint 2013. When working with such a variety of environments, we’ve found using Node Version Manager (nvm) to be invaluable. Having multiple versions of Node installed on my development machine allows me to also have different versions of SPFx installed. For example, SharePoint 2019 supports SPFx 1.4.1, while working with SharePoint Online allows for the latest version of SPFx. I have a note file where I keep track of what version of SPFx I have installed on a particular version of Node. Learn more about NVM for iOS or Windows.
Load different versions of PnP PowerShell
I’ve already written about using multiple versions of PnP PowerShell. We use PnP PowerShell to consistently provision our custom fields, lists, branding assets, etc. to our dev, QA, and client environments. Installing all the modules and loading them as necessary allows us to work with different clients and their different environments.
Export list data into a provisioning template
Speaking of PnP PowerShell, I knew early on that you could export fields, content types, list templates, and more with the Get-PnPProvisioningTemplate command, but it took me a while to come across the fact that you can also export list data into a provisioning template. I’ve found this invaluable when trying to replicate a dev environment’s list data in a QA environment. Here’s how you do it.
Provision an entire folder of assets
Deploy properties for extensions with PowerShell
In a previous article, I went over creating SPFx extensions and using the client side component properties to make them somewhat configurable for different sites by using PnP PowerShell to add a custom action. (My example referenced an image to use as a “logo” in a custom header.) While my article covered the basis of using Add-PnPCustomAction to accomplish this, we’ve found it necessary to make our own PowerShell scripts to make it less of a manual process. Here are some helpful links that may help you to develop your own script that will remove custom actions and the extension from the app catalog, add the extension to the app catalog and add custom actions with the properties coming from a common file (in this case the package.json and serve.json files), or to deploy the extension to multiple sites.
Leverage modern “image renditions”
If you’re trying to work with image renditions for an image inside a custom SPFx web part that you’re developing, modern pages don’t have image renditions per-se, but they do have predefined image formats that you can tap into. Read this article to find out more. An alternative way is to use the Graph API to get the images or previews.
Work with SharePoint’s Page Router
You may have already experienced that clicking links in modern SharePoint sites don’t always reload the whole page. Sometimes this is good, but sometimes you want to force the whole page to reload. Either way, check out Julie Turner’s article about the data-interception attribute which will force a page reload, or look at Elio Struyf’s article and dependency for working with the page routing mechanism.
Check out PnP SPFx controls
If you haven’t yet tried using the PnP SPFx React Controls and PnP Property Pane Controls, they are amazing! These time-saving controls can be pulled right into your SPFx project. The React controls can be part of your rendering, while the Property controls give more options for web part settings in the property pane. We have successfully used many of these not only in enterprise SharePoint Online solutions, but also in SharePoint 2016 and SharePoint 2019 projects as well.
Use the React Developer Tools Chrome extension
Finally, the Chrome React Developer Tools extension allows you to explore React components on the page and see what props and state values exist in real-time. I’m finding that it’s a little tricky to work with the extension on SPFx web parts while running localhost as not everything seems to load the same way that it does in production, but has still been really helpful to see what props and state values are being passed through to components or being set.
I hope you’ve found something good to take home with you. What’s a tip, trick, or resource that you think would belong with the Modern SharePoint Goodie Box? Post a comment below!