Forum Discussion
Embed power bi in Web Application
hello guuys,
i'm trying to embed the power bi report in webapplication using Next.Js
I successfully embedded the power bi in webapplication,
but, i got issues while navigating the pages between the report.
I got the Report pages using API, here code that i used
// code
let report;
const [reportPages, setReportPages] = useState([]);
const pag = [];
pag.push(reportPages)
const handlePagesFetched = (pages) => {
setReportPages(pages);
};
const navigateToPage = async (pageName) => {
console.log(pageName)
const pages_set = pageName
await report.setPage(pages_set)
};
return (
<>
<ReportPageFetcher
tok={accessToken}
groupId={groupId}
reportId={reportId}
onPagesFetched={handlePagesFetched} // Pass the callback function
/>
{/* Header */}
<div className="header" >
<div className=" logo" >
<Image className="logo1 cursor-pointer" src={logo} onClick={() => {
nav.push('')
}} />
</div>
{
reportPages.map((page) => (
<button key={page.name} onClick={async function pag() {
const report_page = page.name
await report.setPage(report_page)
console.log(report_page)
}} > {page.displayName} </button>
))
}
</div>
{/* sidePanel */}
<div id="mySidebar" className="sidebar">
<div id='divtow-nav' className='nav-divtwo'>
{
reportPages.map((page) => (
<button key={page.name} onClick={async () => {
const navpage = (page.name)
console.log(navpage)
navigateToPage(page.name)
// await report.setPage(navpage)
}} > {page.displayName}</button>
))
}
</div>
</div>
{/* Embedding */}
<div className='embed'>
<PowerBIEmbed
embedConfig={{
type: 'report', // Supported types: report, dashboard, tile, visual, qna, paginated report and create
id: reportId,
embedUrl: embedurl,
accessToken: accessToken,
tokenType: models.TokenType.Aad,
viewMode: models.ViewMode.View,
settings: {
panes: {
filters: {
expanded: false,
visible: true
},
pageNavigation: { visible: true, position: models.PageNavigationPosition.Left },
},
},
}}
eventHandlers={
new Map([
['loaded', () => {
console.log('Report loaded');
}],
['rendered', function () { console.log('Report rendered'); }],
['error', function (event) { console.log(event.detail); }],
['visualClicked', () => console.log('visual clicked')],
['pageChanged', (event) => console.log(event)],
])
}
cssClassName="Embeded_class"
getEmbeddedComponent={(powerreport) => {
report = powerreport;
}}
/>
</div>
</>
);
}
when i run this and try to navigate between the report pages it shows thee error
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'setPage')
guide me to slove this error.
1 Reply
Hi Sanjeevan ,
According to your statement, I think you need to embed your report in web application.
If your code got error, I suggest you to refer to below offical blog to download the sample file to learn more details about the code.
For reference: Embed your content
Best Regards,
Rico ZhouIf this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
