Building a Modern SharePoint Solution: Part 2 – Integrating PowerApps as a Custom List Form

Welcome to the next part in my series about building a modern solution in SharePoint.  This post we are going to cover integrating PowerApps as a custom list form in your solution.  When PowerApps was first released, Microsoft made sure that everyone knew it wasn’t built for SharePoint.  In fact the first examples that Microsoft provided didn’t even involve SharePoint.  Since then SharePoint lists and libraries can be accessed by PowerApp forms using connectors into those environments.  Finally, in the final quarter of 2017 Microsoft provided the ability to integrate PowerApps directly into a list form, thus overriding the default forms of a list.  So like the InfoPath forms of days gone by, you can now use PowerApps for creating, editing and viewing data in your lists.  This post will cover setting up a PowerApp for these list forms.  The next post we will customize the form more to meet our needs for this solution.

Posts in this series:

• Preparing SharePoint
• Integrating PowerApps as a Custom List Form (this post)
• Customizations All List Form PowerApps Should Have
• 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

Using PowerApps as a Custom List Form

In the previous post of this series I created some site columns, content types and lists.  If we don’t customize the list form it’s going to look something like this:

This isn’t going to meet many of our requirements including auto selecting approvers, hiding unnecessary fields, etc.  We are going to want to customize this form.  Now this can be done with JavaScript injection but you will lose the new look and feel of SharePoint.  You could also maintain the look and feel by building a SharePoint Framework app.  I however wanted to talk to you today about PowerApps and Flow so that’s what we are going to use.

Once the ability to customize your list form with PowerApps is available in your tenant you won’t just see “Create an app“, but you will see that and a new option: “Customize forms”

You can still create separate apps with the Create an app button, but unlike creating it that way, your app won’t be available as it’s own PowerApp on your mobile device or in your list of apps.  However, creating a custom form with the new method will allow your list to use the PowerApp and when on a mobile device it will automatically load for you.  So let’s get started.  Before you connect to PowerApps, it’s always good to start with some data.  This helps with testing the app.  Once you have added a row, click on PowerApps -> Customize forms.  The PowerApps Dev studio will load with cards for all of your fields.

Now we can publish this right now and will see that our PowerApps will be the new form.  To prove this out, let’s change the label: Request Summary, to just Summary.  To do this, we will need to unlock the properties (which you will need to do for each field that you want to modify).  Click on the field you wish to change, click on the Advanced tab and then click on the lock button to unlock.

Now let’s change the Display Name of our field.

Now let’s publish just to show how it works.  To publish:

1. Click on File
   
2. Click on Save
   
3. Click on Publish to SharePoint
4. Click Publish to SharePoint again.
   
5. PowerApps will then push your new form to the list.

Going back to the list.  Create a new item.  You will see the presentation of the form is different and the first field is now called Summary.

So as you can see, it’s actually really easy to fully integrate a PowerApps form into a SharePoint.  Now that we have done that we just need to modify it to our needs.  I’ll cover that in my next post.

 

Thanks for reading!!