Customize SharePoint Forms with Multiple Screens Using Power Apps

The WHY

In this scenario, there is a need to add information to a list then when editing the information later they would like it to display different fields. When researching and looking for scenarios like mine, there wasn’t anything explaining how to do this with SharePoint Power Apps forms. Examples of this use case can be IT helpdesk portals, request portals for specific intranet sites (think of a specific request portal for Finance or HR where someone can request a site change or ask questions), FAQ portals… All of these lists would follow a similar structure where someone may be inputting information in a list but it may require additional steps after being submitted. In this case we are customizing a SharePoint list form to help showcase a solution like this.

The HOW:

The Foundation

1. Create a list with the necessary metadata
   1. I’m still a bit old school, I will navigate to the backend of the list and create my columns there with no spaces then add the spaces after having created the columns. This helps with keeping your naming convention in tack, which helps when referring to columns and such within Power Apps but also the URL of the column itself is clean. On the contrary, using the modern interface to create columns it gives it a GUID like URL and keeps the Display Name as desired. There are reasons to use both but I have my personal preference! 🙂
2. Add a Power Apps to the List
   1. Navigate to the list and click the Power Apps drop-down and click Customize Forms
   2. Power Apps will open and the first thing we can do is to rename the first screen
      1. Double click the screen name to make it editable and change the name to New_Screen and the form to New_Form
      2. In Power Apps, we try to use the KISS model.. (Keep It Simple…Silly)
         1. Shout out to my former co-worker who served in the National Guard for many many years, (Thank you for your service!) that helped drill the military version of the KISS model into my brain.
   3. Click save and publish to SharePoint
   4. Navigate to the List settings and Click Form Settings
      1. 
      2. Ensure that the “Use a custom form created in Power Apps (requires a new list experience) – is checked
         1. 
   5. Let’s take a second to test and ensure everything is working with the form with the new Power Apps form in place.
   6. This will give us a base so if anything goes wrong later we will have a better understanding of what may have gone wrong:
      1. Test adding a new item
      2. Test viewing that item
      3. Test updating that item
   7. Now that we have tested and it is working let’s get to the fun part!
3. Customize the SharePoint List Form
   1. Duplicate the New Screen 2 times – Which leaves you with 3 screens total
      1. 
   2. With the 2 new screens, rename them to View_Screen and Edit_Screen
   3. Pro-Tip: Ensure that the New_Screen is the first in the list. Not crucial for this exercise but helps with visual logic while working with your screens and forms
      1. 
   4. Rename the forms to View_Form and Edit_Form respectively
      1. 

SharePointIntegration Settings:

1. Click on SharePointIntegration and modify the settings as follows:
   1. OnNew: Navigate(New_Screen, ScreenTransition.None); NewForm( New_Form)
   2. OnEdit: Navigate(Edit_Screen, ScreenTransition.None); EditForm(Edit_Form)
   3. OnView: Navigate(View_Screen, ScreenTransition.None); ViewForm(View_Form)
   4. OnSave*: If(App.ActiveScreen.Name = “New_Screen”,SubmitForm(New_Form), App.ActiveScreen.Name = “Edit_Screen”,SubmitForm(Edit_Form)) 

2. To edit which fields are showing in what order, click on the screen that you would like to update and click on the form control. Under the Edit panel, click the fields Edit Fields link. This will allow you to update the order, add or hide, and modify that specific form without changing the other screen forms. 

3. Now save and publish to SharePoint. The Power Apps forms and SharePoint Integration working together as one! I had a fun time working through this, I hope you did too!