NOTE

Effective November 2020:

• Common Data Service has been renamed to Microsoft Dataverse. Learn more
• Some terminology in Microsoft Dataverse has been updated. For example, entity is now table and field is now column. Learn more

Lab 03.2: Canvas app

In this module you will design and build a canvas app for the company employees to submit problem reports.

What you will learn

• Import and use a pre-built component library
• Create a Power Apps canvas app
• Connect to a data source
• Filter data
• Create data rows
• Use images with data rows
• Embed canvas Power App into Microsoft Teams

High-level lab steps

• Import company components
• Create app and layout main screen (including list of my items)
• Submit New Report
• Test
• Embed canvas app in Microsoft Teams

Prerequisites

• Must have completed Lab 02.1: Data model and model-driven app

Detailed steps

### Exercise 1: Create canvas application

In this exercise, you will import a solution with shared components, create a view for the Problem Report table and create a canvas application.

Task 1: Import component library solution

In this task, you will import the shared components solution into your environment. This shared component library was built by another team at your company.

1. Navigate to the Power Apps maker portal page and make sure you are in the correct environment.

2. Select Solutions and click Import.

1. Click Browse.

2. Go to the course resources folder, select the Shared components solution, and click Open.

3. Click Next.

4. Click Import and wait for the import to complete.

5. Click Publish All Customizations and wait for the publishing to complete.

6. You should now see the Shared Components solution you imported. Click to open the Shared Components solution.

7. The solution should have one item in it. (Lamna Healthcare Shared Components)

IMPORTANT

There is an issue where importing the app as part of a solution may not add it to your components library. The following steps are designed to resolve the issue.

1. Navigate to Apps, Select the Lamna Healthcare Shared Components App.
2. Click the Edit Icon to edit the app.

1. Select your Region/Country and click Get started if prompted.

NOTE

When the app is open in Edit mode, move on to next step, as the Preloader component shows a Loading icon but it is not actually waiting for something to load.

1. After the app opens, click File > Save As.
2. Change app name to Lamna Healthcare Share Components A and click Save.

1. Click OK when prompted to save as a new library.
2. Close the Lamna Healthcare Shared Components tab in your browser.

Task 2: Create view

In this task, you will create a view that will show the current user’s problem reports. Later you will use this view with the filter function in the canvas app.

1. Navigate to the Power Apps maker portal page and make sure you are in the correct environment.

2. Select Solutions and click to open the Company 311 solution.

3. Locate and click to open the Problem Report table.

4. Select Views in the treeview navigation and click to open the Active Problem Reports view.

1. Click Edit filters.

1. Change the filter to Created By Equals current user and click OK.

1. Click on the chevron button next to the Save button and select Save As.

1. Enter My Reports for Name and click Save.

2. Click Publish and wait for the publishing to complete.

3. Click on the <- Back button on the command bar to go back to the Problem Report table details.

Task 3: Create the user application

In this task, you will create a canvas application using the phone form factor.

1. Navigate to the Power Apps maker portal page and make sure you are in the correct environment.

2. Select Solutions and click to open the Company 311 solution.

3. Click **+ New

   App

   Canvas app**.

1. Enter Company 311 Phone App, select Phone for format, and click Create.

2. Select Skip.

3. Go to the Tree view and double click Screen1.

1. Rename the screen Main Screen. It’s always a good idea to give your screens a meaningful name.

1. Select the Main Screen and select on the + Insert from the left navigation pane .

1. Select Get more Components.

1. Expand the Lamna Healthcare Shared Components A Library, select Header and Tab Control, and then click Import.

1. Expand Library components, select Header Control and Tab Control. These are both components from the library you imported earlier in the lab.

1. Move the Tab Control to the bottom of the screen and the Header Control to the top of the screens.

2. Select the Header Control and change the Text value to “Company 311”.

1. Set the Height of the Header Control to 75.

   

2. Right click on the Main Screen and select Duplicate screen.

1. Rename the new screen New Reports Screen.

2. Select the Tree view, select App and change the OnStart value to the formula below. This formula will create a new variable named My Tabs and set it to a table of tab items.

Set('My Tabs', Table( {
	Label: "My Reports",
	Screen: 'Main Screen',
	Icon: "",
	SelectedIcon:""
},
{
	Label: "New Report",
	Screen: 'New Reports Screen',
	Icon: "",
	SelectedIcon:""
}
))

IMPORTANT

When expressions are copied, the quotes and double quotes are sometimes replaced with their “smart” counterparts which are not valid in formulas. If you copy and paste the expression above, make sure the resulting formula does not contain any errors.

1. Select the Tab Control in the Main Screen and change the Items value to ‘My Tabs’.

1. Change the SelectedColor value to WhiteSmoke.

2. Select the Tab Control inside the New Report Screen and set the Item value to ‘My Tabs’.

3. Change the SelectedColor value to WhiteSmoke.

4. Click on the … button of the App and select Run OnStart.

1. Your tabs should now show the two tabs you added.

1. Click File and then click Save.

