Customise default SharePoint forms using Power Apps

This page has 0 threads | Add post

Blogs

Many people around the world enjoy and benefit from our blogs. If you're one of them - and can afford to - please make a small donation to help keep this and future blogs, exercises, skills assessment tests, tips, tutorials and videos freely available to everyone!

Customise default SharePoint forms using Power Apps
SharePoint forms can be a little disappointing but now with Power App's help you can make them more interesting!

Posted by Sam Lowrie on 03 September 2025

In this blog

The Problem
Swapping to Power Apps
Modifying the Power Apps form
The result

The Problem

When adding new rows to a SharePoint list, there are two main methods: Edit in grid view or Add new item.

A SharePoint list is similar to an Excel table, with headers that can be sorted and filtered.

Clicking Edit in grid view allows you to enter data in a format similar to an Excel spreadsheet.

This is a great way to add rows quickly using copy and paste.

The other option is Add new item, which opens a form you can fill out to add a single row.

A simple form for data entry.

However, this form is somewhat lacklustre and could be improved with tooltips, images, and a better layout. Using Power Apps, we can do just that and the rest of this blog will show you how.

Swapping to Power Apps

From the ribbon, choose Integrate | Power Apps | Customize forms to launch a new tab in your browser.

The Integrate dropdown contains many cool features that will hopefully be covered in future blogs.

Power Apps is, in Microsoft's own words, "...a low-code/no-code platform that enables users to create custom business applications without extensive coding knowledge, using a visual interface with pre-built components and templates.". I couldn't have said it better myself.

Our first application will be a revamped version of the SharePoint form.

Modifying the Power Apps form

The first change is to use the Properties pane on the right to set the number of Columns to 2 and the Layout to Horizontal.

Two columns will make the form more compact.

This will place two fields on each row, but it can lead to truncation of longer field names. To fix this, select each text box and drag the bottom-left handle until all the text is visible.

You can also reposition or resize the font.

Currently, the Image field uses a URL and doesn’t display the actual image. To change this, first select the Image card and drag it to the right until it spans the entire row.

Resize the Image card until it takes up the entire row.

Resizing a column pushes adjacent columns down a row.

To modify the card’s contents, you must first unlock it by right-clicking and selecting Unlock.

If it is this easy to unlock, why lock it in the first place?

With the card still selected, choose Insert from the ribbon and search for Image.

Searching for the image control in Power Apps

SharePoint also supports image file types if you prefer not to use URLs.

A new image control will be created and selected by default. Below the ribbon on the left is the property of the control we’re modifying, in this case, Image.

The default value is the exciting SampleImage, which you may recognize.

We want to replace the sample picture with the one linked to the image URL. Delete SampleImage and type in the name of the text box holding the URL. It will be something like DataCardValueX, and we want its Text property.

Changing the image to point at the text boxes value

The text box will be highlighted when you select it.

We’re now ready to return to SharePoint and test the form. In the top-left of the screen, click Back to SharePoint to return to the list.

The save icon on the right is greyed out, this indicates that auto-save has worked!

Power Apps will prompt you to Save and publish the app before returning to SharePoint.

A last chance to save before publishing the app

Treat yourself to one last save and publish that app!

The result

To see the changes, either select Add new item in the top-left or right-click an existing row and choose Edit.

I’m going to edit the existing Snake row.

Enjoy the fruits of your labour with a new and improved form, complete with picture!

Now that’s a ssssuper SsssharePoint form!

Some other pages relevant to the above blog include:

This blog has 0 threads

Add a new post

ALL BLOGS

POWER APPS BLOGS

POWER APPS BLOGS

The Problem

Swapping to Power Apps

Modifying the Power Apps form

The result

Head office

London

Manchester