M365 – Customize SharePoint Online OOB Forms With Power Apps

by · Published · Updated

Hello Everyone,

If you want your SharePoint list OOB form to look elegant but at the same time you don’t have much time to create it, you can always take the help of Power Apps. There are various ways to customize SharePoint list like earlier there was InfoPath, we can use custom codes like HTML, CSS, JavaScript. But we can customize SharePoint list forms with Power Apps within less amount of time. So, let’s see how to do it!!

Customizing the form:

  1. I have created a list with few columns in it for demonstration. Before customization the form looks as below:
Figure 1: M365 – Before Customization
  1. There are two ways for navigation. You have to follow anyone of the two steps mentioned below:
  • On the form, click Edit Form drop down located in top right corner and then click Customize with Power Apps.
Figure 2: M365 – Navigation from Edit Form
  • Alternatively, being on the list view, from the ribbon click Integrate > Power Apps > Customize forms.
Figure 3: M365 – Navigation from Integrate
  1. When you click on Customize with Power Apps or Customize forms it will take you to Power Apps with your SharePoint OOB form ready to customize.
Figure 4: M365 – SharePoint form ready to customize
  1. Initially it will present with Portrait display mode. We can either modify form in Portrait mode or in Landscape mode. For now, I am changing display mode to Landscape.
  2. To change the display mode, click File > Settings. In the Settings window, click Display > Orientation > Landscape > click Apply.
Figure 5: M365 – Change display mode to Landscape
  1. After changing display mode, your form should look like this.
Figure 6: M365 – After changing display mode to Landscape
  1. In the Tree view (left side of the screen), select the form – SharePointForm1.
Figure 7: M365 – Select SharePoint Form
  1. From the Edit panel (right side of the screen), click Edit Fields.
Figure 8: M365 – Edit Panel
  1. The Fields panel will be opened. In the panel we can add or remove fields which are required or not required respectively, and change their order. In my case, I don’t want Attachment field so I am removing it and bringing Category field above the Author field.
  • To remove, click on three dots and click Remove.
  • To change order, simply drag and drop the field to desired location.
  1. In the Tree View, click each field and from the right panel click Unlock to change properties, without unlocking we cannot change its properties. Do this for every field.
Figure 9: M365 – Unlock fields
  1. Click on each field and change its size as well as adjust two fields in a row.
    (Extra Explore: Try changing the layout of the form from the right panel, Vertical -> Horizontal)
  1. After changing width and rearranging all fields my form looks like below.
Figure 10: M365 – Fields resizing and rearranging
  1. Now, we would add background image to the form. From the Tree View select FormScreen1. From the right panel, click Background image drop down and select Add an image file. Select the image file from your system. Below Background image, there is another option – Image position, select Fill so that image will cover entire screen.
  1. My form looks like below:
Figure 11: M365 – Form with background image in Power Apps
  1. Certainly, for projects we wouldn’t select this image but demonstration purpose I have used it.
  2. CTRL+S to save the form.
  3. From menu click File > Save > Publish to SharePoint.
Figure 12: M365 – Publish to SharePoint
  1. Go back to SharePoint list, and press F5 to refresh the page and to see your customized form. My form looks like below.
Figure 13: M365 – After Customization
  1. Once the form is customized, this customization gets applied to SharePoint New Form as well as Edit Form.
  2. One point to note here is that, default Save and Cancel buttons of form which were available below the form are disappeared. I haven’t added save button because other pair of Save and Cancel button is available above the form.
  3. If we want to add a button, we can do it through Power Apps itself. Moreover, through Power App we can change the color of field title, font, size and much more.

Didn’t like the current form? Want to delete and recreate it?

You can delete the current Power Apps customized form using following steps:

  1. In the SharePoint list, click Gear icon > List settings.
  2. Under General Settings section, click Form settings.
  3. Select first radio button or option – Use default SharePoint form, which will create link below second option as Delete custom form which will delete your Power Apps customized form.
  4. To recreate, follow Customize the form section.

Keep exploring and keep sharing!!

Like, Share, Comment!! Thanks for reading!!

Tags:

You may also like...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: