PowerApps 101: Create your own forms

Quite often you want to customise the out-of-the-box forms that PowerApps provides, for example to:

  • Collect user input over more than one screen
  • Implement cascading dropdowns or combo boxes
  • Include business logic in the forms
  • Combine user input with other data

In my experience it is often easier to create your own form(s) from scratch and then adding the bells and whistles, rather than customising the out-of-the-box forms.

I will demonstrate this by building a one screen app based on a simple table, let’s call it MyTable  that has three columns:

  • An auto-generated ID column of any type (typically integer or text)
  • A text column called Title
  • A numeric (integer, decimal or float) column called MyAmount

This table could be stored anywhere, but for example SharePoint or Azure SQL Database or even CDS.  Create such a table and populate it with 3-4 records so that there is some data to start with.

Here are the steps that we will now take to build the app in PowerApps Studio or in the web editor:

  1. Create a blank app (not an app from data, please)
  2. Add MyTable as a data source
  3. OnScreen1, create a vertical blank gallery on the left hand side, Gallery1, and set its Items property to
     MyTable
  4. Set Gallery1’s OnSelect property to
    Set(SelectedId, ThisItem.ID)
  5. Also set Gallery1’s TemplateFill property to
    If(ThisItem.ID = SelectedId , LightBlue, RGBA(0, 0, 0, 0))
  6. Add three labels to the template of Gallery1 and set their Text property to
     ThisItem.ID
    ThisItem.Title
    ThisItem.MyAmount

    You should now see the sample data displayed in your gallery, and whichever record is selected should be in a light blue background.  Here is what my app looked like at this stage with the sample data

  7. Now on the right side of the screen place these five icons at the top
    These are the icons that we will control submission of data with these actions

    1. New
    2. Delete
    3. Edit
    4. Save
    5. Cancel
  8. Set the OnSelect property for the New icon to
    UpdateContext({Editing: true, NewRecord:true})
  9. Set the OnSelect property for the Delete icon to
    Remove(MyTable, {ID: SelectedId});
    Set(SelectedId, First(Gallery1.AllItems).ID)
  10. Set the OnSelect property for the Edit icon to
    UpdateContext({Editing: true})
  11. Set the OnSelect property for the Cancel icon to
    UpdateContext({NewRecord:false, Editing:false})
  12. Set Gallery1’s as well as the New icon’s DisplayMode property to this, please note the ! before Editing
    If(!Editing, DisplayMode.Edit, DisplayMode.Disabled)
  13. Set the Delete and Edit icons’ DisplayMode property to this, please note the ! before Editing
    If(!Editing && SelectedId in Gallery1.AllItems.ID,
    DisplayMode.Edit, DisplayMode.Disabled)
  14. Set the Save and Cancel icons’ DisplayMode property to this, please note that there is no ! before Editing
    If(Editing, DisplayMode.Edit, DisplayMode.Disabled)

    We will return to the Save icons’ OnSelect property at the end

  15. Insert a label and two text inputs below the icons and rename them to Label_ID, TextInputTitle and TextInputMyAmount respectively.  The app should now look something like this:
  16. Set Label_ID’s Text property to
    "ID: "&If(NewRecord, "(new)", SelectedId in Gallery1.AllItems.ID, SelectedId, "(none)")
  17. Set TextInputTitle’s Default property to
     If(NewRecord, "", LookUp(Gallery1.AllItems, ID=SelectedId, Title))
  18. Set TextInputMyAmount’s Default property to
     If(NewRecord, "", LookUp(Gallery1.AllItems, ID=SelectedId, MyAmount))
  19. Set both text inputs’ DisplayMode property to
     If(Editing, DisplayMode.Edit, DisplayMode.View)
  20. Set TextInputMyAmount’s Format property to
     TextFormat.Number
  21. Set the Save icon’s OnSelect property to
    Set(
        SelectedId, 
        Patch(
          MyTable,
          {ID: If(
            NewRecord,
            Blank(),
            SelectedId)},
          {Title: TextInputTitle.Text,
          MyAmount: Value(TextInputMyAmount.Text)}).ID);
    UpdateContext({Editing:false, NewRecord:false})

The basic form is now ready to run.

This app was just an example, but the form is so flexible that business logic and other customisations can be easily added.  For example the save icon could be disabled in case the data in the text inputs does not correspond to the requirements.  Or the user could be redirected to a screen with an appropriate message.

The gallery and the screen in the above example can also be split into separate screens, since the SelectedId is stored in a global variable.  Thanks to Josh for inspiring this improvement. All you need to do is to set the OnSelect property of Gallery1 to this

Set(SelectedId, ThisItem.ID);
Navigate(Screen2, ScreenTransition.None)

The bells and whistles can now be added!

8 Replies to “PowerApps 101: Create your own forms”

  1. Thank you for sharing this link. Good lesson for me. Question for you: Does it matter if I use sharepoint or onedrive? The form I initially built used excel in Onedrive. I would rather use sharepoint but I didn’t know if I would be limited in terms of the formulas I could use.

    1. If you meant Excel on SharePoint, then I am not sure. However, if you meant storing your data in SharePoint lists, then that is a much better approach. Please see my post in where to store data.

  2. First, this was/is a great tutorial. My questions are:

    1. Can you provide an example of going from a gallery on Screen1 to the form on Screen2?
    – I am having trouble saving new and updating using SelectedId with this scenario, and it doesn’t like “UpdateContext({Gallery1.Selected.ID: Patch(…”

    2. Can you provide an example to get the next ID in the SP list to be used in naming convention on save?
    – I was using ClearCollect() to get the ID on save, but I am trying to implement your structure and ClearCollect(UpdateContext()) nor UpdateContext(ClearCollect()) work.

    Thank you for your continued support. Great article, really! I have shared it with several colleagues.

    1. Josh, thank you for your questions.
      1) I have edited the post to use a global variable (which works throughout the app) instead of a context variable (which works only on one screen) so that now you can split the gallery and the form on different screens
      2) The ‘next ID’ of the SP list is generated automatically by SharePoint when you create a new record. After the save, the ‘next ID’ will be the value of SelectedId that can be used anywhere else in your app

  3. Giacomo, thank you for this post on how to create our own forms, it’s detailed and very well explained !

  4. Hi Giacomo
    I had some issues with my Powerapp and Giacomo has helped me to get rid of them very quickly.If you need some help he will be glad to help.
    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *