Customizations All List Form PowerApps Should Have

In this third post in my series on modern SharePoint solutions, I will cover customizing PowerApp forms to meet the requirements of the business. We’ll first start off with some basic customizations that need to be done for most form integrations. When I started to write this post I initially had planned to discuss the modifications you should make for all and then move on to the custom modifications for the solution requirements. The “default mods” quickly filled up this post, so I have moved the custom mods to the next one.

Posts in this series:

Preparing SharePoint
Integrating PowerApps as a Custom List Form
Customizations All List Form PowerApps Should Have (this post)
Setting a SharePoint People Picker Field Programmatically in PowerApps
Cascading Drop-down Lists and People Picker in PowerApps
Create a Flow to be Started Manually
Creating a Multiple Approver Microsoft Flow
Sending a Tweet from Microsoft Flow
Starting a Microsoft Flow from a PowerApp

Customizing PowerApp Forms

Basic List Form Setup

I am going to start off with a few things that should be done each time you integrate your PowerApp into a SharePoint list.

Rename Screens, Forms, and Data Cards

This is completely optional, but I prefer to rename all of my components to the function they are performing. For example, if my form is going to be for new data, I will rename FormScreen1 to FormScreenNew, SharePointForm1 to SharePointFormNew and Title_DataCard1 to Title_DataCardNew. If you have a lot of fields it may seem like a lot of extra work but will help when troubleshooting or creating custom functionality within the app. To accomplish this, simply right click on the object and select Rename.

Configure New, Edit and View Forms

By default, PowerApps will create your form with one form view. You can modify this by creating views (kind of what we did with InfoPath). I don’t recommend this because it leads to more work plus let’s just stay away from the habits of InfoPath. Instead, I recommend duplicating and renaming the screen forms. This will actually make it much easier for preparing the screen each time it needs to be loaded. It’s really easy to do too. Unless all of your screens are going to be vastly different I recommend building up one with the layout you want for your other screens and complete the following steps:

Right click on your screen form. The default name is FormScreen1.
Select Duplicate Screen
A new screen with the same form(s) and data cards will be created.

This is where renaming your fields comes in handy. Yes, you will\should have to do it again, but if you didn’t each of the objects will now have a _1 appended to them. So FormScreen1 will now be FormScreen1_1. Duplicate another form and it will now be FormScreen1_2. Not easy to tell apart. I suggest you repeat the rename and duplicate steps until you have screens for New, Edit, and View. When you are done, your app tree should look something like this:

Change the Page Orientation

This is another optional change. It depends on the type of fields you have. If you just have a few text boxes or drop-down lists, leaving the orientation as portrait should be just fine. In my case I have a multi-line text field. To make it look better I chose to change the orientation. It’s pretty sstraightforwardif you choose to make the change:

Click on File (top left hand side)
Click on App Settings
Click on Screen size + Orientation.
Then select the Orientation you want (Portrait or Landscape) and whether you want it small or large.
Make sure you click on Apply in the bottom right of the screen (it doesn’t really jump out at you).

Specal Note: Keep in mind when you are selecting your size and orientation that applies to the overall screen. You can resize your form within should you wish. See how I resized it within the app and the result in the SharePoint list:

PowerApp: SharePoint List:

Set Standard Field Sizes

If you have a large number of fields it will be a pain to set all the fields manually and make sure they all look uniform. If you see my screenshots above you will see that resizing changed the size of the fields to be too small. What you can do to make this easier is to pick one field. Set that field to be the size you want all or most of your fields to be. Once that is done you can then set the size based off your primary. This way if you find your fields are a little bit too large or small, you can update them all at once by setting that primary field. To set a field to be equal to another field’s size simply update the width property of the data card to <datacard>.width. For example, linking Project\Event data card to Title (Summary) I set the width property to: Title_DataCardNew.Width. Repeat for the height property (Title_DataCardNew.Height). Then repeat this process for all the fields you want to look the same. You can do the same for the data value fields within the card if you wish as well.

Note: Only do this with the fields you want to appear the same. You don’t have to do it with all of them. Where it comes in handy is when duplicating the different form types (New, Edit, View).

Set the field values to match a “primary field” (fields coloured to illustrate size): Notice the fields change the same to match:

Reset Fields On Load

Note: at the writing of this blog post, the following steps were required, but it appears that now the RestForm control, catches the X-Out. I am leaving these steps here in case your PowerApp build is missing this updated setting

One important step is to reset your fields when loading. Especially on the New form. Reason being is that the “X-Out” button of the form, doesn’t clear the information from memory. So if you start to fill in a form, decide against it and come back to it, the data will be maintained and mistakes can occur (Thanks to Laura Rogers for this tip).

First things first. Let’s take a look at where you can ensure things load properly. If you take a look at your solution tree on the left hand side you will see “SharePointIntegration” at the top. Click that and then click Advanced in the properties section on the right. You will notice that you now have loading options for when creating a new item, editing a current or viewing an item. By default, even if you create new forms in the solution it is going to be pointing at the default form that was generated when you started the whole process.

Note: if you click on “More options” you will see actions for the save and cancel functions.

So what we are basically going to do is tell the NewForm to reset the fields, which form to navigate to (remember we have three) and how we want it to navigate there. In the OnNew field, modify the code as follows:

ResetForm(SharePointFormNew);NewForm(SharePointFormNew);Navigate(SharePointFormNew,ScreenTransition.None)

The only thing you really need to do for the Edit and New forms is to tell them where and how to Navigate. This is because the data is loaded each time you edit or view.

EditForm(SharePointFormEdit);Navigate(SharePointFormEdit,ScreenTransition.None)

So when you are done it should look something like this:

Once you add any custom css (which I recommend you do as the form can look really washed out at times without it), format the fields the way you want you, and add\remove any field you need or don’t you can save and publish the form and see how it looks. Next is to add some customizations to meet the requirements.

Thanks for reading!!

Building a Modern SharePoint Solution: Part 3 – Customizations All List Form PowerApps Should Have