Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The Power BI DataViz World Championships are on! With four chances to enter, you could win a spot in the LIVE Grand Finale in Las Vegas. Show off your skills.

Reply
Sanjeevan
Regular Visitor

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 1
v-rzhou-msft
Community Support
Community Support

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 Zhou

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Feb2025 Sticker Challenge

Join our Community Sticker Challenge 2025

If you love stickers, then you will definitely want to check out our Community Sticker Challenge!