trying to get embedded with mobile design

[apenaranda]

Hello,
Does anyone know why the following code doesn't work for me?

$(function () {

    var reportContainer = $("#report-container").get(0);
    
    // Initialize iframe for embedding report
    powerbi.bootstrap(reportContainer, { type: "report" });

    var models = window["powerbi-client"].models;



    let isMobile = window.matchMedia("(max-width: 600px)").matches;
        let newSettings = {
            layoutType: models.LayoutType.MobilePortrait
        }; 

        if (isMobile) { //this returns true or false
            newSettings = {
                layoutType: models.LayoutType.MobilePortrait
            };
        }




    var reportLoadConfig = {
        type: "report",
        tokenType: models.TokenType.Embed,
        settings: newSettings,
        // Enable this setting to remove gray shoulders from embedded report

    };
    var idrepor = $("#idrepor").html();
    var rol = $("#rol").html();
    $("#idrepor").remove();
    $("#rol").remove();
    $.ajax({
        type: "GET",
        url: "/getembedinfo",
        data:{report:idrepor,
                rol:rol},
        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);
        }
    });
});

I'm trying to get embedded with mobile design but there's no way...

[v-yiruan-msft]

Hi @apenaranda ,

According to your description, it seems like you're trying to embed a Power BI report with mobile layout. You can refer the following official documentation and check if it hit any limitation to cause the codes not working.

Embedding a Power BI report with mobile layout in Power BI embedded analytics | Microsoft Learn

In order to get a better understanding and make further troubleshooting, could you please provide the follwoing info?

• Did you get any error message?
• Please make sure Power BI report is configured correctly to support embedding 
• Ensure that the window.matchMedia("(max-width: 600px)").matches is returning true when the screen width is less than or equal to 600px. You can test this by logging the isMobile variable to the console.

Best Regards

[apenaranda]

Hello, I have indeed already verified that the ismobile variable works, I get true or false depending on the screen but when it comes to showing the mobile view it no longer does so, the desktop view always appears.

In fact, I attached a screenshot of the console where you can see that it takes the parameter layouttype: 2, which corresponds to mobile layout.

Any ideas or tests I can do?