playground embed code and sample app flusk code are different.

[fuad47]

I can't copy/paste playground code (see screenshot) to sample flusk/python index.js project file because it wont work for some reasons. I tried to modify sample app code to my needs, I am trying to make some design/theme changes to the dashboard, got the code piece from the sandbox and pasted into to the function. but i get error: report.applyTheme({themeJson: theme}); in this line saying that report is not defined. I am not proficient in js. So I need help.

$(function () {
    var reportContainer = $("#report-container").get(0);

    // Initialize iframe for embedding report
    powerbi.bootstrap(reportContainer, { type: "report" });
    
    var models = window["powerbi-client"].models;
    
    var reportLoadConfig = {
        type: "report",
        tokenType: models.TokenType.Embed,

        // Enable this setting to remove gray shoulders from embedded report
        settings: {
            layoutType: models.LayoutType.MobilePortrait
        }
    };

    // You can embed different reports as per your need

    const theme = {
        "name": "Sample Theme",
        "dataColors": ["#990011", "#cc1144", "#ee7799", "#eebbcc", "#cc4477", "#cc5555", "#882222", "#A30E33"],
        "background": "#FFFFFF",
        "foreground": "#007799",
        "tableAccent": "#990011"
    };
    
    // Update the theme by passing in the custom theme.
    // Some theme properties might not be applied if your report has custom colors set.
    try {
        report.applyTheme({themeJson: theme});
        console.log("Custom theme applied, to remove custom theme, reload the report using 'Reload' API.");
    }
    catch (error) {
        console.log(error);
    }

    $.ajax({
        type: "GET",
        url: "/getembedinfo",
        dataType: "json",
        success: function (data) {
            embedData = $.parseJSON(JSON.stringify(data));
            reportLoadConfig.accessToken = embedData.accessToken;
            
            // You can embed different reports as per your need
            reportLoadConfig.embedUrl = embedData.reportConfig[0].embedUrl;

            // Use the token expiry to regenerate Embed token for seamless end user experience
            // Refer https://aka.ms/RefreshEmbedToken
            tokenExpiry = embedData.tokenExpiry;

            // Embed Power BI report when Access token and Embed URL are available
            var report = powerbi.embed(reportContainer, reportLoadConfig);

            // Triggers when a report schema is successfully loaded
            report.on("loaded", function () {
                console.log("Report load successful")
            });

            // Triggers when a report is successfully embedded in UI
            report.on("rendered", function () {
                console.log("Report render successful")
            });
            //---------

            //-----------------
            // Clear any other error handler event
            report.off("error");

            // Below patch of code is for handling errors that occur during embedding
            report.on("error", function (event) {
                var errorMsg = event.detail;

                // Use errorMsg variable to log error in any destination of choice
                console.error(errorMsg);
                return;
            });
        },
        error: function (err) {

            // Show error container
            var errorContainer = $(".error-container");
            $(".embed-container").hide();
            errorContainer.show();

            // Format error message
            var errMessageHtml = "<strong> Error Details: </strong> <br/>" + $.parseJSON(err.responseText)["errorMsg"];
            errMessageHtml = errMessageHtml.split("\n").join("<br/>")

            // Show error message on UI
            errorContainer.html(errMessageHtml);
        }
    });
});

[PesalaPavan]

@fuad47
It would be great if you could add a link to the documentation you are following for these steps? This would help us redirect the issue to the appropriate team. Thanks!!

[PesalaPavan]

@fuad47
We are going to close this thread but if there are any further questions regarding the documentation, please tag me in your reply and we will be happy to continue the conversation.