Unexpected results with LayoutSwitch

[k0nsun]

When we use the "LayoutSwitch" function, the landscape view does not always work.

The settings used:

this.reportConfig = {
        ...this.reportConfig,
        id: reportConfigResponse.Id,
        embedUrl: reportConfigResponse.EmbedUrl,
        accessToken: reportConfigResponse.EmbedToken.Token,
        settings: {
                        panes: {
                            filters: {
                                expanded: false,
                                visible: false,
                            },
                        },
                        layoutType: models.LayoutType.MobilePortrait
                    }
    };

Here the code to change the layout (simplify):

  @HostListener('window:orientationchange', ['$event'])
  onOrientationChange(event: any) {
    if (event.target.screen.orientation.angle === 90) {
        console.debug('MobilePortrait');
        this.reportObj.getReport().switchLayout(models.LayoutType.MobilePortrait);

    }
    else {
        console.debug('MobileLandscape');
        this.reportObj.getReport().switchLayout(models.LayoutType.MobileLandscape);
    }    
  }

Small details:

• If the initial load has the Landscape layout, then the 'LayoutSwitch' function works
• If the initial load has the Portrait layout, then the 'LayoutSwitch' function does not work
• The bug is not consistent: it only occurs with certain PBI. I am attaching a report to test.
• There is no problem when we use powerbi-client without Angular (tested with powerbi-client v2.22.3)

Do you have any work-around to make it work as it is supposed to? Thanks in advance. Bug_Landscape_Portrait.zip

[v-MadhavC]

It is not supported to switch the layout from MobilePortrait to MobileLandscape, you need to first call powerbi.reset() to remove the iframe and then use powerbi.embed() with the same container.

For more information, refer to this documentation: Embedding a Power BI report with mobile layout in Power BI embedded analytics | Microsoft Learn