Edit

SharePoint Framework v1.16 release notes

  • Article

This release introduces updates across the features around Microsoft Viva, Microsoft Teams, Outlook, Office and SharePoint.

Released: November 15, 2022

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 release of the SharePoint Framework (SPFx) by including the @latest tag:

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

Upgrading projects from v1.15.2 to v1.16

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

  1. Uninstall the existing v1.15.2 package:

    npm uninstall @microsoft/{spfx-package-name}@1.15.2

  2. Install the new v1.16 package:

    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

Publish Teams solutions build with SPFx to Outlook and Office

As this SPFx version supports the Teams JavaScript SDK v2, you can now start building experiences also for Outlook and for Office.com (Microsoft 365 app) with SharePoint Framework (SPFx). This will enable the same solution to be exposed within Microsoft, Outlook, Office.com and in SharePoint without specific code changes.

You can use the Teams JavaScript SDK v2 to detect the host of the solution as shown on the following code. If the this.context.sdks.microsoftTeams is empty, then code is executed in the SharePoint.

// if running in Microsoft Teams, Outlook, or Office...
if (!!this.context.sdks.microsoftTeams) {
  const teamsContext = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  switch (teamsContext.app.host.name.toLowerCase()) {
    case 'teams':
      // RUNNING IN MICROSOFT TEAMS
    case 'office':
      // RUNNING IN OFFICE / OFFICE.COM
    case 'outlook':
      // RUNNING IN OUTLOOK
    default:
      throw new Error('Unknown host');
  }
} else {
  // RUNNING IN SHAREPOINT
}

For more information, see: Extend Outlook and Office with the SharePoint Framework.

Important

Using the Teams SDK v2 within the SharePoint Framework solutions is generally available starting from the 1.16 version, enabling usage of the Teams SDK v2 immediately. Support for publishing Teams apps (including SPFx solutions) within the Outlook and in Office.com (Microsoft 365 app) is however still in preview and is planned to be generally available for both mobile and desktop experiences within the first half of calendar year 2023.

Teams JavaScript SDK v2 support

This version supports the teams-js v2. this.context.sdks.microsoftTeams.teamsJs will return version 2 of the SDK. this.context.sdks.microsoftTeams.context will still return v1 context for backward compatibility.

Note

teams-js v2 is backward compatible with teams-js v1. We will continue to support v1 for existing solutions.

Tip

Teams JavaScript SDK v2 enables new scenarios for developers. For more information on the Teams JS SDK v2 capabilities, see Microsoft Teams JS SDK v2 is now generally available.

teams-js v2 typings support

Starting with this version the context.sdks.microsoftTeams.teamJs property in the web part has type of teams-js SDK v2. This enables usage of the new features of the teams-js SDK v2, including new hosts: Outlook and Office 365 app (previously called office.com).

Note

context.sdks.microsoftTeams.context property is marked as deprecated. It returns v1 context instead v2. Use context.sdks.microsoftTeams.teamJs.app.getContext instead.

React 17 support

SPFx now supports React 17 by default (scaffolded as part of the solution).

Ability to set dataVersion in web part's manifest

Set a data version for this preconfigured entry. This is optional and can be used in cases where the SPPKG is updated independently from code (for example, hosted on a CDN). Web Parts can read this value for backwards compatibility with out of date default properties.

General availability of Search Query extensions

Search Query extensions moved to the General Availability status with this version and can be used in the production.

Ability to use tasks and middleware in Microsoft Graph v3

Starting this version, developers can install @microsoft/microsoft-graph-client to reference tasks or middlewares from the SDK, for example, LargeFileUploadTask. SPFx will automatically externalize the dependency and load it from the CDN.

Note

See Ability to check supported versions to check what version of MS Graph SDK to install.

MSGraphClientFactory now allows to pass Options parameter when initializing the client. It also contains new method getClientWithMiddleware to initialize the client with middleware. Developers can also get the MS Graph client instance using MSGraphClientV3.client property. This instance can be used to call MS Graph tasks like large file upload.

EULA folder has been removed from the modules

The EULA folder has been removed from the modules. The license information is now available here. This change decreased the size of all SPFx modules loaded during scaffolding.

