Power BI

Developer in a Day
Lab 05A – June 2022 release

Enhance embedded content

© 2022 Microsoft. All rights reserved.

Overview
The estimated time to complete this lab is 15 minutes.

In this lab, you will add client-side filtering and a context menu using the Power BI Client API.

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 2

Exercise 1: Add client-side filtering
In this exercise, you will add a capability to allow the app user to filter embedded reports.

Task 1: Add client-side filtering

In this task, you will add client-side filtering to allow the app user to filter by a product demographic.

1. In Visual Studio Code, open the Views\Home\Index.cshtml file.

For your convenience, many text input values used in this lab can be copied from the
<CourseFolder>\PowerBIDevIAD\Lab05A\Assets\Snippets.txt file.

2. At line 19, use the Snippets.txt file to copy-paste an additional div element (05A-1):

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 3

 C#
<div class='navbar-header navbar-toggle' data-toggle='collapse' data-target='.filters-
collapse'>
Filters
</div>
<div id='filters-menu' class='navbar-collapse filters-collapse'>
<span>Demographic:</span>
<select id="demographic">
<option selected="selected" value="*">(All Demographics)</option>
<option value="Advanced">Advanced</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Novice">Novice</option>
<option value="Professional">Professional</option>
</select>
</div>

The div element presents a dropdown list of product demographic options. Notice that the first option
represents all demographics, which mean no filtering should take place.

3. Save and close the Index.cshtml file.

4. Open the wwwroot\js\embed.js file.

5. At the end of the file, use the Snippets.txt file to copy-paste an event handler (05A-2) to filter the
report:

JavaScript
// Filter reports by product demographic
$(document).ready(function () {
$('#demographic').change(function () {
const report = powerbi.embeds[0];
const demographic = this.value;

const removeFilters = (demographic == "*");

const basicFilter = {
"$schema": "http://powerbi.com/product/schema#basic",
"target": {
"table": "Product",
"column": "Demographic"
},
"operator": removeFilters ? "All" : "In",
"values": removeFilters ? [] : [demographic]
}

// Update filters
report.updateFilters(models.FiltersOperations.Replace, [basicFilter])
.catch(error => { console.log(error); });
});
});

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 4

6. Review the code, and notice that when the first item, labeled “All Demographics”, is selected that
filters are removed.

7. Save and close the embed.js file.

Task 2: Test the app

In this task, you will run the app and test the client-side filtering.

1. Press F5 to run the app.

2. In the web browser, verify that your see an updated web page layout.

3. In the navigation pane, notice the Demographic filter.

4. Open the Sales Analysis report.

5. Select the Sales Trends tab.

6. In the Demographic filter, select any demographic item.

7. Notice that the report visuals update.

8. Hover the cursor over a column in the column chart visual, and in the tooltip notice the values.

9. In the Demographic filter, select the first item, “All Demographics”.

10. Notice that the report visuals update.

11. Hover the cursor over the same column and notice the different tooltip values.

12. Close the test web browser session.

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 5

13. In Visual Studio Code, stop debugging (Shift+F5).

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 6

Exercise 2: Add a context menu
In this exercise, you will add a context menu item to the column chart allowing the app to determine
the value of any selected column.

Task 1: Add a context menu

In this task, you will add two files to the Models folder. The files define classes representing
embeddable Power BI content types.

1. In Visual Studio Code, open the wwwroot\js\embed.js file.

2. Place the cursor the end of line 54, and then use the Snippets.txt file to copy-paste some
additional code into the settings of the embed report config object (05A-3):

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 7

 JavaScript
,
extensions: [
{
command: {
name: "showValue",
title: "Show value in alert box",
selector: {
$schema: "http://powerbi.com/product/schema#visualSelector",
visualName: "bf36eb378296825d9db9" // Monthly sales trends
},
extend: {
visualContextMenu: {
title: "Show value in alert box"
}
}
}
}
]

This setting adds a context menu item with the title “Show value in alert box”. It targets the column
chart in the Sales Trends tab of the Sales Analysis report.

The visualName value was retrieved by using another client-side operation that reports on all visuals
found on a report page.

3. At the end of the embedReport function, use the Snippets.txt file to copy-paste some additional
code to register an event handler (05A-4):

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 8

 JavaScript
