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.
[…] SharePoint Modern Lists: Force forms to open in full size […]
Trying this out and can’t seem to get it to populate any link in the column. Does it need to be the title column?
Hey Rob,
Yes, if you want to show the title value using this JSON formatter you need to use it on the Title field, otherwise it will display the current field value.
Remember also to check if the ID field is added to the list view…
If you want to add it to another column you can use the below JSON formatter (replace ‘YourListPath’ by your list path there):
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json”,
“elmType”: “a”,
“txtContent”: “[$Title]”,
“attributes”: {
“href”: “=@currentWeb + ‘/Lists/YourListPath/DispForm.aspx?ID=’ + [$ID] +’&Source=’ + @currentWeb + ‘/Lists/YourListPath'”,
“target”: “_self”
}
}
If you want another value other than the Title field displayed, then you replace the token $Title by the related for another field you want
How do I do it for new forms as well? A new form should open in a full page
Hi Ramesh,
Unfortunately, using this approach it is not possible at the moment.
You would need to enable your users to access the lists from a custom page with a list view WebPart (hiding the command bar), and add a link to the new form there…
Hello,
Turning off the Dialog by setting to “No” allowed me to display my New, Edit and View form with the correct size. Plus I used Nintex for the form design.
No need for code
Thank you.
Khaled
Hi Khaled,
Your approach is valid for sites using the Classic experience. For the modern experience it’s possible only with the custom JSON formatting as in this post…