Power Apps - Customizing your form

Using PowerApps to Customize a SharePoint List Form

1. With your SharePoint list on screen, click the down arrow next to PowerApps on the list toolbar and click on Customize forms:
   
2. PowerApps editor will open and create a default form:
   
3. Let's make the form wider so we can have 2 columns of fields.
4. Click on File > App Settings and change Orientation to Landscape
5. Click on Apply
6. Click on the back arrow to return to the PowerApps Editor:
7. Grab the righthand middle control on the form and stretch it to the width of the page.
8. 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.
Note: Standard field width is 455 and covers 1/3 of the screen for Horizontal forms. You can widen fields to 2/3 or full width by increasing the width of the Data card. 1/3 width is 455, 2/3 width is 910 and full screen width is 1365.
9. Your form should look like this:
   
Note: You can hide fields easily by turning their visibility off or you can also delete them. If you want to pass form data to the list via "Hidden Fields" you can populate the form field with user data such as their ID, then hide the field and that data will still be passed through when the user submits their form.
10. Next, let's change the width of the Title and Description fields to cover 2 columns.
11. Select the Title card and grab the righthand middle control and stretch it to the right side of the form.
12. Note that the Description card was pushed down to the next line.
13. Now select the Description card and do the same - stretch it to the right side of the form.
14. Your form should look like this:
    
15. Let's save and publish your changes and test it with our SharePoint list.
16. Click on File > Save
17. Now click on Publish to SharePoint > Publish to SharePoint
18. Click on the URL to our SharePoint list (it's above the Saved timestamp)
19. Back on your list, click on New
20. You should see something similar to this:
21. Close your form.

1. Next, let's add a logo and title to our form.
2. 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.
3. In the Screens menu on the left, select your SharePoint form (SharePointForm1).
4. Grab the top middle control on the form and drag it partially down the page (about 65 pixels).

5. From the Insert ribbon, click on Label and stretch it to cover the area you just opened up.
6. set the text color to white and the background color to blue, then click on Custom and set the hex values to 304CB2 or set the RGB values to 48 76 178 respectively. This is the approved Southwest corporate blue.
7. Click on Home and change the font size to 22.
8. Change it to bold.
9. Set the Padding left to 210 (This leaves room for the logo)
10. Under the Media drop-down, Select Image > Add the SWA Logo
11. Position it into the top left corner of the blue Header Label.
12. Rename it "Header Label"
13. Next let's add the User Profile Information to the header Label.
14. From the Insert ribbon, click on Label for the text property insert in the following. Office365Users.MyProfile().GivenName & " " & Office365Users.MyProfile().Surname & " - " & Office365Users.MyProfile().MailNickname & " - " & Office365Users.MyProfile().Mail & " - " & Office365Users.MyProfile().OfficeLocation
15. Using the controls, move and stretch it to cover the right hand side of the Title Label you just created previously.
16. Your form should look like this:
17. Now Save, Publish and test your form:
18. Note - if you don't see your form changes, refresh your browser.