Integrating SharePoint Forms and Lists

“Recently”, Microsoft introduced list forms, a new and “revolutionary” way to collect data in SharePoint Lists. - It’s still pretty basic, but it’s certainly better than the default list forms.

Today, however, I had an interesting question, ‘Is it possible to have the new button on a SharePoint List link to a list form instead of the default form?’

The challenge

This customer was very happy with their current SharePoint List setup, but they wanted to improve the data entry experience and had created a beautiful list form that they were leveraging and linking to from other places.

BUT They had users creating “weird” data, that didn’t match the “branching” they had in their form, leading to confusion and bad data.

It turns out, some users would just click “New” on the list, and fill out the default form, which didn’t have any of the logic or structure of the custom form.

The solution

Linking the “New” button to a custom list form is not possible out-of-the-box, but there is a workaround.

Using either PnPjs or PnP PowerShell, we can set a custom “New” button url, that points to the custom list form.

This url property is called NewFormUrl, and as it turns out, if it’s set to a relative URL within your tenant, SharePoint will link to that url when the “New” button is clicked.

So it’s as simple as this

PnP PowerShell

$Ct = Get-PnPContentType -List "123" -Identity "Item"
$Ct.NewFormUrl = "/:l:/s/DocSets/JABVaIEpBT3NTrh6YzROxxsAAS-tr5zY8X8T435ZFIMycdY?nav=ODVjNDNjNWQtMmMzMS00NGY2LWFjMmMtOWEwMTBhMzA5YTdm";
$Ct.Update($false);
Invoke-PnPQuery;

PnPjs

  await sp.web.lists.getByTitle("123")
    .contentTypes.getById("0x01001871C4E8CBE98F48875D0412653A801400FDA6EE41FDDA46458FB429349EB3E892")
    .update({ NewFormUrl: "/:l:/s/DocSets/JABVaIEpBT3NTrh6YzROxxsAAS-tr5zY8X8T435ZFIMycdY?nav=ODVjNDNjNWQtMmMzMS00NGY2LWFjMmMtOWEwMTBhMzA5YTdm" })

Rolling back

If you want to roll back to the default form, simply set the NewFormUrl property to an empty string.

Caveats

One thing to beware of is that there is no “navigation” back to the list from the custom form, so users might get “stuck” on the form page. You might want to add some explanatory text on the “thank you” page of the form, unfortunately list forms do not support having hyperlinks added to the end of them at this time.

TL;DR

You can set a custom list form as the target of the “New” button in SharePoint Lists by updating the NewFormUrl property of the list’s content type to the relative URL of the custom form using PnP PowerShell or PnPjs.