Customizing SharePoint Online List Form Using PowerApps

Scenario

We have a SharePoint Online List with given fields.

The list form look likes below

Now, sometimes a list has a lot of fields, in that case while creating a new item, the new item form has a long vertical scroll. That is not a good user experience. So, what we have to do is, we should shorten that vertical scroll into the form and that can be done if we have two column layouts into the SharePoint new item list form.

But SharePoint by default does not provide this functionality. So, in that case, we will take help of PowerApps.

Let’s understand how we can achieve this requirement using PowerApps in detail.

Create 2 column layout in SharePoint default form using PowerApps

Open the SharePoint list in which you want to customize the SharePoint form. And then click on New Item button.

A new item form will appear in sidebar of the webpage. You will see an edit icon on the top right corner just before the close button. Click on that and then click on "Customize with Power Apps" link.

This will open this list item form in PowerApps. It may take several minutes depending on your bandwidth, but it will open a PowerApps form editing session window for you.

Now here you are able to see only "Title" field, but in SharePoint list you have a lot of fields. Now, what you can do is, just click on "SharePointForm1" from the left navigation and you will have the below property window on the right side.

Now click on Edit Fields link and now you will see new side pane window that will have the option to add fields. Click on "Add Fields" link.

Then you will see all the available fields in your list.

Just select your fields and click on "Add" button and then you will see all of your fields are added to the PowerApps canvas app screen.

Now you have the requirement to display 2 fields side by side. So, in the right hand side property window, you will have an option as "Columns" and the default value will be 1. So now you can change that value to 2 from 1.

Once you will select 2, the PowerApps will automatically relocate your fields and now it will arrange 2 columns side by side.

And now you can also see that we have a lot of blank space at the bottom.

Here you can also change the background of the screen, change the color of the controls, labels, etc. Any kind of customization you will do here, that will be applied to the SharePoint list form.

Now let’s save this form to SharePoint.

In order to save the customization back to SharePoint, we have to follow 2 steps.

Step 1

Save the PowerApps form by clicking on Save button in the top right corner of the page.

Step 2

Publishing the app to the SharePoint list by clicking on Publish icon from the top right corner of the screen.

Once the publish is done, click on the link "Back to SharePoint" from the top left of the screen.

This will open the SharePoint list again in list view mode. And now when you will click on "New" button, you will see your customized form that you just customized from PowerApps to the screen.

And now you can see here, the vertical scroll bar is removed, and we still have a lot of space to add more controls to the list form.

This form will look same even if you are editing the item or creating new item.

Restoring the default list form

Now, consider a case where we need to roll back to our default SharePoint form back to this list. In other words, what if we need to remove the form customization?

PowerApps does not have any facility using which we can unpublish the customization.

In order to remove the customization, we have to follow below given steps.

Step 1

Click on the setting gear icon from the top right corner and then click on "List settings" link

This will open the list setting page and then you have to click on "Form settings"

You will have the below options available on Form settings page.

Use the default SharePoint form: If you select this option, you will restore your default SharePoint list form to the current list.

Use a custom form created in PowerApps: This will be by default selected if in case you have custom PowerApps form associated with this list. Here you have further three more options.

1. Modify form in PowerApps

If you click on this link, it will again open the PowerApps and allow you to customize the list form further.

2. See versions and usages

If you click this, it will redirect you back to the PowerApps screen and the app information such as App link, version history, and other such options will be available.

3. Delete custom form

If you click this, it will delete the customization done using PowerApps. So if in future you will try to customize the SharePoint list form again in the future, it will start from scratch.

So, to restore the original list form, let’s select "Use the default SharePoint form" and click on OK button.

And once you will come back to the list and click on "New", you will see your default list item creation form again.

Summary

In this way, we can customize the default SharePoint list item creation form, and how to restore our SharePoint list form back and removing SharePoint and various other options in SharePoint list’s form settings. If you have any comments, questions, please mention that in the comment section.