Customising SharePoint list forms with PowerApps – part one

This series of articles will show you how to customise a SharePoint list form using PowerApps:

  • part one – customise a list form, create new, edit and view forms, and wire up the buttons (read below)
  • part two – create cascading drop-downs (read now)
  • part three – create tabs so long forms can be broken into sections (read now).

Part 1 – Separate new, edit and view forms

I have started with a very basic list of only three columns. Creating a custom SharePoint list form is simply a matter of clicking the ‘Customize forms’ drop down.

Screenshot of Sharepoint ribbon with PowerApps drop down menu - 'Customise foms'

This does a good job of creating a single form which works for view, edit and new but as we go deeper into this blog series, we will need specific forms and different behaviours on each form.

When PowerApps opens, click on the screen and ‘Duplicate screen’. Repeat this again to create the third screen. Using the ‘Duplicate screen’ keeps all the datasource references to your list in place.

Screenshot of PowerApps menu -'FormScreen1 to Duplicate screen' options

Screenshot of PowerApps - Duplicate Screen names

Before going any further, rename your screens and forms. The actual names are up to you, the following makes sense to me.

Screenshot of PowerApps with Duplicate Screens menu renamed

So far this is all obvious, what took me a little while to work out, was how to wire up these screens to the out-of-the-box buttons in the ‘ribbon’ and the ‘fly-outs’.

Screenshot of SharePoint 'Ribbon and Fly out' menu options

This is where the ‘SharePointIntegration’ section does the magic, or at least the magic becomes more obvious when you click on ‘Advanced’, then ‘More Options’.

Screenshot of PowerApps 'SharePointIntegration'

Add the following into the relevant sections. (Note : ‘SharePointFormMode’ and function names are SharePoint names and do not relate to your form or screen names.)

OnNew – Set(SharePointFormMode, “CreateForm”); NewForm(FormNew); Navigate(ScreenNew,ScreenTransition.Fade)
OnEdit – Set(SharePointFormMode, “EditForm”); EditForm(FormEdit); Navigate(ScreenEdit, ScreenTransition.Fade)
OnView – Set(SharePointFormMode, “ShowForm”); ViewForm(FormView); Navigate(ScreenView, ScreenTransition.Fade)

To make debugging this easier I often move the form down 50 pixels and add a label at the top of each form. When flicking from screen to screen it is then obvious which screen you are on.

Screenshot of PowerApps 'SharePointIntegration'advanced options

Lastly, we update the ‘OnSave’ action so we submit the correct form and then the ‘OnCancel’ action so we reset (clear) the correct form.

OnSave – If(SharePointFormMode=”CreateForm”, SubmitForm(FormNew), If(SharePointFormMode=”EditForm”, SubmitForm(FormEdit)))
OnCancel – If(SharePointFormMode=”CreateForm”, ResetForm(FormNew), If(SharePointFormMode=”EditForm”, ResetForm(FormEdit)))

My finished SharePointIntegration looks like this :

screenshot of PowerApps completed 'SharePointIntegration'

Again, nothing particularly novel here, but this ‘SharePointIntegration’ section for each screen becomes increasingly useful as we move through this series.

Into these ‘actions’ for each screen, we can set variables, create collections and even patch to child lists on save.

Last Tip: PowerApps tend to cache hard. Before assuming you have made a mistake, get into the habit of doing a shift/refresh of your browser at least twice after each publish. You may be viewing an older cached version of your app.

Our friendly Brisbane team are here to help answer any more SharePoint or Microsoft PowerApps queries you may have.