One of the really cool features of PowerApps is the ability to use it to replace and enhance SharePoint list forms. Also if you have used InfoPath in the past for this same purpose, PowerApps is Microsoft’s preferred way of customizing SharePoint list forms going forward.
In this article, we will walk you through how to create a PowerApps SharePoint list form for a custom list. In our next article, we’ll show you how to do the same with the out of the box SharePoint lists (non-custom).
First, we need to start with either an existing custom list or create a new one. For this demo, we’ll create a simple Service Request list.
Creating the Service Request List
-
- Go to your SharePoint team site and click on New > List
- Enter Service Requests in the Name field and enter Used to Manage IT Service Requests in Description.
- Click on Create
- Next, let’s create the following columns (click on + Add column)
- Description – Multiple lines of text
- Requestor – Person
- Due Date – Date
- Assigned To – Person
- Status – Choice – Values: Pending, In Progress, On Hold, Completed, Cancelled
-
- When finished it should look like this:
-
- Click on New to see the default SharePoint list form:
Not a bad looking form – but if we want to add some branding like a logo or have a better structure for the form? That’s where we turn to PowerApps!
Using PowerApps to Customize a SharePoint List Form
- In your Service Requests list, click the down arrow next to PowerApps on the list toolbar and click on Customize forms:
- PowerApps editor will open and create a default form:
- Let’s make the form wider so we can have 2 columns of fields.
- Click on File > App Settings and change Orientation to Landscape
- Click on Apply
- Click on the back arrow to return to the PowerApps Editor:
- Grab the righthand middle control on the form and stretch it to the width of the page.
- On the data source menu, change the number of columns to 2. If you closed your data source menu, you can re-open it by click on Data – Service Requests link on the righthand edit menu.
- Your form should look like this:
- Next, let’s change the width of the Title and Description fields to cover 2 columns.
- Select the Title card and grab the righthand middle control and stretch it to the right side of the form.
- Note that the Description card was pushed down to the next line.
- Now select the Description card and do the same – stretch it to the right side of the form.
- Your form should look like this:
- Let’s save and publish your changes and test it with our SharePoint list.
- Click on File > Save
- Now click on Publish to SharePoint > Publish to SharePoint
- Click on the URL to our SharePoint list (it’s above the Saved timestamp)
- Back on your list, click on New
- You should see something similar to this:
- Close your form.
- Next, let’s add a logo and title to our form.
- Go back to the PowerApps Editor tab in your browser or in your Service Requests list, click the down arrow next to PowerApps on the list toolbar and click on Customize forms.
- In the Screens menu on the left, select your SharePoint form (SharePointForm1).
- Grab the top middle control on the form and drag it partially down the page (about 20%).
- From the Insert ribbon, click on Media > Image.
- On the Image menu to the right, click on Image – Select an image > Add an image file and select a logo file from your computer.
- Depending on what you selected, you may have to resize and reposition it.
- Next let’s add a Title to the form.
- Click on Label and double-click on Text. Enter Service Request Management.
- Click on Home and change the font size to 18.
- Change it to Semibold.
- Change the alignment to Center
- Using the controls, drag the label to the enter length of the form.
- Your form should look like this:
- Now Save, Publish and test your form:
- Note – if you don’t see your form changes, refresh your browser.
- Your form should look this this:
