State of SharePoint Client-Side Dev - Winter 2022

It’s been a few months since my last installment of the State of SharePoint Client-Side Development. The last time I did this it was August 2021 and at that time I was writing these posts on a monthly cadence. But I decided that was too frequent so I thought I’d back off a bit. Now, I’m thinking quarterly is a good cadence… so here we go with the first installment of 2022!

In this post I’ll give you an update on where we are with popular frameworks and tools developers use in the client-side SharePoint development world.

Many of the things I’m covering were recently touched on in the most recent Microsoft PnP Viva Connections & SharePoint Framework Development Special Interest Group (SIG) meeting, held on February 24, 2022. You can watch the recording of that meeting below:

In this installment of my State of SharePoint Client-Side Development installment, I’m adding a couple of new entries about some popular projects:

• hTWOo & hTWOo React
• SPFx Fast Serve

SharePoint Framework (v1.14)

The current published version of the SharePoint Framework (SPFx) is v1.14, released on February 17. You can learn more about this release from my blog post SharePoint Framework v1.14 - What’s in the latest update of SPFx? . That post, also available to watch as a video on the Voitanos YouTube channel or listen to on the Voitanos podcast (episode 5) , covers all the new, updated, deprecated, and removed things in this release.

The SPFx v1.14 release was HUGE… not only were lots of issues fixed in it, but the new project generator for SPFx retired a bunch of prompts, introduced new APIs (in preview) for Adaptive Card Extensions (ACEs), new APIs for extensions & web parts, and so much more!

✅  new APIs for ACE’s

✅  new APIs for web parts

✅  new APIs for extensions

✅  new APIs for all components types

✅  updated & new project templates

✅  automatic theme support for web parts

✅  a new API to render web-friendly images

🐞  over 20 bugs fixed - some dating back 3 years 😱

🗑  removal of two sets of APIs

🧮  deprecation of two sets of APIs

PnPJS (v3.0.1)

This JavaScript library is a popular SDK abstraction layer on top of the SharePoint REST API for server-side & client-side JavaScript based solutions.

In the latest release, v3.0.1 (out February 15, 2022) , was just a small fix to the bigger v3 release the day prior. There’s just too much to list in this post that changed as it’s a major update!

Some of the biggest changes include:

• Global vs. instance architecture: The library has moved away from globally defined SharePoint & Microsoft Graph objects. In v2.1, they introduced a concept of isolated runtimes. This approach wasn’t ideal and thus, they’ve changed it up where your project can have multiple instances of the SharePoint & Microsoft Graph objects so you can communicate with multiple tenants at the same time through various instances, making it much more flexible.
• AssignFrom & CopyFrom: Building off the previous point, they’ve introduced these two utility methods to spin up a new instance using an existing instance that was previously initialized.
• Dropping .get(): They’ve changed the API where if you were using queryableInstance.get(), you now need to call it directly with queryableInstance().
• Batching: The support for batching request has been streamlined as it takes advantage of the changes in v3. If you want to use batches, you need to add a new batching module to your project. See the docs for more info .
• Web to SPFI: In the previous v2 version of PnPJS, to connect to different instances, you’d create a new instance of a Web object. But in v3, they now introduce this new concept of an SPFI object which yields a lot more flexibility in connecting to different sites.
• Dropping CommonJS Packages: The team dropped support for the commonjs package variants as they’re no longer relevant.

There’s a transition guide for those moving from v2 to v3 , covering all the changes and benefits on upgrading to v3.

PnP SPFx Generator (v1.16.0)

The most current version of the PnP SPFx generator, a replacement for the Microsoft provided Yeoman generator, yo @microsoft/sharepoint. No releases or updates since v1.16 in January 2021 which was covered in.

Changes to the SPFx generator had significant impacts on the PnP SPFx generator that haven’t yet been resolved at this time. This means the PnP SPFx generator is only updated to create SPFx v1.11 projects and older at this time.

PnP React Controls (v3.6.0)

