Office 365 Customize SharePoint Forms with Multiple Screens Using Power Apps

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. Ensure that the “Use a custom form created in Power Apps (requires a new list experience) – is checked
    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
    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
    4. Rename the forms to View_Form and Edit_Form respectively

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)) 
  1. 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. 
  1. 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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Must read

Webinar (Presenter): Microsoft Ignite Briefing: Top Tech Announcements

Each year Microsoft highlights the latest and greatest developments in tech at...

Microsoft 2021 Ignite Briefing (Presenter): Top Tech Announcements

Each year Microsoft highlights the latest and greatest developments in tech at Microsoft Ignite and this year’s...

Latest news

A Day in the Life of a Power Platform Admin

https://www.youtube.com/watch?v=IjGmMKowexw&list=PLqKBietJFMF0TAigxQxMV7tsfUssWIoPJ&index=6 Join this session to walk a day in a Power Platform...

Maximize Your Dynamics Investment with Power Platform

Your Dynamics 365 investment provides your organization with a robust toolset to...

Productivity and Microsoft Viva

Curious about the future of SharePoint now that #MicrosoftViva has arrived? Take a closer look at Microsoft Viva, the...

Using Power Apps, Power BI, and Power Automate Together

Using Power Apps Power BI and Power Automate together can unleash huge benefits and enhance your solutions....

Must Read

Using Power Apps, Power BI, and Power Automate Together

Using Power Apps Power BI and Power Automate together can unleash huge...

Power BI Version Control – Ready to use solution

Power BI Version Control is a free, fully packaged solution that lets...

Connecting and using an On-Premise Gateway

The WHY There was a request to duplicate files...