| title | description | ms.date | ms.localizationpriority |
|---|---|---|---|
SharePoint Framework v1.19 release notes |
Release notes for the SharePoint Framework v1.19 release. |
04/30/2024 |
high |
This release focuses on new features within the Viva Connections side and evolving existing capabilities within the other areas on building Microsoft 365 solutions with SharePoint Framework (SPFx).
Released: April 30, 2024
[!INCLUDE spfx-release-notes-common]
Install the latest official 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.18.x packages. For each SPFx package:
-
Uninstall the existing v1.18.x package:
npm uninstall @microsoft/{spfx-package-name}@1.18.x -
Install the new v1.19 package:
npm install @microsoft/{spfx-package-name}@latest --save --save-exact
[!INCLUDE spfx-release-upgrade-tip]
We introduce a new data visualization Card View for Adaptive Card Extensions that is intended to be used for charting scenarios. Use new Data Visualization Card Template in the generator to get started.
Related updated documentation for the SPFx v1.19 release:
- Create a Data Visualization Adaptive Card Extension (tutorial): Step-by-step guide on creating Data Visualization Adaptive Card Extension.
- Introducing new Viva Connections chart card layout option (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 samples showcasing the new data visualization ACE template:
- Chart Card - Page Creation: This Adaptive Card Extension displays a line chart showing pages and news creation history on the current SharePoint site.
- Chart Card - Three Series: Baseline example of the chart card rendering options, which was introduced as part of the SPFx 1.19 release. Chart card can be used to render simple charts directly in the Card View, so that you can include graphical details on your business situation directly in the Viva Connections dashboard.
The tooling was upgraded from Webpack 4 to Webpack 5.
Note
If you have webpack configuration customizations in your project - reference the official Webpack documentation for the migration details.
From this release forward, the build time packages are decoupled from the SPFx release. This means that the build time packages are released independently from the SPFx release. This change allows us to release new features and fixes to the build time packages without waiting for the next SPFx release.
This includes packages like @microsoft/eslint-plugin-spfx, @microsoft/sp-module-interfaces, and other similar build time packages.
You can now skip footer for the Search adaptive card extension.
PropertyPaneCheckbox now supports ariaLabel property.
You can now specify imageAlt property for the Property Pane's choice group option.
PropertyPaneDropdown now supports ariaDescription property.
PropertyPaneIconPicker and PropertyPaneThumbnailPicker now support disabled property.
PropertyPaneToggle now supports inlineLabel property that specifies whether the label (not the onText/offText) should be positioned inline with the toggle control. Left (right in RTL) side when on/off text provided vs. right (left in RTL) side when no on/off text.
Note
When not providing on/off text user may get confused in differentiating the on/off states of the toggle.
- Node.js v16 isn't supported with the SPFx v1.19 and forward.
No new updates.
We are also providing guidance on how to handle the font settings applied within the SharePoint Brand Center in the custom SPFx solutions. Please see following video as the demonstration on how you can use CSS custom properties within your solution to ensure that the custom solution is following the site level font settings.
- Using SharePoint Brand center font settings in custom SPFx solutions (video) - This video focuses on making custom SPFx solution aware of the font settings applied from the SharePoint Brand Center.
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! 🧡