Adv Hands On Lab 5: Embedding a PowerApp into a Power BI Dashboard

[chass]

Power BI Dashboard

In this lab, you will create a Power BI dashboard with an embedded PowerApp. The final product will look like the image below.

Exercise 1: Build Power BI Report

High level tasks

    Task 1: Connect to PowerBI and enable sample data. Build PowerBI report

    Task 2: Import PowerApp visual for use in report

Task 1: Build Report

In this task, you will build the Power BI Report.

1. Navigate to https://powerbi.microsoft.com and click Sign in.
2. At the bottom of the left navigation, click Get Data
3. Select Samples.

1. Select the Retail Analysis Sample.

1. Connect.

1. Your sample dataset will take a moment to load.

1. Expand My Workspace and click to on the Retail Analysis Sample under the Datasets. If you have completed the prior steps and do not see this sample, refresh your browser.

1. Go to the Fields pane, expand the Store table, and select the Territory and Chain fields. Be sure to select the Territory field first or the designer will add table visual to the canvas, instead of map visual. You can also add the map visual to the canvas first and then select the fields in any order.

1. The map visual will be added for you. Resize and reposition the map as shown below.

1. Select the canvas and click Slicer visual.

1. With Slicer selected, go to the Store table and select the Store Type field.

1. Resize and reposition the Slicer as shown below.

1. Select the canvas, go to the Store table and select the Name and Open Year fields.

1. The table will be added for you. Resize and reposition the table as shown below.

1. Select the canvas and click on the Pie Chart visual.

1. With the Pie Chart selected, expand the Sales table and drag Last Year Sales filed to Values.

1. With the Pie Chart still selected, expand the Item table and drag Category field to Legend.

1. Resize and reposition the Pie Chart visual as shown below.

Task 2: Import PowerApps Custom Visual

In this task, you will import PowerApps custom visual.

1. Go to the Visualization pane and click Import from Marketplace.

1. Search for PowerApps and click Add.

1. You should now have the PowerApps visual available for you to use.

Exercise 2: PowerApps Visual

High level tasks

    Task 1: Create the canvas app you will use as a visual    

Task 1: Create PowerApp Visual

1. Click on the PowerApps Visual.

1. With the PowerApps visual selected, expand the Store table and select City and Name.

1. Click on the environment name and select the environment you want to create the PowerApp in.

1. Click Create New.
2. PowerApps studio will open in a new browser tab and Gallery will be added to screen.

1. Resize Gallery1 it until it looks like the image below.

1. Click on the Edit button. The gallery will go into edit mode.

1. Resize the item template of the gallery and make it slightly taller.

1. With the gallery still in edit mode, select the Insert tab and click Label.

1. Reorder the labels as shown in the image below.

1. Double click on Screen1 and rename it MainScreen.

1. Double click on Gallery1 and rename it storeList.

1. Select MainScreen and click insert Label.

1. Rename the new label headerLabel, move to the top of the screen and resize it.

1. Change the Text for the headerLabel to COMPLIANCE VISIT.
2. Select the Home tab.
3. Select the headerLabel, change the font Size to 32,
   Color to White, Fill to Blue, and click Align.

1. Select Center.
2. Click File and click Save.

1. Enter Compliance Visit for Name and click Save.

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

Exercise 3: Connect to Microsoft To-Do

High level tasks

    Task 1: Add connector to Microsoft To-Do

    Task 2: Save and test your work

Task 1: Add Microsoft To-Do Connector

1. While still in the app designer, select the View tab and click Data Sources.
2. Click Add New Source.

1. Click New Connection.

1. Search for Microsoft To-Do and select it.

1. Click Create.
2. Close the Data pane.

1. Select the MainScreen.
2. Select the Insert tab, click Text and select Text Input.

1. Rename the new text input todoTitle and place it below the storeList.

1. Change the Default value to the formula below.

Concatenate(“Visit “, storeList.Selected.Name, ” in “, storeList.Selected.City)

1. Change the Mode to MultiLine.

1. Resize todoTile and make sure it looks like the image below.

1. Select the Insert tab, click Controls and select Date Picker.

1. Rename the Date Picker dueDate.
2. Place the dueDate control below the todoTitle control.

1. Select the Insert tab and click Button.

1. Rename the button submitButton.

1. Change the Text of the submitButton to add to list.

1. Set the OnSelect value of the submitButton to the formula below. This formula will add to-do item to the Tasks folder, set the title of the to-do item to the text in the todoTile input control, and set the due date to the date selected from the dueDate control.

‘MicrosoftTo-Do(Business)’.CreateToDo(todoTitle.Text, {folderId: “Tasks”, DueDateTime:{ DateTime:dueDate.SelectedDate, TimeZone:’UTC’ }})

1. Move the submitButton below the dueDateControl and resize it.
2. Your MainScreen should look like the image below.

1. Click File and click Save.

1. Click Publish.
2. Click Publish this Version.

Task 2: Test Application.

1. Go back to Power BI.
2. Resize and reposition all the visuals until the report looks like the image below.

1. Click Save.

1. Enter Compliance Visit for Name and click Save.

1. Select Pin Live Page.

1. Select New Dashboard, enter Embedded PowerApp and click Pin Live.

1. Go to the Dashboards section and select Embedded PowerApps dashboard.

1. Your dashboard should load.

1. Go to the map, zoom in, and select Virginia. All the visuals should update including the PowerApp.

1. Select Colonial Heights Lindseys from the PowerApp list. The input text value should get updated.

1. Select future date for due date and click add to list.

1. The item should be added to your to-do list.
2. Select Tennessee from the map.
3. Select Cookeville Lindseys from the PowerApp, select future date for due date and click add to list.
4. Go to https://to-do.office.com and login.
5. Select the Tasks list. You should see the items you added by the embedded PowerApp.

Bonus: Go back and edit the canvas app you have made to give the user a message to confirm submission of the to-do item