SPFx Form Customizer Deployment

Question

I have created a SPFx Extension of the new type "Form Customizer". I found no specific information on how to attach the custom forms to the list/content-type. I have read the information from Andrew Connells article

The relevant part is as follows:

You then need to link the form up with a content type on the list. Even if the list has no content types, it’s got a single default content type. We now have six (6) new properties on the content type within the list in the format of ContentType. [Disp|Edit|New]FormClientSideComponent[Id|Properties]. Similar to how the other extensions work, you set the extension’s unique component ID as the content type form’s ClientSideComponentId which tells the SPFx which extension to load. The associated ClientSideComponentProperties lets you provide additional configuration information in the type of an JSON string for this instance. So, to deploy this, you’ll need to set the values of these properties on the content type within the list instance in production. That can be done through the API such as using the SharePoint REST API, CSOM, or one of the helper utilities like PnP PowerShell or the CLI for Microsoft 365

Does anybody solved this already and can help?

Update: The Code, I used to assign the component to the list content-type:

Import-Module PnP.PowerShell
$siteURL="https://contoso.sharepoint.com/sites/xxx"
Connect-PnPOnline -Url $siteURL -Interactive
$ContentTypeName="ZZZ"
$CTypes = Get-PnPContentType -List "List2"
foreach($contentType in $CTypes)
{
    if($contentType.Name -eq $ContentTypeName)
    {
        $contentType.DisplayFormClientSideComponentId = "50ebd4b2-04f4-42fb-af43-953e226179f0";
        $contentType.NewFormClientSideComponentId = "50ebd4b2-04f4-42fb-af43-953e226179f0";
        $contentType.EditFormClientSideComponentId = "50ebd4b2-04f4-42fb-af43-953e226179f0";
        $contentType.Update($false)
    }
}

As I wrote in a comment, the code is working, but my custom Forms won't render. The default Forms of the list are still associated.

Answer 1

Please See following discussions as Solution. https://github.com/pnp/powershell/discussions/2158

Answer 2

The first step is to get the extension's unique component ID, which is a GUID. You can get this from SPFx extension manifest file.

Then you need to use the SharePoint REST API or Client Object Model to tell SharePoint to use the custom form as the new, edit, and/or display form for a specific content type.

The code below shows how to do this for the Item content type of the ListFormTest001 list in the Demo4 site using the SharePoint Client Object Model.

using (var context = new ClientContext("https://robwindsortest986.sharepoint.com/sites/Demo4"))
{
    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 = "edbebed8-38f0-42ee-81fc-49287cc56bcc";
    ctype.EditFormClientSideComponentId = "edbebed8-38f0-42ee-81fc-49287cc56bcc";
    ctype.Update(false);
    context.ExecuteQuery();
    Console.WriteLine("Configuration for " + ctype.Name + " complete.");
}

A couple weeks ago, I took a brief look at how I could do the same thing using PowerShell but I didn't see a way to get or set the NewFormClientSideComponentId, EditFormClientSideComponentId, or DisplayFormClientSideComponentId on the content type. Either I missed something, or SharePoint Online PowerShell hadn't yet been update to expose these properties.

Update (Sep 17, 2002)

Using the information in the resource linked in the answer by Ronny, I was able to update my PowerShell to link the custom forms to the appropriate content type.

Import-Module PnP.PowerShell
$siteURL="https://robwindsortest986.sharepoint.com/sites/Demo4"
Connect-PnPOnline -Url $siteURL -Interactive
$clientContext = Get-PnPContext
$contentType = Get-PnPContentType -List "ListFormTest001" -Identity "Item"
$contentType.NewFormClientSideComponentId = "edbebed8-38f0-42ee-81fc-49287cc56bcc";
$contentType.EditFormClientSideComponentId = "edbebed8-38f0-42ee-81fc-49287cc56bcc";
$contentType.Update($false)
$clientContext.ExecuteQuery()

Answer 3

It seems after $contentType.Update($false), it is needed to update web object to update the content type:

$web=Get-PnPWeb

$web.Update()