One of the essentials when building Apps with PowerApps is the creation of screens to view, edit and add data. In this blog post I’d like to show you how to successfully build a form screen.

Preview

Create Data Table

In my apps I usualy use Common Data Service for Apps, Therefore, here a screenshot of my used Data Entity in CDS.

Data Entity in Common Data Service for Apps

You may of course use any data source using the standard or a custom made connector at this point – just replace as you like.

Connect PowerApps to Data Entity

Before we start building the screen, we are going to add the new data entity to the app.

Add Data Source to PowerApps

Add a gallery

To allow proper navigation among our future data sets we will add a gallery to the screen and set the item property to our data source.

Navigation Gallery for Form Screen

Add the form control

Now as we have the navigation gallery, we add the form control to the app. Indeed I never use the “Display Form”, I always use the “Edit Form” control as we can set it to all modes we like (add, edit, view). Using the edit form from the very beginning finally gives us more flexibility. After adding the form we will set the DataSource property to our data source.

Edit Form Control

Setting up the form

As mentioned above I always use the “Edit Form” control as it allows more flexibility in using it. We’ll now do the necessary setup to control the form mode. When the form is being loaded, I’d like it to be in view mode. All other modes shall be entered on push of a button.

My approach is to control the forms by using a variable which I switch among the 3 necessary vales “add”, “edit” and “view”. So let’s init the variable each time the screen is visible by setting the screen’s “On Visible” property.

Set Variable for Form Control
UpdateContext({svar_AddEditView_DeviceUserList: "view"})

Now we edit the form’s DefaultMode property and allow it to switch depending on the set variable value.

Switch(
    svar_AddEditView_DeviceUserList,
    "add",
    FormMode.New,
    "edit",
    FormMode.Edit,
    "view",
    FormMode.View
)

After having this set up we tell the form which fields to display. To achieve this, we just click the change from the “advanced view” to the “property view” and click on “Edit Fields”. Finally we select all fields we’d like to see in the form. Be aware to select all mandatory fields.

Select Fields to Display in Form

As a result we now have the form populated with fields as desired.

Form with Fields

Adding Buttons to control the form

New Button

Earlier we set the screen’s “OnVisible” property to start the form in view mode. As we’d like to use the form for all operations, we now add a button to allow new entries. Having this done, we set the button’s OnSelect property to update our earlier initiated variable.

Add Button to Add Entries
UpdateContext({svar_AddEditView_DeviceUserList: "add"})

Enter First Data

We now may play the app for the first time and push our new button to set the form to start adding new entries.

Enter First Data to Our New Form

Save Button

As we entered our first data to the form, we’d like to save it to our data source. All we need now is a “Save Button”. We add it and set the new button’s OnSelect property to submit the form AND to set the form’s mode to “view” by setting the variable again.

Add Button to Save Entries
SubmitForm(FRM_DeviceUserList);
UpdateContext({svar_AddEditView_DeviceUserList: "view"})

So let’s play the app again and hit the new “Save Button”. As a result we now see the new entry in our list and the form with no data to display.

Save Data to List

Adjust the Form

As we could not see any data in the form after submittal, we are now going to adjust the form in order to display the item, selected in the gallery. We’ll achieve this by setting up the “Item” property to [Gallery].Selected.

Setting the Forms Item Property
GAL_DeviceUserList.Selected

Test the form again

Let’s add another device to the list to test the form function. As expected, the form now displays the selected item in the gallery after submittal of the form.

Succesfully Display After Form Submittal

Add Edit Functionality

Last thing we need to add to our new PowerApp is to allow editing existing list entries. We could now just add an additional button but I like slim designs and therefore would like to reuse an existing button.

All we need to have when the form is in view mode are two buttons – “NEW” and “EDIT” – there is no need to see “SAVE” in this state. So we’ll reuse the “SAVE” in order to allow edit. Let’s start to edit the properties “OnSelect” and “Text” in order to make the button behave accordingly.

OnSelect property

Switch(
    svar_AddEditView_DeviceUserList,
    //Switch if current form mode is "view"
    "view",
    //Update the form mode to "edit"
    UpdateContext({svar_AddEditView_DeviceUserList: "edit"}),
    //If form mode is not "view", submit the form and update to view
    SubmitForm(FRM_DeviceUserList);
    UpdateContext({svar_AddEditView_DeviceUserList: "view"})
)

Text property

Switch(
    svar_AddEditView_DeviceUserList,
    //Switch if current form mode is "view"
    "view",
    //Set text to "EDIT"
    "EDIT",
    //If form mode is not "view", set text to "SAVE"
    "SAVE"
)

Result

Switching EDIT Button

Add Cancel Functionality to the Form

As we did it for the save functionality, we will reuse the “NEW” button to allow the user to cancel any changes he made to the form. Reusing the button we’ll just reset the form and switch the mode back to view.

OnSelect property

Switch(
    svar_AddEditView_DeviceUserList,
    //Switch if current form mode is "view"
    "view",
    //Update the form mode to "add"
    UpdateContext({svar_AddEditView_DeviceUserList: "add"}),
    //If form mode is not "view", reset the form and update to view
    ResetForm(FRM_DeviceUserList);
    UpdateContext({svar_AddEditView_DeviceUserList: "view"})
)

Text property

Switch(
    svar_AddEditView_DeviceUserList,
    //Switch if current form mode is "view"
    "view",
    //Set text to "ADD"
    "ADD",
    //If form mode is not "view", set text to "CANCEL"
    "CANCEL"
)
Switching CANCEL Button

Extend the gallerie’s functionality

Something is still missing. I’d like to optimize/extend the gallery now.

  1. Extend the PowerApp Gallery by a delete button
  2. Clean up the displayed information in the screen’s gallery
  3. Highlight which item is selected in the gallery

Extend the PowerApp Gallery by a delete button

First start editing the galleries details, make sure to hit the pencil, shown in the gallery.

Edit Button in PowerApps Gallery

Now add a trashbin icon to the gallery and set the OnSelect property. The required function is the remove function. Within a gallery you use it as Remove([Your Data Source], ThisItem).

Add Trashbin to Gallery and set OnSelect Property
Remove(MWO_DeviceLists, ThisItem)

Clean up the displayed information in the screen’s gallery

You may do this as desired. I’ll change the displayed information to device name and user name by setting the Text property of each label to ThisItem.[My Field]

Set Text Property of Labels

Highlight which item is selected in the gallery

To highlight an item in a gallery is an easy but very usefull job to do. There are several ways to achieve this. I’ll show you how to add a rectangle on the very left of the gallery items to mark the selected item.

You may now want to edit the gallery again (pencil) and add a rectangle. Resize it and put it to the very left of the gallery template. Finally edit the Visible property of the rectangle.

Highlight Selected Item in PowerApps Gallery
If(
    ThisItem.IsSelected,
    true,
    false
)

Seems we are done right now 🙂 Feel free to get in touch if you have problems.

If you are now looking for how to filter the items in the gallery, just check out my next blog post “Filter Galleries in PowerApps”