Bellows College Visitor Lab – Part 2
Building a Canvas App
Scenario
Bellows College is an educational organization with multiple buildings on campus.
Campus visits are currently recorded in paper journals. The information is not captured
consistently, and there are no means to collect and analyze data about the visits across
the entire campus.
Campus administration would like to modernize their visitor registration system where
access to the buildings is controlled by security personnel and all visits are required to be
pre-registered and recorded by their hosts.
Throughout this course, you will build applications and perform automation to enable
the Bellows College administration and security personnel to manage and control access
to the buildings on campus.
High-level lab steps
We will follow the below outline to design the canvas app:
•
•
•
•
Create a canvas app from data in the Visit table
Configure how the visits are shown on the browse screen
Make some basic changes to the app
Test the app functionality
Prerequisites
•
We will be using the Visit table that we created in Lab 1 for this exercise!
Exercise 1: Create Visits Canvas app
Objective: In this exercise, you will create a canvas app by connecting your Visit table
you created earlier.
Task #1: Create the Visits app
1. Navigate to https://make.powerapps.com. You may need to reauthenticate - click
Sign in and follow instructions if needed.
2. Select YOUR ENVIRONMENT at the top right if it is not already selected.
1
Bellows College Visitor Lab – Part 2
Building a Canvas App
3. If necessary, click the Home icon on the left side of the screen.
4. Under Other ways to create an app, select Start with data
5. You will create your app based on the data in the Visit table you created earlier.
Therefore, click Select existing tables.
6. Locate and select the Visit table you created in the previous lab. (You can search
for it or use the filter to only show Custom tables to help you find it.) Then, click
Create app.
7. After your app is created, On the Welcome to Power Apps Studio screen, check the
Don’t show me this again box, and then select Skip.
8. After creation has completed, your screen should look like the image below.
2
Bellows College Visitor Lab – Part 2
Building a Canvas App
9. In the app designer, select Play on the command bar to preview the app. (You
can also preview the app by pressing F5 on your keyboard.)
10. Look around and see how your app looks by default. You can see how it will look
on different screens using the form factor buttons.
11. Close the app preview by selecting the X in the upper right of the screen.
Congratulations, you have successfully created a Power App from an existing table.
•
•
The next step in the process is to tailor the app to match your college’s branding.
The next series of steps will walk you through providing some extra customization
to the app.
Task #2: Modify and theme the newly created app
In this task, you will customize the header text and change the app theme.
1. In the left navigation pane, you should see the Tree view of your app. Click the
ellipses (the three dots) to the right of Visits screen and select Expand all so
that you see all the components that are on that screen.
3
Bellows College Visitor Lab – Part 2
Building a Canvas App
2. In the center canvas, select the Visits label on the screen. On the left-side tree
view navigation pane, make sure TableNameLabel1 is highlighted (indicating it is
selected). Changes you make will be applied to this label (until another is
selected).
3. On the right side of the screen, under the Properties tab, click the Text property.
4. In the properties bar at the top of the screen, you should see the formula which is
generating the text of the label: DataSourceInfo([@Visits], DataSourceInfo.DisplayName)
5. Delete the code and replace it with the words with the quotation marks “Bellows
College Visits” so that those exact words will display in the label instead.
6. In the properties, change the Font size to 24.
7. Using the Tree view in the left-hand navigation, select the Visits screen so that
you can edit its properties.
8. On the command toolbar, select the Theme button and from the list that appears
select the Red theme color.
9. Select the dropdown arrow next to the Save button, select Save as and update
the name of your app to Visits App.
4
Bellows College Visitor Lab – Part 2
Building a Canvas App
Task #3: Test your Visits app
In this task, you will test your new app.
1. Using the navigation on the left, select Visits screen.
2. In the app designer, select the Play icon to preview the app. (You can also preview
the app by pressing F5 on your keyboard.)
3. Once the app opens, in the Search Items field, enter the text Juan (Notice how
the items in the gallery filter based on what is typed in the search field).
4. Once the record for Juan Valdes is displayed, click on it to open the details for
that visit.
5. To edit the record, select the Pencil Icon in the upper right corner of the app.
6. You can edit the Visit Name here and click the Checkmark icon in the top right to
save the change.
7. On the top right of the screen, click the X Icon to return to the canvas app editor.
Congratulations! You have created and configured your first canvas app.
When you have finished, share the app with your instructor:
8. Click the Share button.
9. Search for and Select your instructor using their email address. (If you aren’t
positive of your instructor’s name, raise your hand and ask them! If you don’t
share it with the right person, your instructor won’t be able to see it and give you
a grade for the lab.)
10. Use the dropdown next to the instructor’s name to select Co-Owner as their role.
This will allow them to see your work, not only use the app.
11. Click Share.
12. Click on the Share button in the menu bar again. This time, click on Manage
Access. Check to make sure your instructor is listed and is a Co-Owner.
5
Bellows College Visitor Lab – Part 2
Building a Canvas App
You are now finished, but you need to submit to MyCourses so that you will receive a
grade.
1) Take a screenshot of your screen making sure that the name of your
environment is visible.
2) Go to the Lab 2 submission dropbox on MyCourses and paste your screenshot
into the textbox and submit.
6