Edit

SharePoint Framework v1.14 release notes

  • Article

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

Released: February 17, 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.

Upgrading projects from v1.13.1 to v1.14

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

  1. Uninstall the existing v1.13.1 package:

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

  2. Install the new v1.14 package:

    npm install @microsoft/{spfx-package-name}@1.14.0 --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

Adaptive Card Extension updates for Viva Connections

Updated the ACE scaffolding for Viva Connections

Updated Adaptive Card Extensions scaffolding to be more succinct.

Get Current ViewNavigator for Adaptive Card Extension

BaseAdaptiveCardExtension.navigator

If the current renderType is Card then returns BaseAdaptiveCardExtension.cardNavigator. If the current renderType is QuickView then returns BaseAdaptiveCardExtension.quickViewNavigator.

List View Command Set Updates

Inform ListView on Command Set Changes

BaseListViewCommandSet.raiseOnChange: () => void

Use this method to fire onChange event and initialize a reflow of the ListView.

Expanded List View Accessor State

ListViewAccessor provides expanded state of the current list view. New state properties are listed below.

  • rows - currently rendered rows in the list view.
  • selectedRows - selected rows in the list view.
  • list - basic information about the list rendered by the list view.
  • view - basic information about the view rendered by the list view.
  • folderInfo - folder information for the list view.
  • appliedFilters - filters applied to the list view.
  • sortField - sort field name.
  • sortAscending - specifies whether the list view is sorted ascending or descending.

List View State Changed Event

ListViewAccessor.listViewStateChangedEvent: SPEvent<ListViewStateChangedEventArgs>

This event gets raised every time the list view state changes. The arguments contain type of occured event (see ListViewAccessorStateChanges) and previous state of the list view (see IListViewAccessorState).

List Command Set Command Disabled Property

Command.disabled: boolean | undefined;

Web Part specific updates

Predefined Web Part Picker Group for Web Parts in Development

PredefinedGroup.Local = '8b7bf6f1-a56a-4aa3-8657-7eb6e7e6af61';

The group displays locally debugged web parts.

Callback to Clear DOM Element Before Loading Indicator or Error Element is Displayed

IClientSideWebPartStatusRenderer.displayLoadingIndicator(domElement: Element, loadingMessage: string, timeout?: number, clearDomElementCallback?: ClearDomElementCallback): void;
IClientSideWebPartStatusRenderer.renderError(domElement: HTMLElement, error: Error | string, clearDomElementCallback?: ClearDomElementCallback);

Use clearDomElementCallback to clear the DOM node.

Web Part lifecycle method for theme changes

BaseClientSideWebPart.onThemeChanged(theme: IReadonlyTheme | undefined): void;

When a theme is initialized or changed on a page, onThemeChanged will be invoked with the new theme.

Important

render should not be invoked in onThemeChanged. Calling render can lead to unpredicted re-flow of the web part. render will automatically be invoked if needed.

Updated Web Part Templates

  • No Framework, and React templates are updated with new user-friendly UI
  • New "Minimal" template is added: allows to start development with the minimal amount of code provisioned.

Other generic updates and changes

Changes to Scaffolding Options and Prompts

The next propmts were deprecated in favor to their defaults:

  • Solution description
  • Environment (SharePoint) version
  • Tenant-wide deployment
  • Isolated permissions
  • Component description

Detect if a component is loading from localhost

BaseComponentContext.isServedFromLocalhost(): boolean;

Any SPFx component can now check if it's currently running from code served locally.

Hide a Property Pane group name

IPropertyPaneGroup.isGroupNameHidden?: boolean;

isGroupNameHidden can be used to skip the rendering of the Property Pane group name to avoid an empty group header being displayed.

The default value of isGroupNameHidden is false.

ipAddress Property in serve.json

New property ipAddress has been added to serve.json configuration. This parameter is helpful when using Docker containers. For example, to set the serve host as '0.0.0.0'. This property will be explicitly used to wind up the server, meaning all debug URLs and webpack configurations will not be affected.

Preview Features and Capabilities

Following features are still in preview status as part of the 1.14 release and should not be used in production. We are looking into releasing them officially as part of the upcoming 1.15 release.

Adaptive Card Extensions card view caching

For improved performance, SPFx now supports local caching of your Adaptive Card Extension's card views. The cached card view will be immediately rendered when loading your Adaptive Card Extension. After your Adaptive Card Extension loads, it can optionally update the card view.

interface ICacheSettings {
  /**
   * Whether cache is enabled. Default: true
   */
  isEnabled: boolean;
  /**
   * Expiry time in seconds. Default: 86400 seconds (24 hours)
   */
  expiryTimeInSeconds: number;

  /**
   * Returns the Card View used to generate the cached card.
   * By default, the currently rendered Card View will be used to cache the card.
   */
  cachedCardView?: () => BaseCardView;
}
BaseAdaptiveCardExtension.getCacheSettings(): Partial<ICacheSettings>;

By default caching is enabled with default settings. An Adaptive Card Extension can customize its cache settings by overriding getCacheSettings to return the settings it wants to override.

When the last known card view shouldn't be cached, you can provide a specific card view to be cached and displayed on the next page load through ICacheSettings.cachedCardView. This card view doesn't need to have been previously registered.

An Adaptive Card Extension can also locally cache its current state. By default no state is cached.

BaseAdaptiveCardExtension.getCachedState(state: TState): Partial<TState>;

If getCachedState is overridden, then the cached values will be provided when the Adaptive Card Extension is initialized on the next page load.

onInit has a new overload, which passes information about the cached card state. If the card wasn't loaded from a cached card view, then cachedLoadParameters will be undefined.

interface ICachedLoadParameters {
    state: TState;
}
BaseAdaptiveCardExtension.onInit(cachedLoadParameters?: ICachedLoadParameters): Promise<void>;

Your Adaptive Card Extension's initial state can be seeded from the cached state. The cached state can also be used to determine if any further logic needs to be executed.

State caching and the cache expiry time can be used to determine when expensive remote calls need to be made by the Adaptive Card Extension.

Caching can help significantly improve the perceived performance for your Adaptive Card Extension.

Error Handler Method. This method will be invoked when an Action throws an error

BaseView.onActionError(error: IActionErrorArguments): void

Override this method to handle errors from Adaptive Card actions.

New Action types for media and geolocation

Note

These new actions are only available in the browser currently. Viva Connections desktop and Viva Connections mobile support will be enabled later.

After General Availability the support matrix for actions will look like:

Action Viva Connection Desktop Viva Connections Mobile Browser
Select Media Supported Supported Supported
Get Location Not Supported Supported Supported
Show Location Not Supported Supported Supported 

ISPFxAdaptiveCard.actions?: (
    | ISubmitAction
    | IOpenUrlAction
    | IShowCardAction
    | ISelectMediaAction // Raise a file picker or native media picker
    | IGetLocationAction // Get a location
    | IShowLocationAction // Show a location on a map
)[];

The SelectMedia and Location action can be configured as shown below:

  actions: [
    {
      type: 'VivaAction.SelectMedia',
      id: 'Select File',
      parameters: {mediaType: MediaType.Image, allowMultipleCapture: true, maxSizePerFile : 200000, supportedFileFormats: ['jpg']},
      title: 'Select File'
    },
    {
      type: 'VivaAction.GetLocation',
      id: 'Get Location',
      parameters: {chooseLocationOnMap: true}
    }
    {
      type: 'VivaAction.ShowLocation',
      id: 'Show Location',
      parameters: parameters: {locationCoordinates: {latitude: 40, longitude: 40}}
    }
  ]

The actions will be rendered as below

Location Action:

Screenshot of location action

Select Media Action:

Screenshot of file action

The Location Action can be used to get your current location, show your current or a custom location on a map, and choose your current location from a map. In the browser it uses Bing Maps as the mapping interface:

Screenshot of location panel

The Select Media Action can be used to select Images from your native device. In the browser it uses the file picker to help access relavant files:

Screenshot of media panel

Image Helper API

The ImageHelper static class (in @microsoft/sp-image-helper) has been added to allow SPFx developers runtime access to:

  • Urls of auto-generated thumbnail images of pages and documents stored in SharePoint
  • More optimized Urls to images stored in SharePoint

Learn more: Image Helper API

Deprecations and removed items in this release

Important

Any existing solution which is using removed APIs will keep on working without issues. Removal will mean that you cannot created any new solutions which are using these APIs.

  • Deprecated APIs from @microsoft/sp-listview-extensibility:
    • BaseListViewCommandSet.onListViewUpdated
  • Deprecated APIs from @microsoft/sp-core-library
    • EnvironmentType.Local
  • Removed deprecated APIs from @microsoft/sp-http
    • GraphHttpClient
    • GraphHttpClientConfiguration
    • GraphHttpClientResponse
    • IGraphHttpClientConfiguration
    • IGraphHttpClientConfigurations
    • IGraphHttpClientOptions
  • Removed preview APIs from @microsoft/sp-webpart-base
    • ISDKs.office
    • IOffice

Fixed Issues

November-February Timeframe

  • #5131 - Theme tokens in SCSS files in SPFx 1.10.0 don't work anymore
  • #4808 - SPFX and react-dnd
  • #4587 - Will background sections be supported in domain isolated webparts (feature available for spfx 1.8.2 on wards)
  • #4550 - Single Part App Page doesn't prevent navigation when there are unsaved changes
  • #5098 - this.context.propertyPane.open() opens within an <iframe> on isolated webparts
  • #5227 - QuickLaunch navigation (for SinglePageWebParts) fails
  • #6779 - Application customizers appear in "Lists" team tab after adding item to the list
  • #5787 - Check Fullmask Permission and the Bitwise JS Limit
  • #872 - SPFx: Can't view Install Errors
  • #6253 - pageContext does not refresh in app customizers on inline navigation
  • #6102 - Full bleed web part section do not render icons
  • #7536 - ACE Teams Deep Link Not Navigating to Specific Tab
  • #6343 - Preview is not displayed for web part in a single page mode
  • #7079 - Guid.tryParse() not working
  • #7558 - Default SPFx v1.13.1 project recommends unnecessary & deprecated VSCode extension
  • #6854 - Calling clearLoadingIndicator removes entire WebPart
  • #3219 - Adding Application Customizer to existing Web Part Project causes web parts to not be deployed
  • #3830 - "Specified part does not exist in the package" when provisioning docx in elementFiles
  • #3840 - Sorry something went wrong while deploying assets from spfx
  • #4294 - isGroupNameHidden excluded from this release type
  • #4680 - SPFx 1.9.1, office-ui-fabric-react and sp-property-pane
  • #6232 - Getting errors about <div> cannot be nested in <p> when looking at web part data in workbench testing environment
  • #7386 - Build fails when setting skipFeatureDeployment to true
  • #7691 - 1.13.1 TypeError: Cannot read property 'toJson' of undefined when bundling/serving large project