SharePoint Modern Lists: Force forms to open in full size

SharePoint list forms on modern experience lists will open in a dialog side box by design (at the moment of writing this post, no out-of-the-box options are available to change this).

In my opinion for non-customized forms that’s ok, but for PowerApps forms in SharePoint lists, the layout is not fine when the form layout becomes large, due to currently the forms inside the lists not being perfectly responsive.

Depending on the screen resolution we get unnecessary scrollbars which makes it look poorly done. If you use the form link which can be copied from the form dialog, you can open the item in a full-screen view.

It would be nice if there was an option to configure the item to open in this view out of the box, but for the moment, it is not available. Even if we change the list settings to disable dialogs, that doesn’t take effect on modern experience lists.

But we can count on SharePoint column formatting to overcome this!

With column formatting, we can use custom JSON script to change how a field is displayed, editing or adding HTML elements to the field view. You can find a full overview of column formatting here.

In the case mentioned to force the form to open in full screen, what we need to do:

• Choose a field to change the formatting and include a link
• Format the link based in the item ID and the list Forms URL

If the ID field allowed column formatting we could build the link directly in the ID field, but unfortunately, that’s not an option. So we’ll have to change another field formatting, but accessing the ID field value to build the URL.

You can use the Title field which is normally used to open the items to do this but keep in mind that by overriding the field formatting you’ll lose the field button to open the contextual menu.

The JSON script for the field will be something simple as we will add just one HTML element, here’s the example:

Quick explanation:

•  elmType: the HTML tag type you are going to display
• txtContent: value to be displayed inside the HTML Element – in this case the current field
• attributes: a set of other attributes to be added to the HTML Element, in our case
• href: the link URL – built dynamically using the ID field value and Current Site URL. Add the ‘Source’ parameter to the querystring so that after saving the form you are going to be redirected to the list view (change ‘/lists/yourlist’ above to be your list Site Relative path.
•  target: _self was chosen in this case, to open the form in the same window.

In the targeted list settings, open the column you want to apply the JSON formatting, paste the JSON content under ‘Column Formatting’ and save the changes.

Now all the items in the list when opened using the chosen field will open in a full page with this little trick.