Office 365 PowerApps Deep(ish) Dive – Part 3

In our PowerApp, we can now Add new menus, so now let’s add the ability for the user to be able to View them as well!

So, the first step will be to add a new screen as we did in Part 2 of this series.  This new screen will be named ‘View’.  Change the layout to match the Edit screen.

For the View screen, we will be adding three controls:  A Vertical Gallery, and 2 ‘View Form’ controls.  Add them to the screen, and then arrange them so the Gallery is on the left, and the View Form controls are on the right:

padd3-1

The goal of the View screen will be to allow users to see all of their submitted forms, and then see the details fo the form when they click on the name.  In order to accomplish this goal, we will first pull all of the current user’s submitted menus into the Vertical Gallery Control.

Click on the Gallery control, and then find the Items in the formula drop down.  Change the Formula to:  Filter(‘Menu Form’, User().FullName in Author.DisplayName)

This Formula will filter all of the Results from the Menu Form list based upon the current user’s Full Name, and the Author’s display name in SharePoint.

padd3-2

By Default, 3 field will be returned for each card, so delete the 2 sub heading fields, leaving only the Heading.  As you can see below, I’ve also added an arrow next to the Heading, which for the aesthetic:

padd3-3

Now that we have our menus, we will connect the First ‘View Form’ Control to the ‘Menu Form’ Datasource by changing the Items in the formula bar to Gallery1_1.Selected (Note:  this should correspond to whatever you named your Gallery control to be.)  Also, we will click the eye next to ‘Author’, ‘Created’ and ‘Form Status’ to show those 3 fields in this view.  When that is completed, you will notice that ‘Author’ and ‘Forms Status’ are not showing the normal values you would expect to see, but they are showing Microsoft.Azure Connector values.

padd3-4

In order to change this, we just need to change the Value displayed for each of these fields.  Right click next to Author, and change its value from odata.type to DisplayName.  You will now see the name of the person who created the Menu.  (Note:  Certain fields may have multiple value types that you can display, i.e email address).

padd3-5

Also, Change the Value from odata.type to Form Status to ‘Value’.  You should now see the proper displays from both fields.  Also, you will notice that when you click the name of a Menu in the Gallery, the values change for the View Control:

padd3-6

Now, we need to connect the final View Control.  Change the Items Drop down in the formula bar to Gallery1_1.Selected, and then click on the eye for fields 1-10.  The goal for this view will be to show all of the Menu items that were submitted, as well as a picture of the item.  Add an Image to the right hand side of each card after the fields have been added.  You view should show all of the filed names, as well as the ID numbers of all the submitted items.  Time to clean this up a bit.  First, change all of the labels to correspond to the menu (i.e. Appetizer Choice 1, etc).

padd3-7

Next you will need to unlock and edit the advanced properties of each field.  We will want to perform a lookup to the Menu Item list for each ID number, and then return the Title of the item.  We will also want each image control to display the image of each Menu Item.  Edit the advanced properties of each one as shown below:

padd3-8

When each field has been edited, your screen should look similar to the one below:

padd3-9

Now you can also Add a ‘Back’ button the screen, a well as add a new Button on the home screen so that users can Navigate to the view screen.  Users now have a way to view the status and details of their menus!

In Part 4 of this series we’ll add a new screen for ‘Menu Items’ and demonstrate how we can display and filter data from SharePoint.

If you’re interested in learning more about PowerApps, SharePoint Online, or Office 365, please feel free to reach out to me at joseph.karnes@centricconsulting.com

2 replies »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: