Exercise - Create a canvas app

Completed

Learning objective

In this exercise, learners use Copilot to create a canvas application that employees can use to request maintenance issues. You use copilot to build the data model and initial application layout.

Upon successful completion of this lab, you:

• Use Copilot to aid you in creating a data model to support your app.
• Modify a canvas application.

Scenario

Contoso College is looking for an application that employees can use to report maintenance issues throughout campus. Contoso wants to build canvas application that employees can access from their phones as needed.

Upon successful completion of this lab, you:

• Use Copilot to aid you in creating a data model to support your app.
• Modify a canvas application.

Task 1: Build data model and create app

1. Open a web browser and navigate to the Power Apps maker portal.

2. Using the navigation on the left, select Create.

3. Under Create your apps, choose Start with Copilot.

4. In the Describe the tables that you want copilot to build screen, type: "Create a single table for submitting maintenance issues."

5. Select the Table options button. From the menu that appears, select One Table.

   

6. Select the Generate button.

Copilot created a Maintenance Issue table. Next, we add more columns to the table.

7. In the Copilot pane, enter: "Add a choice column called Issue Type."

8. In the Copilot pane, individually add the following prompts.

   1. "Add a text column named Location."
   2. "Add a text column named Contact Number"
   3. "Add a choice column named Priority level."
   4. "Add a text column named Access Instructions."
   5. "Add a text column named Resolution Notes."

Next we're going to remove any unnecessary columns, as they'll be replaced with Lookup Columns.

9. If they exist in your table enter the following commands to remove them.

   1. "Remove the Reported By column."
   2. "Remove the Assigned To / Technician column."

Your Maintenance Issue table should resemble the image shown:

Next, we're going to add the user table to the data model so we can associate Maintenance Issue requests with specific users.

10. On the Command bar, select + Existing table.

11. Switch from Recommended to All Tables.

12. In the Search field, enter User.

13. Select the User table and select the Add Selected button.

14. On the Command bar, select Create relationships.

15. Configure the relationship as follows:

    • One: User
    • Many: Maintenance Issue
    • Display Name: Requesting Employee

16. Select Done.

17. On the Command bar, select Create relationships.

18. Configure the relationship as follows:

    • One: User
    • Many: Maintenance Issue
    • Display Name: Assigned to

19. Select Done.

Your completed data model should resemble the image shown:

20. Select the Save and open app button.

Note

It can take several minutes for your new app to be created.

Task 2: Personalize your new app

Now that your new app is created, we make some modifications to it to best fit our needs. We start by making some modifications to the Welcome screen.

1. With your new app open, select the Image placeholder above the Maintenance Issues text.
2. From the menu that appears, select Edit > Stock Images
3. In the Search field, enter Medical, select the image of the Computer Keyboard and stethoscope, and choose Insert.
4. Next, select the Image placeholder above Users.
5. In the Search field, enter People, select the image you want to use, and choose Insert.
6. From the menu that appears, select Edit > Stock Images.

Next, we're going to adjust the size of the images to make them easier for users to read. Additionally, we're going to adjust the text that is displayed for each item.

7. On the Command bar, select the Properties button. (Located just to the right of the Editing button.)

8. Select the image above Maintenance Issues.

9. In the Properties panel, configure the image as follows:

   • Image Position: Fill
   • Width: 350
   • Height: 350

10. Repeat the earlier step to set the Height and Width of the Users image to 350 x 350.

11. Select the text below Maintenance Issues.

12. In the Properties panel, select the Text field, and change the text to: "Submit Maintenance Issue."

13. Select the Welcome Screen text in the Header.

14. In the Properties pane, set Show Logo to Off.

15. Set Profile Picture to Off.

16. In the Properties pane under the Style and theme group, select the Fill color icon.

17. Change the color to Black.

18. Make sure that you still have the Header selected, and change the Title, to Contoso Issue Reporting.

Your app resembles the image shown.

Task 3: Add a new screen to your app

We decide that, in addition to submitting Maintenance Issues, it makes sense for users to add assets.

1. With your app still open, If necessary, expand the Copilot pane. In Copilot enter the following text: "Add a new screen called Assets." Select Send.

2. Select the Keep it button to accept the screen.

3. A new screen called Assets is added to your app.

4. On the screen, select With Data.

5. In the Select Data Source screen, select Create new tables.

6. In Copilot, enter the following text: "Create a new table called Assets. It should include the following columns. Asset Name, Asset ID, Asset Type, Asset Location, Data Installed, and Department."

7. If another table (Department) was added, Use copilot to Delete it by entering: "Remove Department Table."

8. After your table is created, select Save and exit.

9. Back in your App, select With Data again.

10. A new Asset screen is added to your app.

11. If necessary, on the Command bar, select the Properties button. (Next to the Editing button.)

12. Next, select in the list of Assets. A Pencil icon should appear, select the Pencil icon.

13. Select the Insert button and choose Text Label.

14. Position the Text Label, of it's located by the Asset Location.

    

15. With the Text Label selected, in the formula bar enter the following text: ThisItem.’Asset Type’

    

16. Select in the background of the Form.

17. Set the Columns property to 1.

18. Your completed screen should resemble the image shown.

    

Task 4: Update the Welcome screen

Upon review, we decide that the ability to create users in this app is unnecessary, so we change the Welcome Screen to allow access to Assets.

1. Using Tree view, select the Welcome Screen.
2. Select the Image above Users / Contacts.
3. From the menu that appears, select Edit, and choose Stock Images.
4. In the Search field, enter Equipment, and select an image to use.
5. Set the OnSelect property of the image to: Navigate('Assets')

6. Select the Users/Contacts text and set the Text property to Assets.
7. Select the Text below Equipment and change the Text property to: "View and Create asset records."

Task 5: Test your application

Next, Lets test your app to ensure that it's functioning correctly.

1. On the Command bar, select the Play button.
2. Select the Assets image.
3. In the Search field, enter Office. (Notice how the list filters)
4. Select the Office Chair record.
5. Select the Edit (Pencil) button. Change the Category to Furniture.
6. Change the Asset Type to Equipment.
7. Select the Save button (Checkmark)
8. Select the Save button.
9. Notice how the Asset Type of the Desk changes to Equipment.
10. Select the Home button.
11. Select the Purple X to leave Preview mode.

Task 6: Save and publish the app

Goal: Save and publish the app to make it accessible across web browsers, mobile devices, or embedded platforms like SharePoint or Teams.

1. In Power Apps Studio, select the Save button.
2. In the Save as screen, set the Name to Contoso Issue Reporting, select Save.
3. Select the Publish button.