AI/BI dashboard integration in HTML page

[ShivangiB1]

Hey Team,

Have below queries :

I want to test AI/BI dashboard embeding and want to embed in an html page I have created, but  dashboard is not getting loaded can you please help in understanding process.

And also I want user to have access even if they are not able to access databricks.Is that possible.

Request you to please help.

[Khaja_Zaffer]

Translator

Hello Shivangi

Thank you for sharing the details. 
Can you please check this troubleshooting https://learn.microsoft.com/en-gb/azure/databricks/dashboards/embed#:~:text=and%20subscriptions.-,Tr...

Also, if possible, kindly share the error message in detail. 

Thank you. 

[ShivangiB1]

Hey @Khaja_Zaffer , getting error refused to connect

[Khaja_Zaffer]

Translator

Translator

 How to Create the Correct URL (Step-by-Step)

Let's say you want to filter a report to show data for a customer named "Smith & Jones Co."

Step 1: Write the filter in plain text

First, write out the filter using Power BI's OData filter syntax. TableName/ColumnName eq 'Value'

In our example, this would be: Customers/CustomerName eq 'Smith & Jones Co.'

Step 2: Identify the special characters that need encoding

Look at your filter string: Customers/CustomerName eq 'Smith & Jones Co.'

The special characters are:

• / (forward slash)

• (space)

• & (ampersand)

  Step 3: URL Encode those characters

  Now, replace them with their encoded equivalents. Here are some common ones:

  Character	Encoded Value
  $	%24
  /	%2F
  (space)	%20
  &	%26
  ' (single quote)	%27
  +	%2B Applying this to our filter: Customers**/**CustomerName eq 'Smith **&** Jones Co.'` becomes... Customers%2FCustomerName eq 'Smith%20%26%20Jones Co.' Step 4: Assemble the final URL Now, build the full URL by attaching your correctly encoded filter. Base URL + ? + standard parameters: https://app.powerbi.com/reportEmbed?reportId=your_report_id&autoAuth=true  Add the filter parameter (&$filter=): &$filter= Append your encoded filter string: Customers%2FCustomerName%20eq%20'Smith%20%26%20Jones%20Co.' Your final, correct URL would be https://app.powerbi.com/reportEmbed?reportId=your_report_id&autoAuth=true&$filter=Customers%2FCustom... 20'Smith%20%26%20Jones%20Co.'

[Khaja_Zaffer]

Translator

Also verify whether you have enough permission for this. 

Thank you. I hope this works for you. 

[Khaja_Zaffer]

Translator

Manually encoding URLs is tedious and prone to errors. Since you are building an HTML page, you are likely using JavaScript to construct this URL dynamically. Always use a built-in function to handle encoding.

In JavaScript, the function is encodeURIComponent(). It automatically handles all special characters.

Here is how you would do it in code:

// 1. Define your base URL and report ID
const reportId = "fdc8576e-93b4-4865-ab57-4a918fadf991c"; // Your Report ID
const baseUrl = `https://app.powerbi.com/reportEmbed?reportId=${reportId}&autoAuth=true`;

// 2. Define your filter logic in a raw, unencoded string
// This value might come from a dropdown or search box on your web page
const resellerId = "[PartnerProId]"; // Example value
const rawFilter = `activation_actuals_forecast/ResellerID eq '${resellerId}'`;

// 3. Use encodeURIComponent() to encode ONLY the filter part
const encodedFilter = encodeURIComponent(rawFilter);

// 4. Assemble the final URL
// Note: We are NOT encoding the '$filter=' part, only the value that comes after it.
// The original issue also encoded the '$' ($ -> %24), which works, but it's more standard to encode only the value.
const finalUrl = `${baseUrl}&$filter=${encodedFilter}`;

// 5. Set the iframe source
const iframe = document.getElementById('reportIframe');
iframe.src=finalUrl;

console.log(finalUrl);
// Output will look like:
// https://app.powerbi.com/reportEmbed?reportId=...&autoAuth=true&$filter=activation_actuals_forecast%2...

[ShivangiB1]

Hey @Khaja_Zaffer , is it possible to share ai/bi dashboard with those who don't have access to databricks, using some service principle

[Khaja_Zaffer]

Yes, you can and should use a service principal to validate and embed your Databricks AI/BI dashboard in an external website like SharePoint. This is a more secure and robust method than using your personal credentials, especially in a production environment, as it decouples the dashboard's authentication from an individual user account.

[ShivangiB1]

Hey @Khaja_Zaffer , can you please guide me the process for same

[Khaja_Zaffer]

so you want me to guide you to share ai/bi dashboards who dont have access to databricks using service principal?

[ShivangiB1]

Hi @Khaja_Zaffer ,yes please

[Khaja_Zaffer]

Sure, please share your availability we can connect 

[ShivangiB1]

Hey @Khaja_Zaffer , if you have any document can i refer the same for this  

[Khaja_Zaffer]

https://learn.microsoft.com/en-us/power-bi/developer/embedded/embed-service-principal?tabs=azure-por...

This can help you @ShivangiB1