Power Apps | Galleries exercise | Create a gallery from scratch listing out skyscrapers

This exercise is provided to allow potential course delegates to choose the correct Wise Owl Microsoft training course, and may not be reproduced in whole or in part in any format without the prior written consent of Wise Owl.

You can learn how to do this exercise if you attend the course listed below!

Software ==> Power Apps  (13 exercises)
Version ==> Latest update
Topic ==> Galleries  (3 exercises)
Level ==> Average difficulty
Course ==> Power Apps
Before you can do this exercise, you'll need to download and unzip this file (if you have any problems doing this, click here for help).

You need a minimum screen resolution of about 700 pixels width to see our exercises. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Create a new canvas phone layout Power Apps app.  Save this as Skyscrapers.

Add a table to the workbook in the above folder and copy it to OneDrive or DropBox if necessary.  In your app add this as a data source.

The skyscrapers data source

You should now have a data source - the next task is to display the records from this in a gallery.

 

Now add a gallery to the default screen of your app:

Adding blank gallery

To make life a bit more interesting, choose a blank gallery.

 

Set the gallery's data source to show only films whose height is 400 metres or more:

Filter expression

Note the Value function to convert the height into a number before testing it.

 

Add a title above your gallery (and labels, text boxes and formatting to the gallery) to get something like this:

Formatted gallery

In this example the Fill property of the gallery is set to dark green, and the TemplateFill property is set to a light green.

 

Create a second screen and attach a Navigate command to the gallery's OnSelect action to show the name of the building your user clicks on in a separate screen:

Selection screen

The second screen should display details of the skyscraper chosen, and have a button allowing a user to go back and choose a different one.

 

Test that your app works (and looks nice), then close it down, saving your changes. 

You can unzip this file to see the answers to this exercise, although please remember this is for your personal use only.
This page has 0 threads Add post