Customize SharePoint List Forms with PowerApps (Step by Step)

Customizing SharePoint list forms are one of the important requirement in SharePoint. Let us discuss step by step in detail, how to customize SharePoint list forms with PowerApps.

In detail, we will discuss list form customizations using Power Apps:

• SharePoint list form customization
• Customize SharePoint list forms with PowerApps
• SharePoint Online list form customization using Power Apps
  • Change SharePoint list form layout
  • Change column of custom list forms
  • Add field to Custom Form
  • Move and Remove Form fields
  • Hide a field from Power Apps Custom list forms
  • Add Image in the PowerApps SharePoint List Form
  • Set Conditional Formatting in the PowerApps List Form
• Save and publish the list form back to SharePoint
• Viewing the PowerApps list form in the SharePoint
• Use the Default SharePoint Form and Power Apps Custom Form
• How to Delete custom list form

SharePoint list forms customizations using PowerApps

We can not achieve all the business requirements using the out of box list forms, so we need to customize SharePoint list forms.

There are various ways, we can customize SharePoint list forms like InfoPath, custom code like HTML, CSS, JavaScript, etc.

InfoPath was quite popular previously, but Microsoft is retiring InfoPath by 2023 and there will be no new version of InfoPath, so InfoPath 2013 is the last version. So it is not recommended now, to do any new customization using InfoPath form designer.

If you are using SharePoint classic sites, then you can still have the option to use client-side code like HTML, CSS, JavaScript, and jQuery to customize list forms. But if you are using SharePoint modern sites, you will not have that option too, as Microsoft does not allows us to inject script in modern sites. We can not use the typical script editor or content editor web part in a modern SharePoint site.

Note: InfoPath 2013 is fully supported in SharePoint server 2016 as well as in Office 365 SharePoint Online as of now.

To replace Infopath, Microsoft provides a tool called PowerApps that helps to develop some dynamic apps quickly, and also by using Power Apps we can customize sharepoint list forms.

Now by opening the Power Apps in the browser, you can easily customize the forms for SharePoint Online List and as well as a Document Library.

There is no need to install any other application to your system, Microsoft Power Apps is tightly integrated with SharePoint.

By using this app, you do not need to apply any code like C#, C++, etc. Once the custom form is ready, then you can directly embed the app with the SharePoint Online list and all the users can use it.

To see how the list form customization works in PowerApps, you need to create a SharePoint list and then you can apply the concepts to the list.

Important Notes to Remember:

There are some important notes to remember while working with Power Apps:

• Currently, the customs forms are not supported for custom list and library templates but not limited to lists such as Announcements, Contacts, and Tasks.
• Suppose the Customize forms do not work properly, then it might contain data types that Power Apps does not support. Also, in this case, you can not move your form to a different environment or a different list.
• While changing the address of a SharePoint Site (that uses custom forms), some additional actions are needed.
• For SharePoint Document Library, Custom forms only support editing custom metadata where the Editing or managing files are not supported.

Read: Power Apps GroupBy Function example

Customize SharePoint list forms with PowerApps

Follow these below steps to customize SharePoint list forms with Power Apps.

Step – 1: (Create a SharePoint List)

As we discussed above that, first we need to create a SharePoint Online List to create a PowerApps Custom Form.

• I have created a SharePoint Online List named Book Details. This list has these many below fields with different data types:

1. Book Name = By default, this is a Title column. Just I renamed it to Book Name.
2. Book Info = Yes/No Data type
3. Book Price = Currency Data type
4. Book Author = Person Data type
5. Book Availability = Date and Time Data type

Step – 2:

• To create the Custom form in PowerApps, From the SharePoint list Ribbon, Select Integrate -> Power Apps -> Customize forms as shown below.

• Once you will click on the Customize forms, the below Power Apps Welcome dialogue box will appear. You just click on the Skip button.

Step – 3:

