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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

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
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.