将 SPFX 扩展部署到多个站点集合答案

【问题标题】：Deploying SPFX extension to multiple sitecollection将 SPFX 扩展部署到多个站点集合
【发布时间】：2019-08-27 23:05:15
【问题描述】：

我已将 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

【解决方案1】：

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

在 config/package-solution.json 中将 skipFeatureDeployment 设置为 true
同样在 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"
          ]
        }
      }
    ]

在 sharepoint/assets 创建 ClientSideInstance.xml 和 elements.xml
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>

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>

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

export interface IAlertPopupApplicationCustomizerProperties {
  allowedSites: string[];
}

同样在扩展的主文件中，如果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;
  }
}

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

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

【讨论】：