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.
