Deploy SPFX Extensions Globally using Powershell

Edited : 09 12 2017

You have developed your SPFX Extension, you need to deploy it to multiple sites or sites collections. The programming approach is preferred instead of feature deployment.

The following code sample deploys a placeholder custom action (for this example it was a mega menu) to multiple sites. It is inspired from YPCode Blog article

Edit : 11 05 2018 – Microsoft will add an option to deploy an SPFX Extension globally, so such script might be obsolete.

Alternatives

There is an npm extension recently created SPFx extensions CLI from Vardhaman Deshpande. It doesnt allow to apply on a list of site collection but it could be used instead of pnp cmdlets.

Pre requisite

  1. in package-solution.json
    "skipFeatureDeployment": true
  2. Install SharePoint PNP Powershell Online
  3. Create the credential in credentials manager named as “tenantCred” for your tenant using this method.

Code Explanation

Deploy the custom action to every sites inside a site collection.

Pre requisite understanding :

  • It will asked the password during deployment.

Code

############################################################
# Set here the URL of your site
$targetWebUrl = "https://tenant.sharepoint.com/sites/dev/"
# Set the name of the custom action here 
$customAction = "MegaMenu"
# Id of your extension.
$componentId = "a861c815-e425-416d-9520-04bcdf557e27"
############################################################

SPCsomHelper-IncludeCSOMModuleOnline

$sPassword = Read-Host -Prompt "Enter password" -AsSecureString
$ctx = SPCsomHelper-InitCtxForSPOnline "https://tenant.sharepoint.com/sites/dev/" "admin@tenant.com" $sPassword

$web = $ctx.Web;
$ctx.Load($web);
$subwebs = $web.Webs;
$ctx.Load($subwebs);
$ctx.ExecuteQuery()

foreach ($subweb in $subwebs) {    
      Write-Host -ForegroundColor Yellow "Activating on " $subweb.Url
      Connect-PnPOnline $subweb.Url -Credentials tenantCred
      Add-PnPCustomAction -Name $customAction -Title $customAction -Location "ClientSideExtension.ApplicationCustomizer" -ClientSideComponentId $componentId -ClientSideComponentProperties "{}"
      Write-Host -ForegroundColor Green "Activated on " $subweb.Url
}

function SPCsomHelper-InitCtx
{
    param($sSiteUrl, $sUserName, $sPassword)
   
    #SPO Client Object Model Context
    Write-Host -ForegroundColor Yellow "    Website is " $sSiteUrl
    $spoWebCtx = New-Object Microsoft.SharePoint.Client.ClientContext($sSiteUrl)
    $spoCredentials = New-Object System.Net.NetworkCredential($sUserName, $sPassword)
    $spoWebCtx.Credentials = $spoCredentials

    return $spoWebCtx;
}

function SPCsomHelper-IncludeCSOMModuleOnline() {   
    $sCSOMRuntimePath = "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.dll"    
    $sCSOMPath = "C:\Program Files\SharePoint Online Management Shell\Microsoft.Online.SharePoint.PowerShell\Microsoft.Online.SharePoint.Client.Tenant.dll"            
    Add-Type -Path $sCSOMPath
    Add-Type -Path $sCSOMRuntimePath
}

More readings suggestions

Build a breadcrumb using SPFx extensions by Joao Ferreira (deploy to cdn, create bread crumb)

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: