topic Re: AI/BI dashboard integration in HTML page in Data Engineering

AI/BI dashboard integration in HTML page

ShivangiB1 — Wed, 09 Jul 2025 18:43:59 GMT

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.

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Wed, 09 Jul 2025 20:37:40 GMT

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.-,Troubleshooting%20embedded%20dashboards,-This%20section%20lists

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

Thank you.

Re: AI/BI dashboard integration in HTML page

ShivangiB1 — Thu, 10 Jul 2025 12:30:08 GMT

Hey @Khaja_Zaffer , getting error refused to connect

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Fri, 11 Jul 2025 18:25:09 GMT

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%2FCustomerName%20eq% 20'Smith%20%26%20Jones%20Co.'

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Fri, 11 Jul 2025 18:20:51 GMT

Translator

Also verify whether you have enough permission for this.

Thank you. I hope this works for you.

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Fri, 11 Jul 2025 18:29:42 GMT

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%2FResellerID%20eq%20'[PartnerProId]'

Re: AI/BI dashboard integration in HTML page

ShivangiB1 — Sat, 12 Jul 2025 07:40:48 GMT

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

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Sat, 12 Jul 2025 17:32:31 GMT

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.

Re: AI/BI dashboard integration in HTML page

ShivangiB1 — Mon, 14 Jul 2025 05:18:26 GMT

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

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Mon, 14 Jul 2025 09:15:08 GMT

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

Re: AI/BI dashboard integration in HTML page

ShivangiB1 — Mon, 14 Jul 2025 18:26:13 GMT

Hi @Khaja_Zaffer ,yes please

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Tue, 15 Jul 2025 09:32:18 GMT

Sure, please share your availability we can connect

Re: AI/BI dashboard integration in HTML page

ShivangiB1 — Tue, 15 Jul 2025 12:39:41 GMT

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

Re: AI/BI dashboard integration in HTML page

Khaja_Zaffer — Tue, 15 Jul 2025 13:19:23 GMT

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

This can help you @ShivangiB1