Advanced Canvas

Hands-on Lab
Table of Contents
Lab Overview..................................................................................................................................................................... 1
Environment .................................................................................................................................................................................. 1
Scenario ............................................................................................................................................................................................ 1
Requirements................................................................................................................................................................................. 1
Exercise 1 – Canvas App in Model-Driven App .................................................................................................................... 2
Task 1: Create connection to Microsoft Teams ............................................................................................................... 2
Task 2: Add Field .......................................................................................................................................................................... 5
Task 3: Add Field to the Form ................................................................................................................................................ 6
Task 4: Add Canvas App ............................................................................................................................................................ 8
Task 5: Test the Application ..................................................................................................................................................18

2 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

Lab Overview
Environment
The lab requires a new PowerApps environment with a Common Data Service database created
and the sample apps installed.

Scenario
Contoso has built a model-driven app to challenge their employees to innovate. The way the app
works is Contoso Management can submit Challenges and then employees can submit ideas. For
example, a challenge might be "Reduce factory emissions by 10%". Employees can submit ideas
for challenges and get funded once they get enough votes.
Contoso would like to announce new challenges in Microsoft Teams by posting some information
about the challenge. Contoso’s users would like to be able to create this post from the model-
driven Innovation Challenge app they use to manage the challenges.
You will be building an embedded canvas app that will let users start discussions without
leaving the Innovation Challenge application.

Requirements
The following have been identified as requirements you must implement to complete the project.

• R0 – User must be able to start new Teams discussion from the existing Innovation
Challenge application.
• R1 – User must be able to select the Team they would like to start the discussion in.
• R2 – User must be able to select the Channel the would like to stat the discussion in.
• R3 – The Challenge name must be included in the chat message.
• R4 – User should be able to edit the message before posting it.

Estimated time to complete this lab: 60 minutes

1
Advanced Canvas- Lab Overview

Exercise 1 – Canvas App in Model-Driven App

Task 1: Create connection to Microsoft Teams
In this task, you will pre-create your connection to Microsoft Teams. We are doing this because we are
using a shared account for the lab and if you created the connection in the PowerApps Studio designer
it would default the connection to your lab user.

1) Navigate to https://teams.microsoft.com/ and sign in.

2) Lick Use the Web Instead.

3) Select Teams and click Manage Teams.

4) Click Create a Team.

2 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

5) Select From Scratch.

6) Select Public.
7) Enter Team One for Name and click Create.

8) Click Skip.
9) Click Manage Teams again.
10) Click Create a Team.
11) Select From Scratch.
12) Select Public.
13) Enter Team Two for Name and click Create.

3
Advanced Canvas- Lab Overview

14) Click Skip.

15) You should now have atleast two teams. Click on the … button of Team One and select
Add Channel.

16) Enter Channel One for Name and click Add.

17) Add another Channel to Team One and name it Channel Two.
18) Add two Channels to Team Two and name them Channel One and Channel Two.
19) You should now have two teams and three channels for each team.

4 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

Task 2: Add Field

In this task, you will add a new field to the Challenge entity. This field will be used to host the
embedded canvas app on the form.
1) Navigate to https://make.powerapps.com/ and make sure you are the correct
environment.
2) Select Solutions, locate the Contoso Challenges Voting solution you craeted and click to
open it.
Note: If you didn’t do Module 5.
a) Create a new solution name the solution Contoso Challenge Voting and a new
Publisher, name the publisher Contoso with prefix of contoso.
b) Add the existing Challenge entity to solution you created.

3) Locate and click to open the Challenge entity.

4) Select the Fields tab and click Add Field.

5
Advanced Canvas- Lab Overview

5) Enter Send to Teams for Display Name select Text for Data Type and click Done.
Note: Currently Embeded Canvas Apps can only be created as a control for a field or a
subgrid, you can’t just put a canvas app unbound to any data. We are therefore creating a
Send To Teams field to track if we have posted to teams, but also to allow us to display the
custom visual.

6) Click Save Entity.

Task 3: Add Field to the Form

In this task, you will add the main form of the Challenge entity to your solution and then add the new
field to the main form.
1) Select the Forms tab.
2) Hover over the Main form, click on the … More Commands button and select Edit Form.

3) Select the Contributed Ideas section.

6 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

4) Click Add Control, select Components, and select 1-Column Section.

5) Go to the Properties pane and change the Section Label to Start Team Chat.

6) Click Add Field.

7
Advanced Canvas- Lab Overview

7) Select Send to Teams.

