PowerApps Tutorial: How to Create Custom List Forms with PowerApps

As we all know, improvements to Office 365 functionality are being made so often that sometimes it’s hard to keep up with them all. Just a few weeks ago, Microsoft’s PowerApps team announced the availability of new PowerApps functionality within Office 365 for SharePoint First Release tenants.

Perhaps the most anticipated of these features that they announced is the ability to use PowerApps to customize list forms within SharePoint Online.

Now users have another “no-code” method for form customization besides InfoPath.

It’s not uncommon for users to want to “spice up” the out-of-the-box forms used in SharePoint lists with custom graphics and layout, conditional formatting, data validation, etc. With PowerApps, now all of that is possible directly from the browser.

I’ve explored this new functionality and was able to add relatively sophisticated functionality to a simple list form in a pretty short amount of time.

I started with just a simple custom list with a handful of columns. For this PowerApps tutorial, I decided to mock up a list that could be used by an organization or team to track issues.

My original custom list was simply named, “Issues”

SharePoint custom list


At first glance, the list looks like any typical custom list you would add to a site. However, when you click on “PowerApps” in the list view menu, you’ll see a new option to “Customize Forms.”

PowerApps customize forms


This option is the gateway to this new functionality and will open the PowerApps development interface directly within the browser. This interface provides a way to view and change the properties of each of the form’s elements with a familiar ribbon-centric menu system common to all Microsoft Office applications.

You’ll find each of the fields of the list form in “cards” that contain information about the field’s data, label, and other properties.

PowerApps fields


Feel like adding your organization’s logo to the top of the form? Simply create a new custom card at the top, and then in the Ribbon select Insert > Media > Image and browse for the logo’s image file you would like to add.

Repositioning or resizing the image is simply a matter of dragging the image and adjusting the borders or entering specific values for those properties in the menu on the right.

PowerApps insert image


For my form, I wanted to use conditional formatting to highlight the “Priority” field in red whenever an Issue was submitted that a user designated as “Critical” priority.

To do that, I selected the “Priority” field and selected “New Rule” from the “Rules” menu on the right.

Then I could define the condition for when that field was to turn red, in this case when the text of that field equaled “Critical.”

Afterward, I defined a new action that resulted from that condition.

In this case, I changed the “Fill” and “HoverFill” properties of the field to red, specifying that color using RGBA (red/green/blue/alpha) values.

PowerApps rules


Now, whenever a user-selected “Critical” from the drop-down list of Priority choices, it displayed it in red which definitely made it stand out on the form!

PowerApps rules formatting


This ability to customize SharePoint list forms using PowerApps is a welcome new addition to the features available in Office 365.

What I was able to create in a short amount of time was just the “tip of the iceberg” as far as possibilities go for creating slick, user-friendly forms in SharePoint.

In just a matter of hours, I was able to transform my custom list form from this…

SharePoint default form


…to this!

PowerApps custom form


These forms, which are also 100% compatible on mobile devices, combined with Microsoft Flow to create automated business processes to the list data, are a great new way to provide users the ability to work smarter in SharePoint Online without having to resort to using complicated development applications.

If your business could benefit from creating custom business applications but this PowerApps tutorial wasn’t enough, you can learn more about how our PowerApps Consulting Services can help!

Related Articles to Help Grow Your Knowledge

The No-Brainer InfoPath Replacement You May Already Be Using
The No-Brainer InfoPath Replacement You May Already Be Using

After nearly two decades, it's time to consider an InfoPath replacement. We recommend considering Microsoft Power Apps and the entire Microsoft Power Platform to replace and enhance the business applications you depend on to keep your teams productive. Change occurs...

Microsoft Teams Adoption Strategy: 5 Critical Considerations
Microsoft Teams Adoption Strategy: 5 Critical Considerations

Microsoft Teams is growing at an incredible rate. In October of 2020, Microsoft reported a 50 percent rise in daily active users from the numbers six months prior. More and more IT business strategies include implementing Teams as a hub for communication and...

Microsoft RPA: Get More Done With Robotic Process Automation
Microsoft RPA: Get More Done With Robotic Process Automation

Every business runs into mundane, time-consuming tasks every now and then. Maybe your team members keep repeating the same navigation steps, clicking the same buttons, just to pull a report. Or perhaps they're constantly forced to look up information in one app so...

Get our free, 30-second weekly newsletter. Used by 2000+ people to keep up with always-changing Microsoft technology.