Share via

Personalize top insights showcase

  • Article

The Personalize top insights showcase in the Power BI embedded analytics playground (preview) uses the custom layout API to let users select which visualizations and layouts to see during their report viewing session.

Power BI embedded custom report layouts control the size, position, and visibility of visuals on a report page. Use custom layouts to present different views to different users, or to let users personalize their own views. Custom layouts help users focus on their most important visualizations and insights.

You can also use custom layouts to resize visuals when window size changes, or to present different layouts for desktop, tablet, or mobile screens.

Custom layout showcase experience

In the Personalize top insights showcase, an imaginary conglomerate named Contoso uses a Power BI embedded report to show business data to their stakeholders. The embedded report loads with all nine available visualizations appearing in a two-column layout.

Select visuals

To choose only the visuals they most want to see, report users select the Choose visuals button. The Choose visuals drop-down list box opens, with all nine available visuals selected.

Users can clear the check boxes next to the visuals they don't want to see. Only the selected visuals appear in the report for the rest of that viewing session.

Screenshot showing the Choose visuals dialog box with three visuals selected and showing.

Selecting Choose visuals again closes the drop-down box. Users can select Choose visuals again to select different visuals or all nine visuals.

Select a layout

Users can also select Choose layout to drop down a palette of five different visualization layout choices. Selecting a layout option applies the selected layout and closes the palette.

Screenshot showing the layout palette with a three-column layout selected and applied.

Visuals and layout interaction

The Choose visuals and Choose layout controls in the application code are independent, but they interact. For example, if only one visual is showing, the one-column layout displays the visual at a larger size than the three-column layout.

Screenshot showing a single visual in a one-column layout.

Screenshot showing a single visual in a three-column layout.

Custom layout showcase code

The code for implementing the showcase application is in the PowerBI-Embedded-Showcases GitHub repository.

  • The application HTML code builds the report container, Choose visuals button and drop-down list, and Choose layout button and drop-down palette.

  • The report JavaScript embeds the report, calculates and configures the custom layout objects, and implements the default and personalized custom layouts.

To create a custom report layout, you pass a custom layout object to the settings property of the report embed configuration. To enable custom layouts, the report JavaScript uses the layoutType property with value models.LayoutType.Custom.

The customLayout object specifies the report canvas page size, canvas scaling, and page layout. Page layouts specify a default visual layout for the report, and visual layouts for each visual.

let settings = {
    ...
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: {
            type: models.PageSizeType.Custom,
            width: reportWidth - 10,
            height: reportHeight - 20
        },
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: pagesLayout
    }
};

To display selected visualizations and layouts, the showcase JavaScript dynamically creates the settings object and updates the embed configuration. The report loads with the selected visuals showing and the custom layout implemented.

Related content