Registering SharePoint Framework list form customizers with CSOM and PowerShell

Registering SharePoint Framework list form customizers with CSOM and PowerShell

After you deploy a SharePoint list form customizer extension to SharePoint, you need to register it to be used for the New, Edit, and/or Display forms of a list or site content type.

To do this, you'll need the component id for the list form customizer. This can be found in the manifest for the extension.

Extension maniftest.png

To register list form customizer with the forms for a content type, set the value of the NewFormClientSideComponentId, EditFormClientSideComponentId, and/or DisplayFormClientSideComponentId properties of the content type to the component id of the list form customizer extension. You can do this using the SharePoint Client Object Model, the SharePoint REST API, or using PowerShell.

Registering list form customizers with the Client Object Model

The following C# code uses the SharePoint Client Object Model to register the list form customizer for the New and Edit forms with the Item content type of the ListFormTest001 list in the site at the /sites/demo server-relative URL.

static void Main(string[] args)
{
    var siteUrl = "https://contoso.sharepoint.com/sites/demo";
    var componentId = "4899a2bf-ed80-49e6-87fa-46e2fbaffb7b";

    using (var context = new ClientContext(siteUrl))
    {
        context.Credentials = GetSharePointOnlineCredentials();

        var web = context.Web;
        var list = web.Lists.GetByTitle("ListFormTest001");
        var ctypes = list.ContentTypes;

        context.Load(web);
        context.Load(list);
        context.Load(ctypes);
        context.ExecuteQuery();

        Console.WriteLine("List title: " + list.Title);

        var ctype = ctypes.FirstOrDefault(ct => ct.Name == "Item");
        if (ctype == null) return;

        ctype.NewFormClientSideComponentId = componentId;
        ctype.EditFormClientSideComponentId = componentId;
        ctype.Update(false);
        context.ExecuteQuery();
        Console.WriteLine("Configuration for " + ctype.Name + " complete.");
    }
}

Registering list form customizers with PnP PowerShell

The following script uses PnP PowerShell to register the list form customizer for the New and Edit forms with the Item content type of the ListFormTest001 list in the site at the /sites/demo server-relative URL.

Import-Module PnP.PowerShell
$siteURL="https://contoso.sharepoint.com/sites/demo"
$componentId = "4899a2bf-ed80-49e6-87fa-46e2fbaffb7b"
Connect-PnPOnline -Url $siteURL -Interactive
$clientContext = Get-PnPContext
$contentType = Get-PnPContentType -List "ListFormTest001" -Identity "Item"
$contentType.NewFormClientSideComponentId = $componentId
$contentType.EditFormClientSideComponentId = $componentId
$contentType.Update($false)
$clientContext.ExecuteQuery()

The Set-PnPContentType cmdlet was updated in PnP.PowerShell v1.12 to support the registering of list form customizers. If you have PnP.PowerShell v1.12 or later installed, you can use a script similar to the following instead.

Import-Module PnP.PowerShell
$siteURL="https://contoso.sharepoint.com/sites/demo"
$componentId = "4899a2bf-ed80-49e6-87fa-46e2fbaffb7b"
Connect-PnPOnline -Url $siteURL -Interactive
Set-PnPContentType  -List "ListFormTest001" -Identity "Item" -NewFormClientSideComponentId $componentId -EditFormClientSideComponentId $componentId

Unregistering list form customizers

To unregister a list form customizer with the forms for a content type, set the value of the NewFormClientSideComponentId, EditFormClientSideComponentId, and/or DisplayFormClientSideComponentId properties to an empty string. After a list form customizer has been unregistered, the content type will go back to using the default SharePoint forms.