Different ways to apply SharePoint field customizer extension to existing multiple columns

SharePoint Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them. The Field Customizer Extension allows modifying the Views of the field in a list view. It can be used to override the field representation in the list. Field Customizer can be used with site columns or directly to the field inside a list. Microsoftarticle shows the detailed step to create the Field Customizer Extension but with limited instruction to apply it to existing list columns. Here are multiple ways to apply Field Customizer Extension to existing list columns.

The way to do this is to ClientSiteComponentId GUID attribute of Field Customizer for the existing field. There are few ways to implement this.

1. The first way is to use CSOM PowerShell to update ClientSiteComponentId attribute.

$siteURL = "https://mycompany.sharepoint.com/sites/Harry-PM-Testing"

$userId = "admin@mycompany.onmicrosoft.com"

$pwd = Read-Host -Prompt "Please enter your password" -AsSecureString

$creds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($userId,$pwd)

$listTitle = "Order"

$existingColumnName = "SPFxExeColumn"

$ClientSideComponentId = "acd4d36c-a4ad-123c-a123-93862bd52123"

$ctx = New-Object Microsoft.SharePoint.Client.ClientContext($siteUrl)

$ctx.Credentials = $creds 

try{

    $lists = $ctx.web.Lists

    $list = $lists.GetByTitle($listTitle)

    $listItems = $list.GetItems([Microsoft.SharePoint.Client.CamlQuery]::CreateAllItemsQuery())

    $ctx.load($listItems)

    $ctx.load($list.Fields)

    $ctx.executeQuery()

    $field = $list.Fields.GetByInternalNameOrTitle($existingColumnName)

    $guid = [GUID]$ClientSideComponentId

    $field.ClientSideComponentId=$guid

    $field.update()

    $ctx.Load($field)

    $ctx.executeQuery()

}

catch{

    write-host "$($_.Exception.Message)" - foregroundcolore red

}   

2. The second is to use REST API like mentioned here.

3. The third easiest way is to use the PnP PowerShell like below.

$siteURL = "https://ionisdevops.sharepoint.com/sites/Harry-PM-Testing"

$listTitle = "Order"

$existingColumnName = "SPFxExeColumn"

$ClientSideComponentId = "acd4d36c-a4ad-449c-a312-93862bd52376"

  

Connect-PnPOnline -Url $siteurl  

$guid = [GUID]$ClientSideComponentId

Set-PnPField -List $listTitle -Identity $existingColumnName -Values @{ClientSideComponentId=$guid} -UpdateExistingLists

You can apply the same Field Customizer to as many existing fields as you like as long as the field has all the required schema as the the original list. The fields do not need to be the same type like "Number" since it will not matter.

If you need to apply other SPFx extension like custom action to whole tenant, please refer to other blog.