// Add "Show value" context menu item
embeddedReport.on("commandTriggered", function (command) {
// Determine the command detail
var commandDetails = command.detail;

// If the command is showValue, show an alert box

if (commandDetails.command === "showValue") {
// Retrieve specific details from the selected data point
const category = commandDetails.dataPoints[0].identity[0].equals;
const value = commandDetails.dataPoints[0].values[0].formattedValue;

alert(category + " value is " + value);

}
});

4. Save and close the embed.js file.

Task 2: Test the app

In this task, you will run the app and test the client-side filtering.

1. Press F5 to run the app.

2. In the web browser, open the Sales Analysis report.

3. Select the Sales Trends tab.

4. Right-click any month column, and then select Show value in alert box.

5. Review the web browser notification that describes the selected month and value.

6. Select OK to dismiss the notification.

7. Close the test web browser session.

8. In Visual Studio Code, stop debugging (Shift+F5).

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 9

Summary
In this lab, you added client-side filtering and a context menu using the Power BI Client API.

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 10

Terms of Use
© 2022 Microsoft. All rights reserved.

By using this hands-on lab, you agree to the following terms:

The technology/functionality described in this hands-on lab is provided by Microsoft Corporation in a

“sandbox” testing environment for purposes of obtaining your feedback and to provide you with a
learning experience. You may only use the hands-on lab to evaluate such technology features and
functionality and provide feedback to Microsoft. You may not use it for any other purpose. Without
written permission, you may not modify, copy, distribute, transmit, display, perform, reproduce,
publish, license, create derivative works from, transfer, or sell this hands-on lab or any portion thereof.

COPYING OR REPRODUCTION OF THE HANDS-ON LAB (OR ANY PORTION OF IT) TO ANY OTHER
SERVER OR LOCATION FOR FURTHER REPRODUCTION OR REDISTRIBUTION WITHOUT WRITTEN
PERMISSION IS EXPRESSLY PROHIBITED.

THIS HANDS-ON LAB PROVIDES CERTAIN SOFTWARE TECHNOLOGY/PRODUCT FEATURES AND

FUNCTIONALITY, INCLUDING POTENTIAL NEW FEATURES AND CONCEPTS, IN A SIMULATED
ENVIRONMENT WITHOUT COMPLEX SET-UP OR INSTALLATION FOR THE PURPOSE DESCRIBED
ABOVE. THE TECHNOLOGY/CONCEPTS REPRESENTED IN THIS HANDS-ON LAB MAY NOT REPRESENT
FULL FEATURE FUNCTIONALITY AND MAY NOT WORK THE WAY A FINAL VERSION MAY WORK. WE
ALSO MAY NOT RELEASE A FINAL VERSION OF SUCH FEATURES OR CONCEPTS. YOUR EXPERIENCE
WITH USING SUCH FEATURES AND FUNCITONALITY IN A PHYSICAL ENVIRONMENT MAY ALSO BE
DIFFERENT.

FEEDBACK If you give feedback about the technology features, functionality and/or concepts
described in this hands-on lab to Microsoft, you give to Microsoft, without charge, the right to use,
share and commercialize your feedback in any way and for any purpose. You also give to third parties,
without charge, any patent rights needed for their products, technologies and services to use or
interface with any specific parts of a Microsoft software or service that includes the feedback. You will
not give feedback that is subject to a license that requires Microsoft to license its software or
documentation to third parties because we include your feedback in them. These rights survive this
agreement.

MICROSOFT CORPORATION HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS WITH REGARD
TO THE HANDS-ON LAB, INCLUDING ALL WARRANTIES AND CONDITIONS OF MERCHANTABILITY,
WHETHER EXPRESS, IMPLIED OR STATUTORY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND
NON-INFRINGEMENT. MICROSOFT DOES NOT MAKE ANY ASSURANCES OR REPRESENTATIONS WITH
REGARD TO THE ACCURACY OF THE RESULTS, OUTPUT THAT DERIVES FROM USE OF THE VIRTUAL
LAB, OR SUITABILITY OF THE INFORMATION CONTAINED IN THE VIRTUAL LAB FOR ANY PURPOSE.

DISCLAIMER This lab contains only a portion of new features and enhancements in Microsoft Power
BI. Some of the features might change in future releases of the product.

PowerBIDevIAD: Lab 05A © 2022 Microsoft. All rights reserved. 11