This is a community-based suite of reusable controls that you can use in your SPFx React-based solutions.

A lot has changed with this project since my last update on it. They’ve had two releases ( v3.5 in December 2021 & v3.6 in February 2022 ) that fixed a lot of existing issues, added new controls, and enhanced a a lot of existing controls.

New controls

• AdaptiveCardHost: React control that allows you to render an Adaptive Card as a component

Enhancements

• Accordion: Added custom icons
• ComboboxListItemPicker: Add option to sort the items in the picker
• DateTimePicker: new property for allowTextInput
• DynamicForm: disabledFields property added
• FilePicker: ability to allow external link and disable file existance chech commit
• FilePicker: allow to select files from other sites
• FilePicker: support for multi-select on additional sources
• IconPicker: onCancel property is added
• ListPicker: Add multi numbers support for baseTemplate option
• ListView: Add ability to provide CSS class names for list wrapper and list itself
• Localization: Update pt-pt and pt-br loc files
• ModernTaxonomyPicker: ability to add action buttons to terms
• PeoplePicker : Added Styles property
• PeoplePicker: Added filter for Microsoft 365 Group
• Localization: Correction for German localizations
• Localization: Corrections for Norwegian localizations
• Localization: Update Swedish translations
• Update mgt package to the latest version

PnP Property Controls (v3.5.0)

Like it’s sibling project above, these reusable controls can be used in SPFx web part property panes. And, like it’s sibling, they’ve been quite busy since we last checked in. They’ve had three releases ( v3.3 in December 2021 , v3.4 & v3.5 in February 2022 ).

Enhancements

• PropertyFieldCodeEditor: Added panelWidth property
• PropertyFieldCollectionData:
  • ability to use IconPicker for icon field
  • Adds conditional column visibility
  • Allow falsey keys as dropdown options
  • onGetErrorMessage support for boolean, custom and color fields
• PropertyFieldFilePicker:
  • ability to set default tab
  • Add a handler to close a filepicker
  • Added a feature to allow external links
  • Added a feature to show the Site Pages in the Site tab
• PropertyPanePropertyEditor: Add translations for property editor control button and header
• Include mystrings.d.ts in definition output

PnP Modern Search (v4.5.4)

This project is a collection of multiple web parts that enable users to implement customizable search-based solutions.

This project has had a TON of activity since we last checked in! Specifically, I’d check out the following release notes:

Version 4

• v4.4.1 (October 2021)
• v4.5.1, 4.5.2, 4.5.3 (December 2021)
• v4.5.4 (February 2022)

Version 3

• v3.23.0 (December 2021)

hTWOo (v0.5.1)  &  hTWOo React (v0.0.0-pre-alpha-26)

HTWOO UI is an open source alternative for Microsoft’s Fluent UI Web Design system. Despite Microsoft’s Fluent UI component being ReactJS exclusive, this project (hTWOo) offers a style guide based on HTML and CSS to create implementations for other frameworks as well.

A separate package, hTWOo React, provides reusable React components that you can use in your projects. It contains 21 components (called atoms, such as presence, select, and toggle) and uses them to implement 14 controls (called molecules, such as a card footer, card title, option list, and web part title) that you can compose to create organisms (three are provided in the package, including a dialog, document card, and Microsoft Teams splash card).

Learn more about hTWOo React, read the docs & get sample code here: hTWOo React - Getting Started .

I don’t have a “what’s new” to share because this is the first time I’ve added this entry to my list. The most recent release of hTWOo was just 3 months ago, in December 2021.

SPFx Fast Serve (v3.0.3)

A command line utility, which modifies your SharePoint Framework solution, so that it runs continuous gulp serve command as fast as possible. For example, a standard React based web part will only take ~0.2 seconds to recompile and refresh the browser when you make a change compared to the 3-5 seconds it takes with with the standard gulp serve command.

I don’t have a “what’s new” to share because this is the first time I’ve added this entry to my list. The most recent release of SPFx Fast Serve was just 3 months ago, in December 2021.