Customize List Forms – PowerApps Easy Button

There is a brand new, super easy way of customizing SharePoint Online list forms now, replacing the way that we used to do it in InfoPath.  Now, not only can we quickly customize a list form in the browser using PowerApps, but once we do that, that customized form becomes the default form on the list!  So, when end users add, edit, or view items right in the list, they are automatically using the customized form!! HUGE.  For all of those of you out there who were waiting for this, waiting for PowerApps to be more integrated into your lists, well it has arrived!

First of all, here’s how to do it.  This only exists in the modern look, so if your list is still classic, you won’t see this.  Also, as of right now, it’s still rolling out, so some tenants don’t have it yet.

When you click PowerApps, and  Customize forms (see above screenshot), it takes you to PowerApps.  This is a different kind of PowerApp than you get when you click Create an App.  When you customize a list form, it isn’t going to be an app that will show in your list of apps, or on your phone.  But, when you use the SharePoint mobile app, and go to your list to fill out a form, it *will* be this custom PowerApp form.

*To make it visible to end users, click File -> Save, then Publish to SharePoint.  You can click Back to SharePoint at the top left, to go back out of PowerApps, to your list.

Also, when you go to your list settings, and Form settings, that’s where you can switch back to the default SharePoint form and/or delete your customized form if you change your mind.

Once you are in your new form in PowerApps, here are a couple of things to notice.  On the left, click SharePoint Integration, and on the right, click Advanced.

By default, your app will only have one screen.  These settings above are where you can determine what happens when the form is edited, created, or opened from the SharePoint list.  During SharePoint Power Hour this week, I did a demo of this, and showed my recommended actions to add to the defaults, and the reasons.

In my demo, I created a different screen and an EditForm, and re-configured the advanced settings.

Another very common thing, is to make the form a bit bigger, so that it takes up more of the page, which is great for forms that have a lot of fields.  Here is what the form looks like by default:

To make it wider, in your PowerApp, click File -> App Settings

For Screen size & orientation, orientation, choose Landscape.  Once you have more area to work with in your app, you can set up your form to have multiple columns, and just have more room to work.

There are a few other things to notice and be aware of with these SharePoint-integrated forms.  When you click to select a form control, when you look at the properties, you’ll see that there are a bunch of built in settings for things like the form mode and the Item property.  I recommend that you not remove those settings, because these are related to the correct item opening up when it’s selected in the SharePoint list.

Here is my hour long video demo of customizing a list form with PowerApps:

To learn all about PowerApps, check out my PowerApps courses.

11 comments

  • But what about all of us SharePoint 2016 On-Site users? When do we get these cool tools to use?

    Like

  • Laura you wrote “But, when you use the SharePoint mobile app, and go to your list to fill out a form, it *will* be this custom PowerApp form.” I customized a form and it works as expected on the desktop, but when I view it with my iPhone using the SharePoint Mobile App, its the original form. Perhaps this is yet to be changed?

    Like

  • Hey Laura, I repeated editing the form in PowerApps…file/save…Publish to SharePoint. Same issue. The custom form is working from the SP list using a desktop browser but has not impacted the SharePoint Mobile App. I even uninstalled the mobile and and reinstalled in case there is some caching issue. Seems to be the same issue on iPad and iPod SP mobile apps. I’ve opened a support ticket with MS.

    Like

  • Thank you for your videos. Very helpful. I went the route of using PowerApps forms and was pretty happy with the look. I am really disappointed though that you can not add attachments as this defeats the whole reason for my sharepoint lists.

    Have you posted anything about how to make hyperlinks work in the PowerApps forms? I have a child data table which I know users are going to want to export to excel. I imagine that I will need to make a hyperlink that takes them to the underlying list items so they can use the export to excel functionality.

    Like

  • Pingback: PowerApps Tabbed SharePoint Form | @WonderLaura

  • Peter Varberg Madsen

    Hi Laura

    Thank you for some great posts and videos. Very relevant to my current work. 🙂
    I did a list with custom PowerApps forms for next-of-kin inspired by your blogpost. But I only kept the default Save button above the form and use that for submitting both the new and edit form.
    To make this work I create a variable called “ActiveForm” that is set when the form is loaded and then I use this to find out which form to submit OnSave.
    OnNew: NewForm(FormNew);;Navigate(FormScreenNew; ScreenTransition.Cover);;Set(ActiveForm;”new”)
    OnSave: If(ActiveForm=”new”;SubmitForm(FormNew);SubmitForm(FormEdit))

    It works, but I’m not sure that this is the correct way to achieve the goal.
    Do you have any other suggestions?

    Kind regards
    Peter Varberg, Denmark

    Like

  • I’ve made a small customisation to a modern UI form using PowerApps – but it appears that this customised modern form can now only be used by users with a PowerApps license. Does anybody know if that’s the case? We hadn’t planned on giving everyone a PowerApps license, only power users, but that won’t be possible if you need a PowerApps license just to fill out a cusotmised modern list form.

    Like

Leave a reply or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s