Hi and welcome at this weeks blog about the back and forth app we’re creating. In the last blog we created a gallery we can filter, but in the first blog we’ve seen that there is more information in the items than we’re showing in the gallery. So what we can do is creating more labels in the gallery, but what if there is to much info to show in a gallery? Or to create or edit a item? That’s were a form comes in. But first we have some preparations to do.

First we add a new screen to our app. (New screen -> Blank).

Then, you can add a form using Insert -> Form -> Edit form. There is also an option called Display Form. However, I want to be able to make adjustments to the data in future blogs so we use the edit form. After you added this form you can link it with a database. In this example, the SharePoint list we use throughout this blog series.

We don’t need the fields ‘Title’ and ‘Attachments’ for this series, so we remove them by selecting them and pressing delete. In addition, you can set the columns to ‘1’ and the layout ‘Horizontal’. After they’re deleted you get the following lay-out:

Rename the screen where the form is located to “scrn_Item” and name the Form “frm_SelectedItem”.

Now that we created the screen and the form, we need some way to navigate to it from the gallery. Go to the gallery and add a button in the templates (a template is one line off the gallery). In that button’s OnSelect property we’re going to use the following formula:

Navigate: Navigates to the screen defined in the first parameter in this case it’s the scr_Item. The second parameter can be used to define the way off transition, this is a design thing so for now I leave it on none but feel free to play around. The third parameter can be used to transfer any context variables to the next screen. We want to transfer the data of the item we selected in the gallery so that’s the data we want to transfer to the next screen.

After you put in the formula and click the button to see some magic happening.

We can now navigate to the screen with our form. Unfortunately, this form is still empty and that is not the intention. In order to populate this form with the element we selected, we need to configure the item property of the form with the context we send over from the last screen. We do this with the following formula:

Lookup: Returns the first record from the collection in the first parameter that satisfies the conditions of the second parameter. In the third parameter it is possible to specify which property should be returned.

Note: if you want to see the properties within a variable, just select it and PowerApps will show you in a dropdown.

But what if we want to go to the previous screen to select another item from our list. That’s where the Back() functionality comes into play. Add an icon (inser – > icons – > choose the “Back” icon, but feel free to be creative.) and set the OnSelect property of that icon. This way you can always go back.

Back: Navigates to the previous screen.

And another functionality added and one step closer to the back and forth app. Next blog we’re going to focus on adding, editing and saving new records to our database through the app. I hope you enjoyed it and feel free to leave any questions and comments. See you next blog.

Part 4 – Add, Edit and Submit a form –>

<– Part 2 – Sort and filter a gallery
<– Introduction – Index