Transforming SharePoint List Forms with Power Apps: From Basics to Advanced Customizations

SharePoint list forms are functional but often limited to a rigid set of fields and layouts. With Power Apps you can completely redesign these forms, swapping standard text boxes for rich controls like star ratings, adding real-time validation, and rearranging fields to minimise scrolling. In this guide we’ll walk through a realistic example — a campaign request tracker — and show how to customise its form step by step.

Scenario: Campaign Request Tracker

Imagine a marketing team that uses a SharePoint list called Campaign Requests to manage incoming campaign proposals. The list contains the following columns:

The default form shows these fields in a single column, and the Priority field is a plain numeric input. The team wants a more intuitive form: a star rating for priority, validated email, and a two-column layout that fits on screen without scrolling.

Open the List Form in Power Apps Studio

From your SharePoint list, select Integrate → Power Apps → Customize forms. Power Apps Studio opens with a pre‑built form connected to your list. All data cards and the default header/footer are present.

Replace the Priority Number Input with a Star Rating

The Priority column (number) is represented by a standard text input by default. We’ll replace it with a Rating control so users can assign a 1‑to‑5 star value.

1. Select the data card for Priority and unlock it (the lock icon in the top‑right corner).
2. Delete the default text input control inside the card.
3. Add a new Rating control from the + Insert pane.
4. Position the rating inside the card using its X and Y properties:

// Control positioning after removing the text input
Rating1.X = 32
Rating1.Y = DataCardKey3.Y + DataCardKey3.Height + 5

1. Wire the rating to the Priority field:
   • Set the data card’s Update property to Rating1.Value
   • Set the data card’s Default property to Parent.Default (so the correct value appears when editing an existing item)

Change the Form Layout to Two Columns

The default portrait orientation makes the form too long. Switch to landscape and give the form two columns.

1. Go to Settings → Display and set Orientation to Landscape. Confirm the change when warned.
2. Select the form itself (the container that holds all data cards) and set:
   • Height: App.Height
   • Width: App.Width
   • Columns: 2
   • Layout: Vertical

The form now spans the full screen and fields flow into two columns, eliminating most scrolling.

Add Email Validation on Save

We want to reject saves where the ContactEmail field does not contain a valid email pattern. Power Apps provides the IsMatch function with a built-in Match.Email pattern.

Select the SharePointIntegration object (the hidden control that manages form submission) and set its OnSave property to:

If(
  IsMatch(DataCardValue4.Text, Match.Email),   // replace with your email text input name
  SubmitForm(SharePointForm1),
  Notify("Please enter a valid email address (e.g., user@example.com)", NotificationType.Error)
)

When the Save action is triggered, the formula checks the email field first. If it’s valid, the form submits; otherwise a red error banner appears and the submission is blocked.

Create Custom Save & Cancel Buttons

The default header already has Save and Cancel buttons, but you may want to style them differently or add extra logic. We’ll add two new buttons directly on the canvas.

• Save button Text: Save OnSelect:

  powerfxSave button OnSelect

  Copy

  SubmitForm(SharePointForm1)

• Cancel button Text: Cancel OnSelect:

  powerfxCancel button OnSelect

  Copy

  ResetForm(SharePointForm1); RequestHide()

To make the Cancel button visually distinct, use these properties:

Position the buttons side by side near the bottom of the form. You can also hide the header’s original buttons (set their Visible property to false) to avoid duplication.

Publish and Test

1. In Power Apps Studio, Save and then Publish the form.
2. Return to the SharePoint list and create a new item. The custom form appears.
3. Fill in the fields, test the rating, try an invalid email to see the validation message, then save a valid record.
4. Edit an existing item and confirm the rating reflects the stored priority.

Reverting to the Default SharePoint Form

If you ever need to go back to the built‑in form, go to the list’s Settings → Form settings, choose Use the default SharePoint form, and confirm. The Power Apps override is removed but not deleted — you can re‑apply it later by customising again.

Common Mistakes & Troubleshooting

• Unlocking the wrong card: Always verify you’re working on the correct data card before deleting controls.
• Missing Default property on a rating: In edit mode, the rating will show 0 if Default isn’t set to Parent.Default.
• Email validation still passes: Confirm the text input name in IsMatch matches the actual email control.
• Form doesn’t cover the screen: Double‑check that the form’s Height and Width are bound to App.Height and App.Width.

Performance & Security Notes

• Delegation: Form submissions do not raise delegation warnings, but complex formulas inside OnSave may slow down the save process. Keep them concise.
• Validation: Client‑side validation via IsMatch is convenient but can be bypassed by direct SharePoint API calls. For sensitive data, always apply server‑side validation as well (e.g., via SharePoint column validation settings).
• Control count: Too many custom controls can increase form load time. Only replace controls when the added value justifies the overhead.

Final Recommendation

Customising a SharePoint list form with Power Apps is a powerful way to improve data entry for your team. Start small — replace one or two controls and adjust the layout — then gradually add validation and styling as you become more comfortable. The result is a form that looks professional, reduces errors, and matches the way your users think about the data they’re entering.

References

• Original article by Matthew Devaney: Power Apps: Customize A SharePoint List Form
• Microsoft Learn: Customize a SharePoint form with Power Apps
• Microsoft Learn: Power Fx IsMatch function