Personnaliser une disposition de rapport

Article
09/17/2023

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 mise en page 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 et définissez-le layoutTypemodels.LayoutType.CustomcustomLayout 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 de canevas et la mise en page des pages. Dans la mise en page des pages, vous pouvez spécifier une disposition visuelle pour chaque visuel et une disposition visuelle par défaut pour le rapport.

Définition de l’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 page :
```
enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}
```
displayOption - Énumération DisplayOption qui contrôle la mise à l’échelle du canevas à ajuster dans le cadre.
```
enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}
```
pagesLayout - Objet PagesLayout qui contrôle la disposition de chaque visuel sur une page. Cette propriété mappe un nom de page à un PageLayout objet. Pour plus d’informations, consultez Définir une mise en page de pages.
```
type PagesLayout = { [key: string]: IPageLayout; }
```

Définir une disposition de pages

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 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 possède 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 IVisualLayout possède 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 report.updateSettings méthode. Pour plus d’informations, consultez Mettre à jour les paramètres du rapport au moment de l’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);

Étapes suivantes

Obtenir des pages et des visuels

Configurer les paramètres de rapport