Ability to check supported versions of MS Graph and Teams SDK

.yo-rc.json file now contains sdksVersions property. This property contains the list of supported versions of MS Graph and Teams SDK.

quietDeps parameter for SASS

Now developers are able to set quietDeps property in config\sass.json to silent deprecation warnings from the dependencies.

Ability to render ACE asynchronously

Similarly to web parts, the ACE developer can specify if the card extension is rendered asynchronously.

/* BaseAdaptiveCardExtension */
protected get isRenderAsync(): boolean {
  return false;
}

public renderCompleted(didUpdate: boolean): void { /* ... */ }

Adaptive Card Extension Image Card View to have alt text for Accessibility

Adding a new optional property imageAltText for IImageCardParameters will add alt text attribute to the image html element.

New Form Customizer context properties

List item fields' values

Form Customizer's context for Edit and Display forms now contains the list item fields' values in standard odata format.

IFormCustomizerContext.item?: IListItem;

List form JSON formatting configuration

Form Customizer's context provides information about applied list form JSON Formatting. Use contentType property to access the configuration.

IFormCustomizerContext.contentType.ClientFormCustomFormatter: string | undefined;

Remove NodeJS v12 and v14 support

Node.js v12 & v14 are no longer supported. SPFx v1.16 requires Node.js v16.

Note

Node.js v18 support is scheduled for the first half of the 2023 calendar year.

Preview Features and Capabilities

Following features are still in preview status as part of the 1.16 release and shouldn't be used in production. We're looking into releasing them officially as part of the upcoming 1.17 release.

Web part Top Actions

Top Actions allow developers to add custom actions to web part's command bar. The feature is similar to property pane controls, but based on cleaner UI approach.

Note

Top Actions is released as a preview version as part of the 1.16 release.

Top Actions

To add top actions, developers can use the getTopActionsConfiguration method.

BaseWebPart.getTopActionsConfiguration(): ITopActions | undefined;

ITopActions interface defines the top actions configuration.

export type ActionConfiguration = IPropertyPaneField<any>;

export interface ITopActions {
  readonly topActions: ActionConfiguration[];
  onExecute(actionName: string, newValue: any): void;
}

Note

Although type of Top Action Configuration is IPropertyPaneField<any> we currently support buttons and choice groups only. It means you can use either PropertyPaneChoiceGroup(...) and PropertyPaneButton(...), or specify your own configurations that will resolve to IPropertyPaneField<IPropertyPaneChoiceGroupProps> and IPropertyPaneField<IPropertyPaneButtonProps>

For more information on Top Actions, see Adding support for Top Actions.

Deprecations

  • Deprecated @microsoft/office-ui-fabric-react-bundle package. Use @fluentui/react instead.
  • Deprecated context.sdks.microsoftTeams.context. Use context.sdks.microsoftTeams.teamJs.app.getContext instead.

Fixed Issues

Here's a list of specific issues fixed around SharePoint Framework since the previous public release.

August-November Timeframe

  • #8146 - SPFX Application Customizer breaks Anonymous Links for PDF Files
  • #8266 - SPFx 1.15 - Form Customizer doesn't work in View History
  • #8272 - SPFx 1.15 - Getting error when use form customizer to view existing list item in Classic mode
  • #8279 - New icons in production environments
  • #8301 - Error When Revisiting Custom Teams ?app=portals App
  • #8372 - Applying permissions on Form Customizer
  • #8379 - SPFx ListViewCommandSet - this.context.listView.selectedRows is wrong in grouped lists
  • #8467 - Buttons (onClick events) in BaseDialog no longer working - ListView Command Set
  • #8483 - Multi-paged web part property panes - Pagination doesn't work as expected, stopping users from accessing pages
  • #8484 - Web part property pane breaks when using React and office-ui-fabric-react in property pane field label
  • #8482 - React version mismatch causing SPFx list extensions to fail in O365
  • #8487 - SharePoint React 17 Upgrade causing "Invalid Hook call" error in SPFx web part
  • #7324 - SPFx license doesn't permit commercial use
  • #8331 - Mechanism to version the preconfiguredEntries in the manifest
  • #8510 - SPFx sudden Minified React error #321
  • #8496 - React version mismatch causes property pane not displaying