8) Click Save.
9) Click Publish.
10) Click Switch to Classic. Note: Currently, you can only create the embeded canvas app and
change the controls for a field form the classic form editor. In the future you will be able
to do this without changing to classic.

Do not navigate away from from this page

Task 4: Add Canvas App

In this task, you will create the canvas application. Since you are working in a solution, the canvas app
you create here will also be included in the solution.
1) Double click the Send to Teams field. In some browsers you may need to select the item and
look for form properties in the header instead.

8 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

2) Uncheck Display Label.

3) Select the Controls tab and click Add Control.

4) Select Canvas App and click Add.

5) Select Web.

6) Click Customize to create your canvas app in the PowerApps Studio. This will launch an
app designer browser tab.

9
Advanced Canvas- Lab Overview

7) Click File and select Save.

8) Enter Send to Teams for Name and click Save.

9) Click on Back button.

10) Right click on Form or Gallery and select Delete.

11) Select Data Sources.

10 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

12) Expand Connectors, search for Teams, and select Microsoft Teams.

13) Click Connect.

14) You should now have Challenges and Microsoft Teams in your app.

11
Advanced Canvas- Lab Overview

15) Select Treeview.

16) Right click FormScreen1 and select Rename.

17) Rename the screen TeamsScreen.

18) Select the Insert tab, click Input and select Drop Down.

12 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

19) Right click on Dropdown1 and select Rename.

20) Rename it teamsDropdown.

21) Set the Items property to the snippet below. If you have difficulty with copy/paste then
type the snippet manually. This snippet will list the available teams in the dropbox
MicrosoftTeams.GetAllTeams().value

22) Go to the Properties pane and click Advanced.

13
Advanced Canvas- Lab Overview

23) Scroll down to the Data section and select displayName for Value.

24) Click Input and select Dropdown again. This dropdown will be for the channels in the
team.
25) Rename the dropdown channelsDropdown.
26) Set the Items property to the snippet below. This snippet will show the channels of the
selected team in the second dropdown.
If(!IsBlank(teamsDropdown.Selected),MicrosoftTeams.GetChannelsForGroup(teamsDro
pdown.Selected.id).value)

27) Go to the Properties and select Advanced.

28) Scroll down to the Data section and select displayName for Value.

29) Select the TeamsScreen.

14 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

30) Select the Insert tab, click Text and select Rich Text Editor.

31) Rename the RichTextEditor1 to messageText.

32) Arrange the controls on the screen as shown below.

33) Select the messageText control and set the Default value to the snippet below. This
snippet will build the chat message.
Concatenate("New Challenge available <strong>",
[@ModelDrivenFormIntegration].Item.sample_name , "</strong>. Go create your new
ideas.")

15
Advanced Canvas- Lab Overview

34) Select the TeamsScreen and click Button.

35) Set OnSelect to the snippet below. This snippet will post the message to the selected
channel.
MicrosoftTeams.PostMessageToChannel(teamsDropdown.Selected.id,channelsDropdown.
Selected.id,{body:{content: messageText.HtmlText,contentType:1}})

36) Change the Text value to Send.

37) Move your Send button and place it below the text box. Resize it to be the same width as
the textbox.
38) Your Canvas application will now look like the inage below.

39) Click File and select Save.

40) Click Publish. You must publish the app for the changes to be seen when you use the
model-driven app.

16 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

41) Click Publish this Version.

42) Click Close.
43) Close the app designer browser tab.
44) Click OK.

45) Click Save.

46) Click Publish.

47) Click Save and Close.
48) Click back button.

17
Advanced Canvas- Lab Overview

49) Select Solutions and click Publish All Customizations the solution

Task 5: Test the Application

In this task, you will test the application.
1) Go to https://make.powerapps.com
2) Click the Apps.
3) Click to open the Innovation Challenge application.

4) Select Challenges.

5) Double click to open one of the challenges.

6) The Canvas app should load – use the drop downs to explore teams. Notice the text editor
has pre-filled with information form the loaded Challenge record. Note: your teams
showing may be different than the pictures.

18 © 2020 Microsoft Corporation. All rights reserved.

Advanced Canvas- Lab Overview

7) Start a in-private/incognito session in a new browser window and navigate to

https://teams.microsoft.com/
8) Login with the shared Microsoft Teams
9) Go back to the Innovation Challenge app and select a Team from the first dropdown.
10) Select Channel from the second dropdown.
11) Click send Send. You may edit the message.

12) Go back to Teams. A new chat should get started in the team and channel you selected.

19