Customising SharePoint list forms with PowerApps – part one
Microsoft 365 Power Apps SharePointThis 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.
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.
Before going any further, rename your screens and forms. The actual names are up to you, the following makes sense to me.
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’.
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’.
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.
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 :
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.
