Edit

Share via

SharePoint Framework v1.19 release notes

  • Article

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

Important

This page addresses details related to a specific SPFx release version. This page doesn't include additional SPFx prerequisites that must be installed in order to develop SPFx solutions, including Node.js, Yeoman, and other tools.

To learn more about these prerequisites, see Set up your SharePoint Framework development environment.

Install the latest version

Install the latest official release of the SharePoint Framework (SPFx) by using the @latest tag

Console 
npm install @microsoft/generator-sharepoint@latest --global

Upgrading projects from the SPFx v1.18 to v1.19

In the project's package.json file, identify all SPFx v1.18.x packages. For each SPFx package:

  1. Uninstall the existing v1.18.x package:

    Console 
    npm uninstall @microsoft/{spfx-package-name}@1.18.x

  2. Install the new v1.19 package:

    Console 
    npm install @microsoft/{spfx-package-name}@latest --save --save-exact

Tip

The CLI for Microsoft 365 provides an easy step-by-step guidance to upgrade your solutions to latest SharePoint Framework version.

New features and capabilities

New Data Visualization Card Template for Adaptive Card Extensions

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.

Sample chart card layouts

Related updated documentation for the SPFx v1.19 release:

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.

Webpack 5 support

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.

Build time packages release is decoupled from the SPFx release

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.

ariaLabel property for the Property Pane's Checkbox control

PropertyPaneCheckbox now supports ariaLabel property.

imageAlt property for the Property Pane's ChoiceGroup option

You can now specify imageAlt property for the Property Pane's choice group option.

ariaDescription property for the Property Pane's Dropdown control

PropertyPaneDropdown now supports ariaDescription property.

disabled property for the Property Pane's Icon Picker and Thumbnail Picker controls

PropertyPaneIconPicker and PropertyPaneThumbnailPicker now support disabled property.

inlineLabel property for the Property Pane's Toggle control

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.

Deprecations

  • Node.js v16 isn't supported with the SPFx v1.19 and forward.

Fixed Issues

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.

Feedback and issues

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! 🧡