2. Click on the <- Back button.

3. Do not navigate away from this page.

Exercise 2: My reports

In this exercise, you will add a gallery that will show reports created by the current logged in user.

Task 1: Add gallery

1. Select the Main Screen, select Insert menu, then select Vertical gallery.

1. Rename the new gallery My Reports Gallery.

2. Resize and reposition My Reports Gallery and make sure the screen looks like the image below.

1. Select My Reports Gallery, go to the Properties pane, and select Problem Reports for Data Source. If you do not see Problem Reports, click See all tables or Search for the table.

1. Select the My Reports view you created for View.

2. Click Edit fields.

1. Change Subtitle1 to statuscode. This is the Status Reason column.

1. Select Image control within the gallery. Set Image value to the formula below. This allows images to be displayed correctly when view is used as a source.

LookUp('Problem Reports', 'Problem Report' = ThisItem.'Problem Report').Photo

1. Click Save icon.
2. Do not navigate away from this page.

Exercise 3: Allow removing reports

In this exercise, you will allow unassigned reports to be removed. This will allow users to easily remove any reports that were accidentally created.

Task 1: Allow remove

1. Expand the My Reports Gallery.

2. Select the Icon inside the My Reports Gallery.

1. Change the Icon value to Icon.Trash.

1. Change the Visible value to the formula below. This formula will hide the icon if the status reason is not New.

If(ThisItem.'Status Reason' = 'Status Reason (Problem Reports)'.New, true, false)

1. Make sure you still have the icon selected. Change the OnSelect value to the formula below. This formula will remove item from the data source.

Remove('Problem Reports', ThisItem)

1. Click Save.

Exercise 4: Add new report

In this exercise, you will add a form to submit new problem reports.

Task 1: Add new report form

1. Select the New Reports Screen, select Insert, then select Edit Form.

1. Rename the form to New Report Form.

2. Select New Report Form, go to the Properties pane, and select Problem Report for Data source.

3. Click Edit fields.

1. Remove the Status Reason Column.

1. Remove the Created On Column.

2. Remove the Location Column.

3. Click + Add field.

4. Select Details, Building, Department, and Photo, and then click Add.

5. Resize and reposition the form so it takes most of the page and leave enough room for a button in the bottom.

1. Select the New Reports Screen.

2. Select Insert then select Button.

3. Rename the button Submit Report.

4. Place the button below the form and make it stretch across the screen

5. Change the Submit Report button’s text property to Submit.

6. Select the Submit Report button and change the OnSelect value to the formula below. This formula will create a new Row in the Problem Reports table.

SubmitForm('New Report Form')

1. Select the New Report Form.

2. Change the OnSuccess value to the formula below. This formula will show a notification after the new Row gets created and clear the form when the record creation is successful.

Notify("Created new problem report row");NewForm('New Report Form')

1. Select the New Reports Screen.

2. Set the OnVisible value to the formula below. This formula will create a new form when the screen becomes visible.

NewForm('New Report Form')

1. Click Save.
2. Click Publish.
3. Click Publish this version and wait for the publishing to complete.
4. Do not navigate away from this page.

Exercise 5: Test the application

In this exercise, you will test the canvas application you created by submitting a problem report.

Task 1: Test application

1. Select the Main Screen and click Preview the app.

1. The application should load, and the list should show all the reports you created.

1. Select the New Report tab.

2. The New Report Form should load. Fill out the form and click on the Photo Column.

3. Select an image.

4. Click Submit

5. The Row should get created successfully and you should see the success message.

1. Select the My Reports tab.

2. You should see the new report you created. Click Delete to test the delete.

1. The Row should be deleted and removed from the list.

1. Close the preview.
2. Close the app studio by closing the browser tab.

Exercise 6: Embed canvas app in Microsoft Teams

In this exercise, you will add the Company 311 Phone App that you created earlier, to Microsoft Teams as a way for staff to be able to log issues directly within Teams.

Task 1: Setup Company 311 Team

In this task, you will setup a Microsoft Teams team for the Lamna Healthcare Company, if you have not done so previously.

1. Navigate to Microsoft Teams and sign in with the same credentials you have been using previously.

2. Select Use the web app instead on the welcome screen.

1. When the Microsoft Teams window opens, dismiss the welcome messages.

2. Select Teams.

3. On the bottom left corner, choose Join or create a team.

4. Select Create a team.

1. Press From scratch.

2. Select Public.

3. For the Team name enter Company 311 and select Create.

4. Select Skip adding members to Company 311.
5. Do not navigate away from this page.

Task 2: Add canvas app to Teams

1. Select the General channel of the Company 311 team.

2. On the top of the page, press the + symbol to add a new tab.

1. Search for power and select Power Apps from the results.

2. Select Add to add Power Apps to Teams

3. Select the Company 311 Phone App that you created earlier in this lab.

IMPORTANT

If you do not see the app you need to go back to the app editor and publish the app

1. Select Save.

2. The Company 311 app should now appear on a tab in Microsoft Teams.