Aangepaste indelingenCustom layouts

Gebruik een aangepaste indeling voor het insluiten van een rapport met een andere indeling dan het oorspronkelijke rapport.Use custom layout to embed a report with different layout than in an original report. Het definiëren van een nieuwe indeling kan betrekking hebben op het definiëren van slechts één paginagrootte, het bepalen van de grootte van visuele elementen, of op positie en zichtbaarheid.Defining a new layout varies between defining only a page size, controlling visual sizes, or position and visibility.

Als u een aangepaste indeling wilt definiëren, moet u een aangepast indelingsobject definiëren en deze doorgeven aan het instellingenobject in de insluitingsconfiguratie.To define a custom layout, define a custom layout object and pass it into the settings object in embed configuration. Stel ook LayoutType in op Aangepast.In addition, set LayoutType to Custom. Zie Configuratiedetails insluiten voor meer informatie.To learn more, see Embed Configuration Details.

var embedConfig = {
    ...
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {...}
    }
};

ObjectdefinitieObject Definition

interface ICustomLayout {
  pageSize?: IPageSize;
  displayOption?: DisplayOption;
  pagesLayout?: PagesLayout;
}

enum PageSizeType {
  Widescreen,
  Standard,
  Letter,
  Custom
}
interface IPageSize {
  type: PageSizeType;
}
interface ICustomPageSize extends IPageSize {
  width?: number;
  height?: number;
}

enum DisplayOption {
  FitToPage,
  FitToWidth,
  ActualSize
}
  • pageSize: gebruik de paginagrootte om de grootte van het tekengebied te bepalen (bijv. wit vlak in het rapport).pageSize: Use page size to control the canvas area size (i.e. report white area).
  • displayOptions: mogelijke waarden zijn: FitToWidth, FitToPage of ActualSize.displayOptions: Possible values are: FitToWidth, FitToPage or ActualSize. Hiermee bepaalt u de schaal waarop het canvas in het iframe past.It controls how to scale the canvas to fit into the iframe.
  • pagesLayout: hiermee bepaalt u de indeling voor elk visuele element.pagesLayout: Controls the layout for each visual. zie PagesLayout voor meer informatie.see PagesLayout for more details.

Indeling van de pagina 'sPages layout

Wanneer u een indelingsobject voor pagina’s definieert, definieert u als het ware een indeling voor elke pagina, en voor elke pagina definieert u een indeling voor elk visuele element.Defining a pages layout object is basically defining a layout for each page, and for each page, you define a layout for each visual. PageLayout is optioneel.PageLayout is optional. Als u geen indeling voor een pagina definieert, wordt de standaardindeling (die in het rapport is opgeslagen) toegepast.If you don't define a layout for a page, the default layout (which is saved in the report) will be applied.

pagesLayout is een toewijzing van de paginanaam aan het PageLayout-object.pagesLayout is a map from page name to PageLayout object. Definitie:Definition:

type PagesLayout = { [key: string]: IPageLayout; };

PageLayout bevat een visuele indelingstoewijzing, waarbij de naam van elk visuele element wordt toegewezen aan een visueel indelingsobject:PageLayout contains a visual layout map, which maps each visual name to a visual layout object:

interface IPageLayout {
  visualsLayout: { [key: string]: IVisualLayout; };
}

Visuele indelingVisual layout

Als u een visuele indeling wilt definiëren, voert u een nieuwe positie, grootte en zichtbaarheidsstatus in.To define a visual layout, pass a new position and size and a new visibility state.

interface IVisualLayout {
  x?: number;
  y?: number;
  z?: number;
  width?: number;
  height?: number;
  displayState?: IVisualContainerDisplayState;
}

interface IVisualContainerDisplayState {
  mode: VisualContainerDisplayMode;
}

enum VisualContainerDisplayMode {
  Visible,
  Hidden
}
  • x,y,z: hiermee definieert u de nieuwe positie van het visuele element.x,y,z: Defines the new position of the visual.
  • width, hoogte: hiermee definieert u de nieuwe grootte van het visuele element.width, height: Defines the new size of the visual.
  • displayState: hiermee definieert u de zichtbaarheid van het visuele element.displayState: Defines the visibility of the visual.

Indeling bijwerkenUpdate layout

U kunt de UpdateSettings-methode gebruiken om de indeling van het rapport op elk gewenst moment bij te werken terwijl het rapport wordt geladen.You can use updateSettings method to update the report layout any time while the report is loaded. Zie Instellingen bijwerken.See Update Settings.

Voorbeeld van codeCode example

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Embed,
    accessToken: 'H4...rf',
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
                pageSize: {
                    type: models.PageSizeType.Custom,
                    width: 1600,
                    height: 1200
                }
            },
            displayOption: models.DisplayOption.ActualSize,
            pagesLayout: {
                "ReportSection1" : {
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Hidden
                            }
                        },
                    }
                }
            }
        }
    }
};

// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, embedConfiguration);

Zie ookSee also

Dashboards, rapporten en tegels van Power BI insluiten Embed your Power BI dashboards, reports and tiles
Stel een vraag aan de Power BI-communityAsk the Power BI Community