Power BI Embedded mobile layout not working

Question

I'm trying to get my app to support mobile layouts for reports. I'm following the instructions here, but the report isn't being laid out in the mobile portrait format. It's showing the master/default layout instead. The Power BI mobile app recognizes the report has the mobile layout and displays the report correctly. Below is my code. Any ideas?

<script type="text/javascript">
        (function( $ ) {

            "use strict";

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

            var embedConfiguration = {
                type: 'report',
                embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=HIDE',
                tokenType: models.TokenType.Aad,
                accessToken: 'HIDE',
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: false,
                    layoutType: models.LayoutType.MobilePortrait,
                    localeSettings: {
                        language: 'en',
                        formatLocale: 'en'
                    }
                },

                id: 'HIDE',
            };

            var $container = $('#powerbi-embedded-40');

            var report = powerbi.embed($container.get(0), embedConfiguration);
        })(jQuery);
</script>

Prateek Raina Prateek Raina · Accepted Answer · 2018-04-26T06:02:40

You must not be using latest powerbi-client. If you would press F12 in your browser you will see that there will be an error saying MobilePortrait is not recognized or is null.

Check this https://github.com/Microsoft/PowerBI-Developer-Samples/tree/master/App%20Owns%20Data sample solution from Microsoft itself, configure it and run with this property, it will work.

So, I would suggest you to update your packages.

Power BI Embedded mobile layout not working

1 Answers