SharePoint 框架 v1.14 发行说明

此版本引入了有关 Microsoft Viva、Microsoft Teams 和 SharePoint 的功能的更新。

发布时间： 2022 年 2 月 17 日

重要

此页面提供与特定 SPFx 发行版本相关的详细信息。 此页面不包含开发 SPFx 解决方案（包括 SPFx Node.js、Yeoman 和其他工具）而必须安装的其他 SPFx 必备组件。

若要了解有关这些必备组件的详细信息，请参阅设置 SharePoint 框架开发环境。

正在将项目从 v1.13.1 升级到 v1.14

1. 在项目的 package.json 文件中，标识所有 SPFx v1.13.1 包。 对于每个 SPFx 程序包：

   1. 卸载现有的 v1.13.1 程序包：

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

   2. 安装新的 v1.14 包：

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

提示

适用于 Microsoft 365 的 CLI 提供了一个简单的分步指南，可用于将你的解决方案升级到最新 SharePoint 框架版本。

新增特性和功能

Viva Connections的自适应卡片扩展更新

更新了Viva Connections的 ACE 基架

更新了自适应卡片扩展基架，以便更简洁。

获取自适应卡扩展的当前 ViewNavigator

BaseAdaptiveCardExtension.navigator

如果当前的 renderTypeis Card则返回 BaseAdaptiveCardExtension.cardNavigator。 如果当前的 renderTypeis QuickView则返回 BaseAdaptiveCardExtension.quickViewNavigator。

列表视图命令集更新

通知 ListView 有关命令集更改的信息

BaseListViewCommandSet.raiseOnChange: () => void

使用此方法触发 onChange 事件并初始化 ListView 的重排。

展开的列表视图访问器状态

ListViewAccessor 提供当前列表视图的扩展状态。 下面列出了新的 状态属性。

• rows - 当前在列表视图中呈现的行。
• selectedRows - 列表视图的文件夹信息。
• list - 有关列表视图呈现的列表的基本信息。
• view - 有关列表视图呈现的视图的基本信息。
• folderInfo - 列表视图的文件夹信息。
• appliedFilters - 应用于列表视图的筛选器。
• sortField - 对字段名称进行排序。
• sortAscending - 指定列表视图是升序排序还是降序排序。

列表视图状态更改事件

ListViewAccessor.listViewStateChangedEvent: SPEvent<ListViewStateChangedEventArgs>

每次列表视图状态更改时都会引发此事件。 参数包含发生事件的类型（请参阅 ListViewAccessorStateChanges）和列表视图的先前状态（请参阅 IListViewAccessorState）。

列表命令集命令 Disabled 属性

Command.disabled: boolean | undefined;

特定于 Web 部件的更新

用于开发中Web 部件的预定义 Web 部件选取器组

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

该组显示本地调试的 Web 部件。

在显示加载指示器或 Error 元素之前对 Clear DOM 元素的回调

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

使用 clearDomElementCallback 清除 DOM 节点。

主题更改的 Web 部件生命周期方法

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

在页面上初始化或更改主题时，将使用新的主题调用 onThemeChanged。

重要

不应在 onThemeChanged 中调用 render。 调用 render可能导致不可预测的 Web 部件重新流动。 将根据需要自动调用 render。

更新的 Web 部件模板

• 无框架和 React 模板使用新的用户友好型 UI 进行更新
• 添加了新的“最小”模板：允许使用预配的最少数量的代码开始开发。

其他通用更新和更改

对基架选项和提示进行了更改

下一个属性已弃用，取而代之的是其默认值：

• 解决方案描述
• 环境 （SharePoint） 版本
• 租户范围的部署
• 独立权限
• 组件说明

检测是否正在从 localhost 加载组件

BaseComponentContext.isServedFromLocalhost(): boolean;

现在，任何 SPFx 组件都可以检查其当前是否正在从本地提供的代码运行。

隐藏属性窗格组名称

IPropertyPaneGroup.isGroupNameHidden?: boolean;

isGroupNameHidden 可用于跳过属性窗格组名称的呈现，以避免显示空的组标头。

isGroupNameHidden 的默认值为 false。

serve.json 中的 ipAddress 属性

新属性 ipAddress已添加到 serve.json配置。 使用 Docker 容器时，此参数很有用。 例如，将服务主机设置为"0.0.0.0"。 此属性将显式用于结束服务器，这意味着所有调试 URL 和 Webpack 配置都不会受到影响。

预览特性和功能

以下功能在 1.14 版本中仍处于预览状态，不应在生产中使用。 我们正在考虑在即将发布的 1.15 版本中正式发布它们。

自适应卡片扩展卡片视图缓存

为了提高性能，SPFx 现在支持自适应卡扩展卡视图的本地缓存。 加载自适应卡扩展时，将立即呈现缓存的卡片视图。 加载自适应卡扩展后，它可以选择更新卡片视图。

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>;

默认情况下，使用默认设置启用缓存。 自适应卡扩展可以通过替代 getCacheSettings 来自定义其缓存设置，以退回要替代的设置。

