Hi Team, We have a Dashboard that reads from multiple semantic models and data sources, some of these data sources have Effective Identity enabled, we have created out Request Body to generate the dashboard token via `https://api.powerbi.com/v1.0/myorg/GenerateToken` URL the token is generating without any issues, but when we use the token in the frontend to embedd the iframe it doesn't work.
This is the request body shape to the URL.
request_body = {
"dashboards": [
{
"id": ""
}
],
"datasets": [
{
"xmlaPermissions": "ReadOnly",
"id": ""
}
],
"accessLevel": "View",
"identities": [
{
"username": user,
"roles": [
""
],
"datasets": [
""
]
},
]
}
This is how i am using the embed token in the frontend
'use client';
import { ErrorAlert } from '@/app/components/lib/ErrorAlert';
import { WbSpinner, WbSelect } from '@workbench/react';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
import { useEffect, useState } from 'react';
import { useApps } from '../../context/AppsContext';
import styles from './layout.module.scss';
import { Embed, Report, Dashboard, Page } from 'powerbi-client';
import { PbiApps } from '@/app/types/PbiApps';
// TODO Add Error Fallback
export default function Layout({ params }: { params: { app_id: string } }) {
const [showReport, setShowReport] = useState(false);
const [embedToken, setEmbedToken] = useState('');
const [reportId, setReportId] = useState('');
const [app_type, setApp_type] = useState('');
const [showErrorDefault, setShowErrorDefault] = useState(false);
const [showErrorUnauthorized, setShowErrorUnauthorized] = useState(false);
const { appsData } = useApps();
const [preport, setPreport] = useState<Dashboard>();
const [pages, setPages] = useState<Page[]>([]);
const [currentPageName, setCurrentPageName] = useState('');
const [pageList, setPageList] = useState<string[]>([]);
// TODO look into request error in first render (not causing any issues)
useEffect(() => {
const report = appsData?.find((app) => app.app_id === params.app_id);
const isRls = report?.rls ? true : false;
report &&
fetch(`/api/pbiEmbedToken/${params.app_id}?rls=${isRls}`)
.then((res) => res.json())
.then((data) => {
if (data.status === 401) {
setShowErrorUnauthorized(true);
}
const token = data;
const reportId = report?.report_id;
setReportId(reportId ?? '');
setEmbedToken(token);
setShowReport(true);
setApp_type(report?.is_dashboard ? 'dashboard' : 'report');
})
.catch((error) => {
setShowErrorDefault(true);
});
fetch(`/api/app/${params.app_id}`)
.then((res) => res.json())
.then((data) => {
const app = Object.values(data[0])[0] as PbiApps;
setPageList(app?.pages || [])
})
.catch((error) => {
setShowErrorDefault(true);
});
}, [appsData, params.app_id]);
// useEffect(() => {
// if (preport) {
// preport.on('loaded', () => {
// preport.getPages().then((pages) => {
// setPages(pages);
// });
// });
// }
// }, [preport]);
if (showErrorUnauthorized) {
return (
<ErrorAlert
message={
"No matching entitlements. Please reach out to the report's responsible person."
}
/>
);
}
if (showErrorDefault) {
return (
<ErrorAlert
message={
"App could not be loaded. Please reach out to the report's responsible person."
}
/>
);
}
if (reportId === '') {
return (
<div className={styles.loadingSpinnerContainer}>
<WbSpinner className={styles.loadingSpinner}></WbSpinner>
</div>
);
}
const embedConfig = {
type: "dashboard",
id: "",
accessToken: "",
tokenType: models.TokenType.Embed,
embedUrl: "https://app.powerbi.com/dashboardEmbed",
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false,
},
};
return (
<div>
<div className={styles.reportContainer}>
{showReport && embedToken && (
<PowerBIEmbed
cssClassName={pageList.length === 0 ? styles.iframeContainer : styles.iframeContainerMain}
embedConfig={embedConfig}
getEmbeddedComponent={(embedObject: Embed) => {
if (embedObject instanceof Dashboard) {
setPreport(embedObject);
}
}}
/>
)}
</div>
</div>
);
}
