Filter Embedded Power BI Report in React.js Web App Based on User Location: A Step-by-Step Guide

Are you tired of displaying the same Power BI report to all users, regardless of their location? Do you want to provide a more personalized experience by filtering the report based on the user’s location? Look no further! In this article, we’ll show you how to filter an embedded Power BI report in a React.js web app based on user location.

Why Filter Power BI Reports by User Location?

Filtering Power BI reports by user location can be beneficial in various scenarios. For instance, if you’re building a web app that displays sales data, you might want to show different regional sales data to users based on their location. This can help users focus on the data that’s most relevant to them, improving their overall experience and increasing engagement.

The Technologies We’ll Use

In this tutorial, we’ll use the following technologies:

• React.js: A popular JavaScript library for building user interfaces.
• Power BI: A business analytics service by Microsoft that allows us to create interactive visualizations and reports.
• Power BI Embedded: A feature that enables us to embed Power BI reports into our web app.
• IP Geolocation API: A service that provides us with the user’s location based on their IP address.

Step 1: Set Up Power BI Embedded

Before we dive into filtering the Power BI report, we need to set up Power BI Embedded in our React.js web app. Follow these steps:

1. Create a new Power BI report or use an existing one.
2. Go to the Power BI service and navigate to the “Workspaces” section.
3. Click on the “Get started” button next to “Power BI Embedded.”
4. Follow the instructions to register an application and obtain an Azure AD token.
5. Install the Power BI Embedded library using npm by running the command npm install powerbi-client.
6. Import the Power BI Embedded library in your React.js component and use the Azure AD token to authenticate.

import { Embed } from 'powerbi-client';

const reportEmbed = new Embed({
  type: 'report',
  id: 'reportId',
  embedUrl: 'https://app.powerbi.com/reportEmbed',
  accessToken: 'azureAdToken',
  tokenType: 'AAD',
});

Step 2: Integrate IP Geolocation API

To determine the user’s location, we’ll use an IP Geolocation API. There are several APIs available, such as IP Geolocation API by IPify or GeoIP by MaxMind. For this example, we’ll use IP Geolocation API by IPify.

Install the IP Geolocation API library using npm by running the command npm install @ipify/geolocation.

import { geolocation } from '@ipify/geolocation';

geolocation().then(response => {
  const userLocation = response.location;
  console.log(userLocation);
});

Step 3: Filter Power BI Report by User Location

Now that we have the user’s location, we can filter the Power BI report accordingly. We’ll use Power BI’s filtering capabilities to achieve this.

First, add a filter to your Power BI report by going to the “Modeling” tab and clicking on “New filter.”

Filter column	Filter operator	Filter value
Location	equals	{{ userLocation.countryCode }}

In the above example, we’re filtering the report by the “Location” column, which contains the country code. We’re using the “equals” operator to filter the data based on the user’s country code.

Apply the Filter Programmatically

To apply the filter programmatically, we’ll use Power BI Embedded’s filtering API. First, get the report’s filters using the getFilters() method:

reportEmbed.getFilters().then(filters => {
  const locationFilter = filters.find(filter => filter.columnName === 'Location');
  if (locationFilter) {
    // Update the filter value
    locationFilter.values = [userLocation.countryCode];
  }
});

Next, use the applyFilters() method to apply the updated filter:

reportEmbed.applyFilters({
  filters: [locationFilter],
});

Putting it All Together

Now that we’ve set up Power BI Embedded, integrated the IP Geolocation API, and filtered the Power BI report by user location, let’s put it all together:

import { Embed } from 'powerbi-client';
import { geolocation } from '@ipify/geolocation';

const reportEmbed = new Embed({
  type: 'report',
  id: 'reportId',
  embedUrl: 'https://app.powerbi.com/reportEmbed',
  accessToken: 'azureAdToken',
  tokenType: 'AAD',
});

geolocation().then(response => {
  const userLocation = response.location;
  console.log(userLocation);

  reportEmbed.getFilters().then(filters => {
    const locationFilter = filters.find(filter => filter.columnName === 'Location');
    if (locationFilter) {
      locationFilter.values = [userLocation.countryCode];
    }

    reportEmbed.applyFilters({
      filters: [locationFilter],
    });
  });
});

That’s it! You’ve successfully filtered an embedded Power BI report in a React.js web app based on user location.

Conclusion

In this article, we’ve demonstrated how to filter an embedded Power BI report in a React.js web app based on user location. By using Power BI Embedded, an IP Geolocation API, and some clever filtering, we’ve provided a more personalized experience for our users.

Remember to adapt this tutorial to your specific use case, and don’t hesitate to reach out if you have any questions or need further assistance.

Happy coding!

Here are 5 Questions and Answers about “Filter Embedded Power BI Report in React.js Web App Based on User Location” in HTML format:

Frequently Asked Question

Get the inside scoop on integrating Power BI reports with React.js and filtering them based on user location!