Adv Hands On Lab 4: Embedding PowerApps canvas app into a model driven application

[chass]

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.

Environment

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

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 in which they would like to start the discussion.
  
• R2 – User must be able to select the Channel in which they would like to start the discussion.
  
• R3 – The Challenge name must be included in the chat message.
  
• R4 – User should be able to edit the message before posting it.
  
• R5 – The embedded canvas should not be visible if a discussion was already started.
  

Exercise 1 – Canvas App in Model-Driven App

Task 1: Connect to Teams

In this task, you will add a Microsoft Teams trial to your tenant (if needed) and create a couple Teams and channels.

1. Navigate to https://teams.microsoft.com/
2. Login with your admin user.
3. Click Use the Web App Instead.

1. Click Start and wait for Teams to start. Note: if you already have a Teams licensed user, this step may not be needed.

1. Select Teams and click Create Team.

1. Click Build Team from Scratch.

1. Select Public.
2. Enter Team One for Team name and click Create.

1. Click Skip when asked to add members to the team.
2. Right click on Team One and select Add Channel.

1. Enter Channel One for Channel Name and click Add.

1. Right click Team One again and select Add Channel.
2. Enter Channel Two for Channel Name and click Add.

1. On the bottom left, click Manage Teams.

1. Click Create a Team.

1. Select Build a Team from Scrach.
2. Select Public.
3. Enter Team Two for Team Name and click Create.
4. Click Skip.
5. Right click on Team Two and select Add Channel.
6. Enter Channel One for Channel Name and click Add.
7. Right click on Team Two again and select Add Channel.
8. Enter Channel Two for Channel Name and click Add.
9. You should now have two teams with three channels each.

Task 2: Create Solution

In this task, you will create a publisher, create a new solution, add an existing entity to the solution, and add new field.

1. Navigate to https://make.powerapps.com/ and make sure you are in the correct environment.
2. Select Solutions and click New Solution.

1. Enter Contoso Embedded for Display Name, click on the Publisher dropdown and click + Publisher.

1. Enter Contoso for Display Name, contoso for Prefix and click Save and Close.

1. Select Contoso for Publisher, enter 1.0.0.0 for Version and click Create.

1. Click to open the solution you just created.

1. Click Add Existing and select Entity.

1. Select the Challenge entity and click Next. If you have difficulty locating the Challenge entity, use the search box to find and select it.

1. Click Select Components.

1. Select the Forms tab.
2. Select all three forms and click Add. Note: Ideally we would just select the Main Form that we are going to edit, however due to a current bug that type of form is not showing and all three forms are named Information.

1. Click Add again.
2. Click to open the Challenge entity.

1. Select the Fields tab and click Add Field.

1. Enter Started Date for Display Name select Date Only 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.

1. Click Save Entity.

Task 3: Add Field to the Form

In this task, you will add the new field to the main form.

1. Select the Forms tab.
2. Hover over the Main form, click on the … More Commands and select Edit Form (Preview).

1. Select the Contributed Ideas section.

1. Click Add Control and select 1-Column Section.

1. Go to the Properties pane, change the Section Label to Start Team Chat, change the Name to start_team_chat_section.

1. Click Add Field.

1. Select Started Date.

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

Do not navigate away 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 Started Date field. In some browsers you may need to select the item and look for form properties in the header instead.

1. Uncheck Display Label.

1. Select the Controls tab and click Add Control.

1. Select Canvas App and click Add.

1. Select Web.

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

1. Click File and select Save.
2. Enter Start Group Discussion for Name and click Save.

1. Click on Back button in the PowerApps console (not the browser back button).

1. Right click on Form1 and select Delete.

1. Rename the Screen teamsScreen.

1. Select the View tab and click Data Sources.

1. Go to the Data pane and click Add
   Data Source.

1. Select Add New Connection.

1. Search for Teams and select Microsoft Teams.

1. Click Create.

1. Click Add Data Source again.

1. Search for Common Data Service and select it.

1. Click Create.
2. Select the Challenges entity and click Connect.

1. Close the Data pane.
2. Select the Insert tab, click Controls and select Drop Down.

1. Right click on Dropdown1 and select Rename.

1. Rename it teamsDropdown.

1. Set the Items property to the formula below. If you have difficulty with copy/paste then type the formula manually. This formula will list the available teams in the dropbox

MicrosoftTeams.GetAllTeams().value

1. Go to the Properties pane and click Advanced.

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

1. Click Controls and select Dropdown again.
2. Rename the dropdown channelsDropdown.
3. Set the Items property to the formula below. This formula will show the channels of the selected team in the second dropdown.

If(!IsBlank(teamsDropdown.Selected),MicrosoftTeams.GetChannelsForGroup(teamsDropdown.Selected.id).value)

1. Go to the Properties pane and select displayName for Value.

1. Select the teamsScreen.
2. Select the Insert tab, click Text and select Rich Text Editor.

1. Rename the RichTextEditor1 to messageText.
2. Arrange the controls on the screen as shown below.

1. Select the messageText control and set the Default value to the formula below. This formula will build the chat message.

Concatenate(“New Challenge available <strong>”, ModelDrivenFormIntegration.Item.sample_name , “</strong>. Go create your new ideas.”)

1. Select the teamsScreen and click Button.

1. Set OnSelect to the formula below. This formula will post the message to the selected channel.

MicrosoftTeams.PostMessageToChannel(teamsDropdown.Selected.id,channelsDropdown.Selected.id,{body:{content: messageText.HtmlText,contentType:1}})

1. Change the Text value to Send.

1. Rename the button Start Discussion.
2. Move your Send button and place it below the text box. Resize it to be the same width as the textbox.
3. Your canvas application will now look like the image below.

