0

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.

3 Answers 3

1

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

1

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.

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()
6
  • With the latest PnP.Powershell, I was able to assign DisplayFormClientSideComponentId NewFormClientSideComponentId EditFormClientSideComponentId to the content-type of my list. But even after $contentType.Update($false), the custom forms are not associated. If I verify these properties, they return my given FormClientSideComponentId's So, this new feature does not work. - Or may I do something wrong?
    – Ronny
    Jul 13, 2022 at 14:17
  • Did you deploy the app package to the app catalog and then add the app to the site where you plan to use it? Jul 13, 2022 at 15:04
  • Yes, of course. To the site collection app catalog.
    – Ronny
    Jul 13, 2022 at 15:21
  • And App is installed without any errors
    – Ronny
    Jul 13, 2022 at 15:54
  • I just updated to the most recent version of PnP.PowerShell and I don't see properties for NewFormClientSideComponentId, EditFormClientSideComponentId, or DisplayFormClientSideComponentId on the content type object. I ran $ctype = Get-PnPContentType -List "ListFormTest001" -Identity "Item" to get the content type and then $ctype | Format-List to show the properties. The properties mentioned above do not appear. I'm not a PowerShell expert, but I don't think PnP.PowerShell has been updated to support these properties yet. Jul 13, 2022 at 17:38
0

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

$web=Get-PnPWeb

$web.Update()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.