MS Teams个人标签中添加的SPFX Webpart无属性面板打开入口

问题场景截图：

SPFx WebPart的属性面板默认仅在SharePoint页面的编辑模式下提供原生触发入口，打包为Teams个人应用后，Teams侧没有对应的原生编辑触发逻辑，需要按以下步骤配置实现：

• 第一步：调整解决方案manifest配置
  打开SPFx项目的config/package-solution.json文件，确认solution节点下的supportedHosts包含TeamsPersonalApp，同时新增canUpdateConfiguration属性并设置为true，示例配置如下：

  {
    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
    "solution": {
      "name": "your-app-client-side-solution",
      "id": "xxx",
      "version": "1.0.0.0",
      "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],
      "canUpdateConfiguration": true
      // 其他原有配置
    }
  }
  

• 第二步：添加属性面板自定义触发逻辑
  在WebPart的渲染代码中自行添加触发按钮，调用SPFx内置的上下文API唤起属性面板，示例代码如下：

  import * as React from 'react';
  import * as ReactDom from 'react-dom';
  import { Version } from '@microsoft/sp-core-library';
  import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
  import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
  
  export default class YourWebPart extends BaseClientSideWebPart<{}> {
    public render(): void {
      this.domElement.innerHTML = `
        <div style="padding: 20px;">
          <button id="openPropPaneBtn" style="margin-bottom: 20px;">配置WebPart属性</button>
          <div id="webpartContent">
            <!-- 此处放置你的WebPart业务内容 -->
          </div>
        </div>
      `;
      // 绑定按钮点击事件
      this.domElement.querySelector<HTMLButtonElement>('#openPropPaneBtn')?.addEventListener('click', () => {
        this.context.propertyPane.open();
      });
    }
  
    protected get dataVersion(): Version {
      return Version.parse('1.0');
    }
  
    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
      return {
        pages: [
          {
            header: { description: 'WebPart配置项' },
            groups: [
              // 此处放置你原有属性面板的配置项
            ]
          }
        ]
      };
    }
  }
  

• 第三步：重新打包部署生效
  完成上述修改后，依次执行以下命令重新打包解决方案：
  gulp bundle --ship
gulp package-solution --ship
  将新生成的.sppkg文件上传到SharePoint App Catalog，同步更新Teams应用商店中的对应应用，重新安装后即可通过自定义按钮打开属性面板。

注意：目前Teams个人应用场景不支持和SharePoint页面一致的原生编辑入口，必须通过上述自定义触发的方式实现属性面板调用。

内容的提问来源于stack exchange，提问作者Dev Joshi Entertainment