Partager via

Personnaliser une disposition de rapport

  • Article

Avec une disposition de rapport personnalisée, vous pouvez incorporer un rapport Power BI avec une disposition différente de celle enregistrée dans le rapport d’origine. Lorsque vous définissez une disposition de rapport personnalisée, vous pouvez varier la taille d’une page de rapport et contrôler la taille, la position et la visibilité des visuels sur la page.

Vue d’ensemble de la disposition personnalisée

Pour créer une disposition de rapport personnalisée, définissez un objet de disposition personnalisé et transmettez-le à l’objet de paramètres dans une configuration incorporée.

Dans l’objet paramètres, définissez layoutType sur models.LayoutType.Custom et définissez customLayout sur votre objet de disposition personnalisé :

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

Pour plus d’informations sur les paramètres de rapport, consultez Configurer les paramètres de rapport.

Guide pratique pour définir une disposition de rapport personnalisée

Chaque disposition de rapport personnalisée est représentée par un objet de disposition personnalisé que vous définissez pour spécifier la taille de page, l’échelle du canevas et la mise en page. Dans la disposition des pages, vous pouvez spécifier une disposition visuelle pour chaque visuel et une disposition visuelle par défaut pour le rapport.

Définition d’interface de disposition personnalisée

Utilisez l’interface ICustomLayout pour définir un objet de disposition personnalisé :

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

L’interface ICustomLayout a les propriétés suivantes :

  • pageSize - Objet IPageSize qui définit la taille de page de la zone de canevas du rapport.

    interface IPageSize {
    type: PageSizeType;
}

    L’objet IPageSize utilise l’énumération PageSizeType pour définir la taille de la page :

    enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}

  • displayOption : énumération DisplayOption qui contrôle la mise à l’échelle du canevas pour s’adapter au cadre.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout : objet PagesLayout qui contrôle la disposition de chaque visuel d’une page. Cette propriété mappe un nom de page à un objet PageLayout. Pour plus d’informations, consultez Définir une mise en page.

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

Définir une mise en page

Utilisez l’interface IPageLayout pour définir un objet de mise en page. L’interface vous permet de définir une carte de disposition visuelle, qui mappe chaque nom visuel à un nouvel objet de disposition et une disposition visuelle par défaut. La définition d’une mise en page est facultative. Si vous ne fournissez pas de disposition pour un rapport, Power BI applique la disposition par défaut au rapport. Autrement dit, la disposition par défaut s’applique à tous les visuels que vous ne spécifiez pas dans l’objet de disposition des visuels. Par exemple, vous pouvez initialement masquer tous les visuels d’un rapport, puis afficher les visuels sélectionnés dans la disposition de votre choix.

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

L’interface IPageLayout a les propriétés suivantes :

  • defaultLayout : objet IVisualLayout qui définit la disposition visuelle par défaut. La disposition par défaut est automatiquement appliquée à tous les visuels de la page de rapport.

    defaultLayout?: IVisualLayout

  • visualsLayout - Objet VisualsLayout qui définit une carte entre les noms visuels et les dispositions visuelles de la page de rapport.

    visualsLayout: VisualsLayout

    VisualsLayout = { [key: string]: IVisualLayout; }

Définir une disposition visuelle

Pour définir une disposition visuelle, utilisez l’interface IVisualLayout pour créer un objet de disposition visuelle et définir sa position, sa taille et sa visibilité.

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

L’interface IVisualLay out a les propriétés suivantes :

  • x,y,z : définit les coordonnées x, y et z du visuel.

  • width, height : définit la largeur et la hauteur du visuel.

  • displayState - Objet IVisualContainerDisplayState qui définit la visibilité du visuel.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    L’objet IVisualContainerDisplayState utilise l’énumération VisualContainerDisplayMode pour définir la visibilité :

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Mettre à jour la disposition

Pour mettre à jour la disposition du rapport lorsque le rapport est déjà chargé, utilisez la méthode report.updateSettings. Pour plus d’informations, consultez Mettre à jour les paramètres de rapport aud’exécution.

Exemple

Cet exemple de code complet montre comment incorporer un rapport avec une disposition de rapport personnalisée. Tous les visuels sont masqués à l’exception de deux visuels : VisualContainer1 et VisualContainer2. VisualContainer1 a une nouvelle disposition, position et taille, tandis que VisualContainer2 est visible avec la disposition par défaut du rapport.

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

let embedConfig = {
    type: 'report',
    id: reportId,
    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" : {
                    defaultLayout: {
                        displayState: {
                            mode: models.VisualContainerDisplayMode.Hidden
                        }
                    },
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                    }
                }
            }
        }
    }
};
...
// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfig);

Contenu connexe