Deploying SPFX extension to multiple sitecollection

Question

I have deployed SPFX extension package to app catalog. we need to deploy this app to multiple sitecollection. I tried powershell which is not working can anyone please help out .

$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")

score 1 · Answer 1 · answered Aug 27 '19 at 15:05

Depending on your situation it might make more sense to use tenant wide deployment and use properties to control the sites which the extension should be active on:

in config/package-solution.json set skipFeatureDeployment to true
also in config/package-solution.json an entry should be added to features. You can use a guidgenerator to generate the guid if necessary:

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

in sharepoint/assets create ClientSideInstance.xml and elements.xml
ClientSideInstance.xml should be formatted as follows (ComponentId should match the id of your extension in its manifest.json file):

<?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 should be formatted as follows (ComponentId should match the id of your extension in its manifest.json file):

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

In the main file for your extension (i.e. src/extensions/myAppCust/MyAppCust.ts) add property allowedSites: string[]; in the interfaces for your extension:

export interface IAlertPopupApplicationCustomizerProperties {
  allowedSites: string[];
}

Also in the main file for the extension, where it makes sense, only allow functionality if the this.context.pageContext.web.absoluteUrl is within the allowedSites.

I.e. in onInit() I return early (before doing additional queries) if the current site is not in allowed sites:

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

Build the solution: gulp clean && gulp bundle && gulp package-solution --ship
Deploy the solution to the app catalog.
Visit Tenant Wide Extensions list (on app catalog site, visit site contents, then tenant wide extensions).
Select the newly created entry (created when deploying in the App catalog) in the list, select the Items tab in the ribbon, and then select Edit Item.
Within component properties add the allowedSites property as an array and add any allowed sites (Urls) to the list, ensuring the entry is valid json).

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

Deploying SPFX extension to multiple sitecollection

1 Answers1