• Next, the PowerApps Custom list form will open and it will look like the below screenshot. You can see all the SharePoint fields have been populated in the custom form.
• Also, you can see all the Custom Form Properties and Advanced properties from the Form pane (right side of the page).
• Now the Power Apps Custom list form is ready. You can design this form as per your need. Before doing any customization of the form, you must unlock all the data cards. Below I have covered some of the customization things.

Design or Customize SharePoint List Forms in Power Apps

Once the form is ready, you can design or customize it as per your need. There are so many methods to customize the form as Formatting the text, Font size, orientation, Data validations, adding rules, Inserting additional images, charts, icons or views, etc.

Below represents some of the customizations that you can do in the custom form.

Change Form Layout

• Suppose you want to change the layout of the PowerApps list custom form, then you can do it by using the Layout property.
• There are two types of Form Layouts named Vertical and Horizontal. By default, the form will be in the Vertical layout.
• To change the form layout, Select the custom form -> Go to Properties pane -> Select the Layout as Horizontal or Vertical as per your need.

This is how to change SharePoint list form layout using PowerApps.

Change Column of Custom List Form

• You can use the form Column property that will help you to display the form fields with the specified column category (By default, the column property will be 1). That means, if you will choose Column as 2, then the form field will appear with 2 column categories as shown below.
• You can specify the Column category from 1 to 12.

This is how to change number of columns in Power Apps list form.

Add field to Custom SharePoint list form

Do you want to add more SharePoint fields on that PowerApps Custom form? Follow this below things.

• Normally what happens, When you are integrating the Sharepoint list to the Power Apps Custom form, then the form displays with some fields that are present in the list itself. It does not display the list fields like Created, Created By, Modified, Modified By, ID, etc. Apart from that, the form displays only one extra field i.e. Attachments.
• Let’s assume you need to add one more column on that custom form i.e. Created (this is only Viewtext). To do so, select the form -> Click on the Edit fields from the Fields section -> +Add field -> Choose the field that you want (or you can search from the search box) -> Check the field (Created) -> Click on Add button as like the below screenshot. Now the new field will be added to the form.

This is how to add custom fields to SharePoint list form using Power Apps.

Move and Remove form fields

• Suppose you want to keep the form fields in proper order or maybe you want to change the position of a field to up or down, then in this case you can simply drag and drop the field.
• For example, I have a field Book Author and I want to display this field above the Book Price. Simply you can drag the Book Author field and drop it above the Book Price field as shown below.

• There is another way to move the custom field. Hover over the field (Book Author) -> Select the ellipsis (…) that appears -> Select Move up or Move down as like below.

• Similarly, If you want to remove any fields from this section, then hover over the field (suppose Attachments) -> Select the ellipsis (…) that appears -> Select Remove. Then the Attachments field will disappear from the form.

This is how to move or remove fields from SharePoint list forms using Power Apps.

Hide fields from Power Apps Custom form

• To hide any field from the custom form, all you need to do is uncheck the specific field in the form customization options.
• Click on the Edit fields (from Fields section) -> + Add field -> Uncheck the field box. If you will uncheck then the specific field will be hidden and if you will check then the specific field will add in the custom form.

This is how to hide fields from list forms with Power Apps.

Add Image in PowerApps SharePoint List Form

• You can design the custom form by using some Power Apps controls like Image, Camera, Audio, Video, etc. Here we will see how to add an image control in the form header.
• Go to Insert tab -> Media -> Select Image. Then the image control will add to the form header as like below.

• Next, Select the image control and go to its Properties pane. By using the Image property, you can add an image file from your local system. Now the image will appear in the header section as shown in the below screenshot.
• If you do not want to put any image on the image control, then select the Image property as None.

This is how to add images into a SharePoint list form using Power Apps.

Set Conditional Formatting in PowerApps List Custom Form

Similarly, you can design the custom form by adding some rules, by giving some Power Apps Field Validations, by setting some conditional formatting, etc. Let’s take a simple scenario.

