spfx - 将 SPFX 扩展部署到多个站点集合

Question

我已将 SPFX 扩展包部署到应用目录。我们需要将此应用程序部署到多个站点集合。我尝试了不工作的powershell，任何人都可以帮忙。

$credentials = Get-Credential
Connect-PnPOnline "URl of the site" -Credentials $credentials

$context = Get-PnPContext
$web = Get-PnPWeb
$context.Load($web)
Invoke-PnPQuery

$ca = $web.UserCustomActions.Add()
$ca.ClientSideComponentId = "2dbe5b9b-72f7-4dbf-bd6d-43e91ae3a7cc"
$ca.Location = "ClientSideExtension.ApplicationCustomizer"
$ca.Name = "reportanissue"
$ca.Title = "my-spfx-client-side-solution"
$ca.Description = "Deploys a custom action with ClientSideComponentId association"
$ca.Update()

$context.Load($web.UserCustomActions)
Invoke-PnPQuery
Write-Host $("deployed")

标签： spfx

Answer 1

根据您的情况，使用租户范围的部署并使用属性来控制扩展应该在哪些站点上处于活动状态可能更有意义：

1. 在 config/package-solution.json 中将 skipFeatureDeployment 设置为 true
2. 同样在 config/package-solution.json 中，应将条目添加到功能中。如有必要，您可以使用guidgenerator生成 guid：

    "features": [
      {
        "title": "Application Extension - Deployment of custom action.",
        "description": "Deploys a custom action with ClientSideComponentId association",
        "id": "[any guid here]",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml",
            "clientsideinstance.xml"
          ]
        }
      }
    ]

3. 在 sharepoint/assets 创建 ClientSideInstance.xml 和 elements.xml
4. ClientSideInstance.xml 的格式应如下（ComponentId 应与您的扩展在其 manifest.json 文件中的 id 匹配）：

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <ClientSideComponentInstance
        Title="MyAppCust"
        Location="ClientSideExtension.ApplicationCustomizer"
        ComponentId="917a86f2-15c1-403e-bbe1-59c6bd50d1e1"
        Properties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </ClientSideComponentInstance>
</Elements>

4. elements.xml 的格式应如下（ComponentId 应与其 manifest.json 文件中您的扩展的 id 匹配）：

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="MyAppCust"
        Location="ClientSideExtension.ApplicationCustomizer"
        ComponentId="417feb7a-e193-4072-84b8-52ce58ed024f"
        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </CustomAction>
</Elements>

5. 在扩展的主文件（即 src/extensions/myAppCust/MyAppCust.ts）allowedSites: string[];中，在扩展的接口中添加属性：

export interface IAlertPopupApplicationCustomizerProperties {
  allowedSites: string[];
}

6. 同样在扩展的主文件中，有意义的地方，只有this.context.pageContext.web.absoluteUrl在 allowedSites 中才允许功能。

即在 onInit() 如果当前站点不在允许的站点中，我会提前返回（在进行其他查询之前）：

@override
public onInit(): Promise<void> {
  const absoluteUri = this.context.pageContext.web.absoluteUrl;

  // clean up allowed sites
  const allowedSites = this.properties.allowedSitesRaw && this.properties.allowedSitesRaw.length
      ? this.properties.allowedSitesRaw.filter(item => !!item)
      : [];

  // return early if there are allowed sites specified and the current site is not allowed
  if (allowedSites.length && allowedSites.indexOf(absoluteUri) == -1) {
    return;
  }
}

7. 构建解决方案：gulp clean && gulp bundle && gulp package-solution --ship
8. 将解决方案部署到应用目录。
9. 访问租户范围扩展列表（在应用目录站点上，访问站点内容，然后是租户范围扩展）。
10. 在列表中选择新创建的条目（在应用程序目录中部署时创建），选择功能区中的项目选项卡，然后选择编辑项目。
11. 在组件属性中，将 allowedSites 属性添加为数组，并将任何允许的站点 (Urls) 添加到列表中，确保条目是有效的 json)。

{
allowedSites: [
"https://contoso.sharepoint.com/sites/mySite"
],
testMessage: "Test message"
}