1. Click File and select Save.
2. Click Publish.

1. Click Publish this Version.
2. Click Close.
3. Close the app designer browser tab.
4. Click OK.

1. Click Save.

1. Click Publish.
2. Click Save and Close.
3. Close the form designer browser tab.
4. Click Done.

1. Select Solutions and click Publish All Customizations.

Task 5: Test the Application

In this task, you will test the application.

1. Go to https://web.powerapps.com
2. Select Apps.
3. Click to open the Innovation Challenge application.

1. Select Challenges.

1. Double click to open one of the challenges.

1. The Canvas app should load in the Start Group Discussion section and the challenge name will be included in the text.

1. Start a new browser tab and navigate to https://teams.microsoft.com/
2. Login if prompted.
3. Go back to the Innovation Challenge app and select a Team from the first dropdown.
4. Select Channel from the second dropdown.
5. Click Send. You may edit the message.

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

Bonus: Edit your form to look more like the image below

Exercise 2 – Update and Refresh

In this exercise, you will update the challenge record from the canvas application and show the updated record in the model-driven application.

Task 1: Add Field to the Form

In this task, you will add the Started Date field to the Challenge main form.

1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
2. Select Solutions and click to open the solution you created.

1. Click to open the Challenge entity.

1. Select Forms and click to open the Main form.

1. Uncheck the Show Only Unused Fields checkbox.

1. Select the Start Team Chat section, search for Started Date and click on it.

1. Drag the new field and place it above the field you added in Exercise 1.

1. Click Save.
2. Close the form editor browser tab.
3. Click Done.
4. Select Solutions and click Publish All Customizations.

Task 2: Update Field and Refresh Form

In this task, you will update the Started Date value and refresh the form from the Canvas application.

1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
2. Select Solutions and open the solution you created.
3. Select Apps, select the Start Group Discussion application, and click Edit.

1. Select the Start Discussion button.

1. Select the OnSelect property, place your cursor at the beginning of the existing function and paste the formula below. There are two functions in this formula, the Patch function will update the Started Date of the Challenge records and the ModelDrivenFormIntegration.RefreshForm will refresh the form.

Patch(Challenges, First( Filter(Challenges, Challenge = ModelDrivenFormIntegration.Item.sample_challengeid)), {‘Started Date’: Now()});ModelDrivenFormIntegration.RefreshForm(false);

1. Click File and Save.
2. Click Publish.
3. Click Publish this Version.
4. Click the app designer browser tab.
5. Click Done.
6. Select Apps and click to open the Innovation Challenge application.

1. Select the Challenges and open one of the records.

1. Locate the embedded canvas application and make sure the Started Date field is empty.

1. Click Send.

1. The Started Date field should now have today’s date.

Bonus – Hide Embedded Canvas

In this exercise, you will create a business rule that will hide the embedded canvas application if started date field has a value.

Task 1: Create Business Rule

In this task, you will create the business rule.

1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
2. Select Solutions and open the solution you created.
3. Click to open the Challenge entity.
4. Select the Business Rules tab and click Add Business Rule.

1. Select the Condition, go to the Properties pane, and enter Check Started Date for Display Name.

1. Go to Rule 1, select Entity for Source, select Started Date for Field, Contains Data for Operator, and click Apply.

1. Click Add and select Set Visibility.

1. Add it to the true side of the condition.

1. Select the New Action, go to the Properties pane, enter Hide Canvas for Display Name, select Started Date for Field, select No for Visible and click Apply.

1. Click Add and select Set Visibility again.
2. Add it to the False side of the condition.
3. Select the New Action, go to then Properties pane, provide the value shown in the image below and click Apply.

1. Your Business Rule will look like the image below. Click Save.

1. Click Activate.

1. Click Activate again.
2. Close the Business Rule editor browser tab.
3. Click Done.

Task 2: Test Business Rule

In this task, you will test the business rule you created.

1. Navigate to https://make.powerapps.com/ and make sure you are in the correct environment.
2. Select Apps and click to open the Innovation Challenge application.

1. Select Challenges and open one of the records. Select a record different from the one you used to test the canvas app.

1. Go to the embedded canvas application and make sure it is visible on the form and the started date is empty.

1. Click Send.

1. The form should refresh, and the embedded canvas application will no longer be visible on the form.

Bonus – Open Quick Create Form

In this exercise, you will open a quick create form from the canvas application.

Task 1: Open Quick Create Form

In this task, you will add a button to the canvas application, this button will open a quick create form.

1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
2. Select Solutions and open the solution you created.
3. Click on the … More Commands button of the Start Group Discussion application and select Edit.

1. Select the teamScreen.
2. Select the Insert tab and click Button.

1. Rename the button QuickCreateButton.

1. Place the button below the Send button and resize it.

1. Change the button text Create Team Project.

1. Select the OnSelect property of the button and paste the formula below. This formula will open the team project quick create form.

ModelDrivenFormIntegration.OpenQuickCreateForm(“sample_teamproject”)

1. Click File and Save.
2. Click Publish.
3. Click Publish this Version.
4. Click Close.
5. Close the app designer browser tab.
6. Click Done.

Task 2: Test Quick Create

In this task, you will test the embedded canvas application and see that the quick create form opens.

1. Navigate to https://web.powerapps.com/ and make sure you are in the correct.
2. Select Apps and open the Innovation Challenge application.
3. Select Challenges and open a record you haven’t used to for testing before.

1. Go to the embedded canvas application and click on the Create Team Project button.

1. Quick Create form should open, provide the information below and click Save and Close.

1. Select Team Projects. The Test Project should be in the list of records.