In this series of blogs, we explore the key capabilities in Office 365 and SharePoint to create business solutions, with a primary focus on PowerApps.
Instead of listing the functionalities, we help you build a PowerApp.
Part three of a series.
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 two of this series. This new screen will be named ‘View’. Change the layout to match the edit screen.
For the viewscreen, 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:
The goal of the view screen will be to allow users to see all of their submitted forms, and then see the details in 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.
By default, three fields will be returned for each card, so delete the two subheading fields, leaving only the heading. As you can see below, I’ve also added an arrow next to the heading, which is for aesthetics:
Now that we have our menus, we will connect the first ‘View Form’ control to the ‘Menu Form’ data source 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 three 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.
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).
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:
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 of 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.
Your 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).
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:
When each field has been edited, your screen should look similar to the one below:
Now you can also add a ‘Back’ button the screen, a well as adding 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 four of this series, we’ll add a new screen for ‘Menu Items’ and demonstrate how we can display and filter data from SharePoint.