在不应缓存最后一个已知卡片视图时，可以通过 ICacheSettings.cachedCardView 提供要缓存并在下一页面加载时显示的特定卡片视图。 此卡片视图不需要事先注册。

自适应卡扩展还可以在本地缓存其当前状态。 默认情况下，不缓存任何状态。

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

如果替代了 getCachedState，则在下一页加载时初始化自适应卡扩展时，将提供缓存的值。

onInit 具有新的重载，用来传递有关缓存的卡状态的信息。 如果未从缓存的卡片视图加载卡，则 cachedLoadParameters 将为 undefined。

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

自适应卡片扩展的初始状态可以从缓存状态设定种子。 缓存状态还可用于确定是否需要执行任何进一步的逻辑。

状态缓存和缓存过期时间可用于确定自适应卡扩展何时需要进行昂贵的远程调用。

缓存有助于显著提高自适应卡扩展的感知性能。

错误处理程序方法。 当操作引发错误时，将调用此方法

BaseView.onActionError(error: IActionErrorArguments): void

重写此方法以处理自适应卡操作中的错误。

媒体和地理位置的新操作类型

注意

这些新操作当前在浏览器中可用。 稍后将启用Viva Connections桌面和Viva Connections移动支持。

正式发布后，操作的支持矩阵将如下所示：

操作	Viva Connection Desktop	Viva Connections Mobile	浏览器
选择媒体	支持	支持	支持
获取位置	不支持	支持	支持
显示位置	不支持	支持	支持

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
)[];

SelectMedia 和 Location 操作可以配置，如下所示：

  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}}
    }
  ]

操作将如下所示呈现

位置操作：

选择媒体操作：

位置操作可用于获取当前位置、在地图上显示当前位置或自定义位置，以及从地图中选择当前位置。 在浏览器中，它使用必应地图作为映射接口：

选择媒体操作可用于从本机设备中选择图像。 在浏览器中，它使用文件选取器来帮助访问重复的文件：

图像帮助程序 API

添加了 (的 @microsoft/sp-image-helper)ImageHelper 静态类，以允许 SPFx 开发人员在运行时访问：

• 存储在 SharePoint 中的页面和文档的自动生成缩略图图像的 Url
• 存储在 SharePoint 中的图像的更优化 Url

了解详细信息：图像帮助程序 API

此版本中的弃用和已删除项目

重要

任何使用已删除 API 的现有解决方案都将保持工作，而不会出问题。 删除意味着你无法创建任何使用这些 API 的新解决方案。

• @microsoft/sp-listview-extensibility中弃用的 API：
  • BaseListViewCommandSet.onListViewUpdated
• 弃用了来自 @microsoft/sp-core-library 的 API
  • EnvironmentType.Local
• 从 @microsoft/sp-http 删除了弃用的 API
  • GraphHttpClient
  • GraphHttpClientConfiguration
  • GraphHttpClientResponse
  • IGraphHttpClientConfiguration
  • IGraphHttpClientConfigurations
  • IGraphHttpClientOptions
• 从 @microsoft/sp-webpart-base 删除了预览 API
  • ISDKs.office
  • IOffice

已修复问题

11 月 - 2 月时间范围

• #5131 - SPFx 1.10.0 中 SCSS 文件中的主题标记不再有效
• #4808 - SPFX 和 react-dnd
• #4587 - 域隔离 Web 部件中是否支持后台分区（功能可用于区域上的 spfx 1.8.2）
• #4550 - 当有未保存的更改时，单部分应用页不会阻止导航
• #5098 - this.context.propertyPane.open()在独立 Web 部件的 iframe 中打开
• #5227 - QuickLaunch 导航（对于 SinglePageWebParts）失败
• #6779 - 应用程序自定义工具显示在 " 中列表>将项目添加到列表后的"团队"选项卡
• #5787 - 检查全掩码权限和位 JS 限制
• #872 - SPFx： 无法查看安装错误
• #6253 - pageContext不会在内联导航的应用定制器中刷新
• #6102 - 完全有问题 Web 部件部分不呈现图标
• #7536 - ACE Teams 深层链接未导航到特定选项卡
• #6343 - 在单页模式下不显示 Web 部件的预览
• #7079 - Guid.tryParse()无法正常工作
• #7558 - 默认 SPFx v1.13.1 项目建议弃用不必要的 & VSCode 扩展
• #6854 - 调用 clearLoadingIndicator 删除整个 Web 部件
• #3219 - 将应用程序定制器添加到现有 Web 部件项目会导致 Web 部件无法部署
• #3830 - 在 elementFiles 中预配 docx 时，"包中不存在指定部件"
• #3840 - 很抱歉，从 spfx 部署资产时出错
• #4294 - isGroupNameHidden从此发布类型中排除
• #4680 - SPFx 1.9.1、office-ui-fabric-react 和 sp-property-pane
• #6232 - 查看 workbench 测试环境中的 Web 部件数据时，无法将有关 <div> 的错误嵌套在 <p> 中
• #7386 - 将 skipFeatureDeployment 设置为 true 时生成失败
• #7691 - 1.13.1 TypeError：捆绑/服务大型项目时无法读取未定义的属性"toJson"