Lab - Create a canvas app with unique controls

  • 10 minutes

Important

For this lab, don't sign in with your credentials. Use the following steps to sign in to your lab environment with the correct credentials:

  1. Select Sign in to launch VM mode in this unit.
  2. A PowerShell window and a Windows Command Prompt window appear. After two to three minutes, they close, and Power Apps opens automatically. Wait for the Power Apps home screen.

To see the lab instructions, select the Instructions tab on the lab sidebar.

In this exercise, you use multiple controls mentioned in the previous units to create a canvas app that changes as you interact with the controls. This gives you an idea of the capabilities of controls and how you can fit them to your needs.

Note

Power Apps requires either an Office 365 license, a free trial or a free developer account.

  1. If you still have the app with the City Populations that we created in Unit 3 of this learning module, you can skip to step 9. Else, sign in to Power Apps.

  2. On the Home screen, select Create > Blank app and then select Create under Blank canvas app in the popup.

  3. Name your app New Controls App and select Create.

  4. Skip the welcome message. Then select the Insert button and select a Button control. Set its OnSelect property to this formula:

    ClearCollect(CityPopulations, {City:"London",
Country:"United Kingdom", Population:8615000}, {City:"Berlin",
Country:"Germany", Population:3562000}, {City:"Madrid",
Country:"Spain", Population:3165000}, {City:"Rome",
Country:"Italy", Population:2874000}, {City:"Paris",
Country:"France", Population:2273000}, {City:"Hamburg",
Country:"Germany", Population:1760000}, {City:"Barcelona",
Country:"Spain", Population:1602000}, {City:"Munich",
Country:"Germany", Population:1494000}, {City:"Milan",
Country:"Italy", Population:1344000})

  5. Press and hold Alt Key, and select the Button control. (This creates your collection and stores all the information.)

  6. Select the Insert button, choose a Vertical gallery, and select CityPopulations from the Select a data source pop-up.

    Screenshot of the inserted gallery, highlights on the Insert button and CityPopulations.

  7. With the gallery selected, in the Properties panel on the right, change the Layout from Image, title, and subtitle to Title, subtitle, and body.

  8. Select the last or third Label in the first item of the gallery, and change the Text property to ThisItem.Population.

    Screenshot of Gallery menu items for the text property.

  9. Select Screen1 in the tree view (so that you don't insert into the gallery). Then select the Insert button and find/select a Slider control.

  10. Change the Max property of the slider to 10000000.

  11. Insert a Text label and change the Text property to Slider1.Value.

  12. Select the first item in the gallery and select Insert. Then find and select a Check icon. Position it on the right side of the gallery.

    Note

    You should see check marks appear in each row of the gallery. A gallery repeats the format for all items the same as the first item. If you don't see multiple check marks, make sure you have selected the first item in the gallery and insert a Check icon again.

  13. Change the Visible property of the check icon to:

    ThisItem.Population > Slider1.Value

    Screenshot of app screen with example data.

Place the app in Preview mode and try adjusting the slider. As you adjust the slider, you should see check marks appear and disappear per item in the gallery since you set the visibility to change depending on the slider control. Essentially, you created a gallery that indicates whether a city's population exceeds the slider value or not.