Power Apps | Components exercise | Add a component to show a footer, and give it a text property

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 ==> Components  (1 exercise)
Level ==>
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.

Open the app in the above folder (it may look familiar from earlier in the course).  The aim of this exercise is to create a common footer for every page:

Creating a footer

The footer will display the image in the above folder, some text and the screen number.

 

Start by creating a component (called footer, say):

New component

Shrink the component down to 580 x 230 pixels, or whatever size works on your screen.  For the moment the screen number will be hard-coded, and will never change.

 

Add this component to the bottom of both your pages:

The component on screen 2

The component as it should appear on the second screen, for example.

 

Now add an input custom property called ScreenNumber to your component to hold the screen number, and change the screen number label's text to read this:

Screen text

The number will change for each screen.

Set the value of this custom property to be 1 for the first screen's component and 2 for the second screen's version.  You should now see this for the second screen, for example:

The screen number

The screen number is now correctly showing as 2.

 

Save and leave your app!

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