| title | SharePoint Framework v1.20 release notes |
|---|---|
| description | Release notes for the SharePoint Framework v1.20 release. |
| ms.date | 09/26/2024 |
| ms.localizationpriority | high |
This release focuses primarily on the new features within the Microsoft Viva Connections side with two key new capabilities: new data visualization options for Card Views and HTML Quick View option for Viva Connections Quick Views.
Released: September 26, 2024
[!INCLUDE spfx-release-notes-common]
Install the latest generally available release of the SharePoint Framework (SPFx) by using the @latest tag
npm install @microsoft/generator-sharepoint@latest --globalIn the project's package.json file, identify all SPFx v1.19 packages. For each SPFx package:
-
Uninstall the existing v1.19 package:
npm uninstall @microsoft/{spfx-package-name}@1.19 -
Install the new v1.20 package:
npm install @microsoft/{spfx-package-name}@latest --save --save-exact
[!INCLUDE spfx-release-upgrade-tip]
As part of the SPFx v1.19 release, we provided new line chart card layout option and with SPFx v1.20, we're introducing three new data visualization options: bar chart, pie chart and donut chart.
Related updated documentation for the SPFx v1.20 release:
- Create a Data Visualization Adaptive Card Extension (tutorial): Step-by-step guide on creating Data Visualization Adaptive Card Extension - updated with the SPFx v1.20 release details
- Introduction to new data visualization components for Viva Connections (video) - This video focuses on the creation of ACE data visualization cards with SPFx and also showcases the future plans within this area. Example charts are also demonstrated in the context of example Viva Connections experience.
New sample showcasing the new data visualization options for ACEs:
- Chart Card - Data Visualization Options: Baseline example of the data visualization card rendering options, which was introduced as part of the SPFx v1.20 release.
With the SPFx v1.20 version, we're introducing new option to use HTML to render the Viva Connection Adaptive Card Extension Quick Views. This enables more advanced user experiences. You can even use whatever suitable JavaScript web framework you prefer (that is: React etc.) in your Quick View experiences.
You can start using this option by updating your Quick View implementation to be inherited from xxx class, which will be automatically detected by the underlying platform.
Out-of-the-box OneDrive (files) card is using this rendering option as a reference point.
Related updated documentation for the SPFx v1.20 release:
- Build an HTML Quick View SharePoint Framework Adaptive Card Extension (tutorial): Step-by-step guide on creating an ACE with a custom HTML Quick View.
- Introduction to HTML Quick Views with SPFx in Viva Connections cards (video) - This video explains how you can create the Viva Connections card Quick Views using HTML. This enables more complex user interfaces for the Viva Connections vs the previously supported adaptive card option. Adaptive Cards will keep on being supported also as an option. You can use whatever JavaScript frameworks you'd like in the actual implementation, which provides more flexibility for developers.
New sample showcasing the new data visualization options for ACEs:
- Basic Card - HTML Quick View: Baseline example of the data visualization card rendering options, which was introduced as part of the SPFx v1.20 release.
As part of the transitioning to WebPack 5 with the SPFx 1.19, exception details where impacted as called out with in issue #9834.
This issue has been fixed and is by default fixed for any new project created with the SPFx Yeoman generator 1.20. For the previously created project, you can fix this issue with following updates:
- SPFx tools packages version is 1.20.2
- update
@rushstack/eslint-configfrom 2.5.1 to 4.0.1 - Optional: fix new lint errors such as "@typescript-eslint/no-unsafe-function-type rule is not found" by modifying .eslintrc.js
- Optional: fix other lint rules related to the code and not ESLint configuration
No new updates.
- #9834 - SPFx 1.19.0 - Error during bundle says [object Object] instead of displaying a clear message.
We're interested on your feedback around the release. Do let us know any findings or other feedback using the SPFx issue list.
Happy coding! Sharing is caring! 🧡