Embedding Power BI with custom page view: fitToWidth, fitToPage, ActualSize

[EduardD]

Hi folks, we are embedding for the organization and want to hide ActionBar from end user but need to emulate some functions such as a changing page View, so user could switch between  fitToWidth, fitToPage, ActualSize. I tried multiple embedding options but none of them worked (I used MSFT Dev playground to test). I wonder if you could advise why it is not working.
1) 

settings: {
                     layoutType: models.LayoutType.Custom,
                     customLayout: {
                        displayOption: models.DisplayOption.FitToPage
                     }
                  }

2) 

var config = {
 type: 'report',
 tokenType: models.TokenType.Embed,
 accessToken: accessToken,
 embedUrl: embedUrl,
 pageView: "fitToWidth", 
 id: embedDashboardId
 };

[hackcrr]

Hi, @EduardD 

In Power BI Embedded, if you want to hide the ActionBar but at the same time allow the user to toggle page views (e.g. fitToWidth, fitToPage, ActualSize), this usually means that you will need to customize the embedded Power BI Report or Dashboard interface and add custom controls to emulate these features. To be clear, it's not possible to hide the ActionBar directly through Power BI Embedded's configuration options and keep the page view toggle functionality at the same time, since the ActionBar usually contains these toggle buttons. However, you can do it in the following way:

In an embedded configuration, you can't hide the ActionBar directly through a configuration option; however, you can hide it through CSS overrides. This usually involves applying CSS styles to the embedded iframe or div element. This is a common technique used by front-end developers.

Add custom controls:
You need to create a custom user interface (UI) that contains buttons to switch page views. When a user clicks these buttons, you can send commands to change the page view via the Power BI JavaScript API.
Use the JavaScript API to change the page view:
The Power BI JavaScript API allows you to change the page view of a report. You can do this using the setPageView method. However, note that the setPageView method is called on the report object and not set in the embedded configuration.

The following is a sample Javascript API code:

// Assuming you already have a report object (obtained via the embed method).  
  
// Switch to the fitToWidth view  
report.setPageView('fitToWidth'); // Switch to fitToPage view.  
  
// Switch to the fitToPage view.  
report.setPageView('fitToPage'); // Switch to fitToPage view; // Switch to ActualSize view.  
  
// switch to ActualSize view (note: 'actualSize' may not be a directly supported option, but can be implemented in other ways)  
// Typically, 'actualSize' means that the report is displayed at its original size on the screen, which may require you to resize the iframe or use other techniques.

Best Regards,

hackcrr

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[EduardD]

@hackrr thank you for the quick response.  
Did I get it right that there are 2 otpions: 
Option 1: we keep ActionBar in embed Config but with CSS hide all other buttons accept pageView. 
Option 2: in Embde Config we set ActionBat visibility to false (hiding it), then create custom button on the portal that calls these Java Script APIs for already embeded report:  report.setPageView('fitToPage) or report.setPageView('fitToWidth) ?

I tried option 2 in the Power BI playground, but it seems it didn't work. At the same time report.FullScreen() worked well. I wonder if you could have any ideas why it didn't work. 
The way I tested: I changed embedded report zoom to 70%, then inserted report.setPageView('fitToWidth) into the code after embedding, ran the code again but it didn't change the page view (zoom).

Thank you in advance.

[hackcrr · Accepted solution]

Hi, @EduardD 

To embed a report without an ActionBar, you need to modify the settings in the embedding configuration. Here is an example:

var embedConfig = {
    type: 'report',
    tokenType: models.TokenType.Embed,
    accessToken: accessToken,
    embedUrl: embedUrl,
    id: embedDashboardId,
    settings: {
        panes: {
            filters: { visible: false },
            pageNavigation: { visible: false },
        },
        layoutType: models.LayoutType.Custom,
        customLayout: {
            displayOption: models.DisplayOption.FitToPage // Default display option
        }
    }
};

// Embed the report
powerbi.embed(reportContainer, embedConfig);

You can provide buttons or other UI elements for the user to toggle actualSize between fitToWidth, fitToPage, and Attach event listeners to these UI elements to call the appropriate Power BI JavaScript API methods.
This is an example of using a button:

<button id="fitToWidth">Fit to Width</button>
<button id="fitToPage">Fit to Page</button>
<button id="actualSize">Actual Size</button>

<div id="reportContainer" style="height: 500px; width: 100%;"></div>

In JavaScript, add event listeners to handle button clicks and change display options:

// Reference to the embedded report
var report;

// Embed the report
function embedReport() {
    var embedConfig = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedDashboardId,
        settings: {
            panes: {
                filters: { visible: false },
                pageNavigation: { visible: false },
            },
            layoutType: models.LayoutType.Custom,
            customLayout: {
                displayOption: models.DisplayOption.FitToPage // Default display option
            }
        }
    };

    report = powerbi.embed(reportContainer, embedConfig);
}

// Call the function to embed the report
embedReport();

// Event listeners for the buttons
document.getElementById('fitToWidth').addEventListener('click', function() {
    report.updateSettings({
        layoutType: models.LayoutType.Custom,
        customLayout: {
            displayOption: models.DisplayOption.FitToWidth
        }
    });
});

document.getElementById('fitToPage').addEventListener('click', function() {
    report.updateSettings({
        layoutType: models.LayoutType.Custom,
        customLayout: {
            displayOption: models.DisplayOption.FitToPage
        }
    });
});

document.getElementById('actualSize').addEventListener('click', function() {
    report.updateSettings({
        layoutType: models.LayoutType.Custom,
        customLayout: {
            displayOption: models.DisplayOption.ActualSize
        }
    });
});

Ensure that models are referenced correctly from the Power BI JavaScript API library. Double-check the configuration settings and ensure that the correct properties and values are used. Ensure that accessToken and embedUrl are valid and have the necessary permissions.

Best Regards,

hackcrr

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[EduardD]

@hackcrr thank you so much!