Well this year has started off with plenty of surprises. That shouldn’t be the case with client-side SharePoint development though! Let’s kick off my first update for 2021 by taking a look at the State of SharePoint Client-Side Development. 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’ll cover were recently touched on in the most recent Microsoft PnP SharePoint Framework & Client Side Development Special Interest Group (SIG) meeting, held on January 15, 2021. You can watch the recording of that meeting below:
SharePoint Framework
The current published version of the SharePoint Framework (SPFx) is v1.11, released in July 2020. The next version, v1.12, is slated to be released by the end of March 2021, but last week Microsoft set expectations to be more like mid-February after previously saying it would be released in December 2020, then January 2021.
Since my last update, we’ve learned quite a bit more as to what to expect.
Support for Node.js v14
At the present time, the current release of SPFx (v1.11) only supports Node.js v10. The Node.js foundation will no longer support this version as of April 1, 2021, so you can expect SPFx v1.12 will add support for Node.js v14.
No word yet if this also means Microsoft will drop support for Node.js v10, or if Node.js v12 will also be supported as part of this update.
Access page structure via an API
In October 2020, there was a significant change in SharePoint Online (SPO) that impacted quite a few customers. At the present time, there’s no supported way to determine if a web part is rendered on a page as full width or within a boxed zone. SPO was including some empty CSS classes to indicate as such. While Microsoft explicitly states the page DOM is not an API, detecting the presence of these classes was the only way to determine how a web part or SPFx component was rendered on the page.
In October, Microsoft embarked on a “cleaning” of the CSS and removed these classes, breaking many vendor solutions for many customers (see #6380: Changes to the DOM which affects SharePoint solutions). This created quite a stir that resulted in Microsoft rolling back the CSS changes while the looked for a solution.
In SPFx v1.12, Microsoft will introduce a supported API developers can use to determine the rendered width of a web part.
Expanding SPFx support for Microsoft Teams solutions
SPFx’s support for Microsoft Teams expands in the v1.12 release. There are two main things related to Microsoft Teams & SPFx.
First, developers will now be able to include their own Microsoft Teams app manifest file in SPFx solutions. When the solution is deployed to the SharePoint app catalog, selecting the Sync to Teams button will either use the app manifest in the solution (if present), or dynamically create one if the developer doesn’t include it in the package.
Second, Microsoft is also adding support to create meeting apps for Microsoft Teams using SPFx.
There are a lot of known issues with using SPFx in Microsoft Teams, so maybe this means known bugs are going to get fixed? We’ll have wait and see.
PnPJS (v2.1.0)
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, v2.1.0, introduces isolated runtimes which will be great for developers using Node.js where you want to connect to more than one tenant at the same time, something commonly needed in multi-geography scenarios. It also adds support for the following:
- Node.js v15
- Webpack v5
- Addition of a Microsoft Graph search endpoint
- Significant performance updates for list item updates & inserts as well as bug fixes and documentation updates
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, adds support for Angular 11 including source maps for Angular-based solutions.
In addition, the latest release includes the following updates:
- Support for Fluent UI Fabric v7
- Support for PnP React Controls v2.2
- Support for PnP Property Controls v2.3
- Support for PnPJS v2.0.13
- Support for VueJS v2.6
- Updated support for Stylelint, lodash, jQuery v3.5.5 and the latest version of Yeoman
PnP React Controls (v2.4.0)
The most recent update for this suite of reusable controls that you can use in your SPFx React-based solutions includes the following:
- New: AccessibleAccordion control
- Updated: Placeholder control updated to include custom rendering of
iconText&description - Updated: PeoplePicker control now supports the option to display inactive users
- Updated: TaxonomyPicker control now supports children with the parent
- Updated: ListPicker control adds the ability to pick lists from a specific site
- Multiple fixes
PnP Property Controls (v2.3.0)
Like it’s sibling project above, these reusable controls can be used in SPFx web part property panes. This latest release includes the following:
- New: PropertyFieldIconPicker control
- Updated: PropertyFieldTermPicker control now supports hiding terms & making terms selectable
- Updated: PropertyFieldListPicker control now supports the ability to return the
Titleand relative URL of the selected list
PnP Modern Search (v4)
This project is a collection of multiple web parts that enable users to implement customizable search-based solutions. This month, they released v4 of the project that adds the following significant updates from the previous version:
- Supports the Microsoft Graph Search API
- Supports the SharePoint Search API
- Re-archtected to be more modular, including:
- Provide custom search. backend
- Provide other renderers in addition to the included Handlebars support