• In this custom form what I want to do is, When a Power Apps user will enable the Book Info field, then only all the fields (Book Price, Book Author, and Book Availability) will visible to the user otherwise these fields will be in hidden mode.
• To do this, We need to apply some formula on all these fields Data card Visible property. First, to hide the Book Price, select the data card and apply this below code on its Visible property as:

Visible = If(
    DataCardValue2.Value = true,
    true
)

Where,

DataCardValue2 = Book Info toggle control name

• Next, We need to apply the same formula on the Visible property of Book Author, and Book Availability Data card.
• If you want to view the result, then keep the Alt key on the keyboard pressed, and then select the Book Info toggle control multiple times.
• While you will enable the toggle control, You can see the three fields that you configured will appear and if you will disable the toggle, then all three fields will disappear from the form.

This is how to implement conditional formatting in SharePoint list forms with Power Apps.

Save and publish list form back to SharePoint

• Now the time comes to save and publish the app to SharePoint. So that we can perform our requirements and see valuable results. If you will save and publish the custom form, then only it will reflect in the SharePoint otherwise nothing will happen. Refer to these below things.
• On the PowerApps screen, Open the File menu -> Click the Save button -> Select Publish to SharePoint twice.

Viewing PowerApps list form in SharePoint

• Now it’s time to check the Power Apps customized form in SharePoint List. Select the back arrow and then select Back to SharePoint from the top of the app.

• Once you will click on the Back to SharePoint option, it will go back to the specific SharePoint List. If there is no item, then you can add a new item by using the + New button, and if the list is having an item, then you can edit it by using the Edit option.
• When you will add a new item or edit any item from the list, then the custom form will open on the right-hand side of the browser window as shown below.

• Again if you want to customize the form more, then select the Customize forms option and work on your requirements. When it is done, do not forget to save and publish the changes.

Use Default SharePoint Form and Power Apps Custom Form

• In the SharePoint List, Click on the Gear icon from the upper-right corner -> open the Settings page -> Select the List settings.
• Select Form settings under the General Settings.
• In the Form settings page, you can select any of these options and then select OK.

1. Use the default Sharepoint form: If you will choose this one, then the list will appear with the default form.
2. Use a custom form created in PowerApps: If you will choose this one, then the list will appear with the customized form that you have created in PowerApps.

How to Delete Power Apps custom list form

To delete the PowerApps Custom Form, follow these below steps:

• In the SharePoint List, Click on the Gear icon -> open the Settings page -> Click on the List settings.
• Select the Form settings under the General settings.
• In the Form Settings page, select Use the default SharePoint form and then select Delete custom form as like the below screenshot.

Also, you may like these below PowerApps tutorials:

• Power Apps Choices Function with Examples
• Power Apps Button OnSelect [Complete Tutorial]
• Power Apps Loading Spinner
• Show hide fields based on dropdown selection PowerApps (2 Examples)
• PowerApps Pen input control (PowerApps signature)
• PowerApps Examples – COVID 19 Self Declaration form
• PowerApps CountIf Function with Examples
• Create PowerApps Date filter
• PowerApps Count Function with Examples
• How to Create Login Screen in PowerApps
• Get users from SharePoint Group in PowerApps
• PowerApps CheckBox – How to use

In this PowerApps Tutorial, We covered these below topics:

• Why sharepoint online modern list form customization
• Step by step customize sharepoint list forms with powerapps
• PowerApps customize sharepoint list forms
  • Change SharePoint list form layout
  • Change Columns of Custom List Form
  • Add field to Custom Form
  • Move and Remove the Form field
  • Hide the field from the Power Apps Custom form
  • Add Image in the PowerApps SharePoint List Form
  • Set Conditional Formatting in the PowerApps List Form
• Save and publish the list form back to SharePoint
• Viewing the PowerApps list form in the SharePoint
• Use the Default SharePoint Form and PowerApps Custom Form
• How to Delete Power Apps custom list form from SharePoint list