Forum Discussion

matsuguitan's avatar
matsuguitan
New Member
4 years ago
Solved

Embed PowerBI Report is not showing.

Using the powerBI-client-react sdk for embedding powerbi Report.

I was able to load the report by manually setting the reportID, the embedURL and the embedtoken.

 

but when I'm trying programatically, only the log is showing and I get this response in the console. 

Power BI SDK iframe is loaded but powerbi.embed is not called yet.

 

Can anyone help me wit this. 

  • Anonymous's avatar
    Anonymous
    4 years ago

    Hi matsuguitan ,

     

    You can refer to below offical blog to learn more details. And there is a demo in this blog.

    For reference: 

    Embed a Power BI component in a React application

    Try this code:

    embedConfig = {
        {
            type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
            id: '<Report Id>',
            embedUrl: '<Embed Url>',
            accessToken: '<Access Token>',
            tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
            settings: {
                panes: {
                    filters: {
                        expanded: false,
                        visible: false
                    }
                },
            }
        }
    }
    
    eventHandlers = {
        new Map([
            ['loaded', function () {
                console.log('Report loaded');
            }],
            ['rendered', function () {
                console.log('Report rendered');
            }],
            ['error', function (event) {
                console.log(event.detail);
            }]
        ])
    }
    
    cssClassName = {
        "report-style-class"
    }
    
    getEmbeddedComponent = {
        (embeddedReport) => {
            window.report = embeddedReport;
        }
    }

     

    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.

     

1 Reply

  • Anonymous's avatar
    Anonymous
    Not applicable

    Hi matsuguitan ,

     

    You can refer to below offical blog to learn more details. And there is a demo in this blog.

    For reference: 

    Embed a Power BI component in a React application

    Try this code:

    embedConfig = {
        {
            type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
            id: '<Report Id>',
            embedUrl: '<Embed Url>',
            accessToken: '<Access Token>',
            tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
            settings: {
                panes: {
                    filters: {
                        expanded: false,
                        visible: false
                    }
                },
            }
        }
    }
    
    eventHandlers = {
        new Map([
            ['loaded', function () {
                console.log('Report loaded');
            }],
            ['rendered', function () {
                console.log('Report rendered');
            }],
            ['error', function (event) {
                console.log(event.detail);
            }]
        ])
    }
    
    cssClassName = {
        "report-style-class"
    }
    
    getEmbeddedComponent = {
        (embeddedReport) => {
            window.report = embeddedReport;
        }
    }

     

    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.