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

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

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
RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.

MayPowerBICarousel

Power BI Monthly Update - May 2024

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

LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.