Modifier les commandes de menu pour un visuel de rapport dans une application d’analytique incorporée Power BI

Article
01/18/2024

Les visuels dans Power BI ont des menus qui permettent aux utilisateurs de votre application de modifier la façon dont ils voient leurs données. Par exemple, à l’aide du menu contextuel , des points de données peuvent être inclus ou exclus d’un visuel. Le menu Options peut être utilisé pour exporter les données contenues dans un visuel vers une feuille de calcul.

Ouvrez le menu contextuel en cliquant avec le bouton droit sur un visuel ou un point de données spécifique dans un visuel.

Ouvrez le menu Options en sélectionnant les points de suspension dans le coin supérieur droit du visuel.

Notes

Si l’en-tête visuel d’un visuel est masqué, les points de suspension ne s’affichent pas.

Cette API permet d’étendre ces menus afin d’ajouter des commandes pour vos utilisateurs et d’améliorer l’expérience de l’application. Vous pouvez personnaliser davantage les menus en masquant ou en désactivant des actions. Par exemple, vous pouvez masquer la commande intégrée Spotlight pour le menu options.

Modifiez les menus en utilisant extensions pour ajouter des commandes et commands modifier l’affichage des commandes intégrées.

Vous pouvez configurer l’API pour qu’elle fonctionne sur le chargement du rapport (configuration incorporée), ou vous pouvez appeler la méthode de rapport updateSettings pour mettre à jour les éléments ajoutés après le chargement d’un rapport. Pour en savoir plus, consultez Configurer les paramètres de rapport et Masquer ou afficher les en-têtes visuels .

Les nouveaux paramètres de menu sont appliqués à tous les visuels du rapport. Pour appliquer un paramètre à un visuel spécifique, utilisez sélecteurs.

Utilisez les paramètres suivants pour générer une définition de commande :

name : nom de la commande.
title : titre de la commande. Il est utilisé par défaut, s’il n’y a pas de remplacement à l’intérieur visualContextMenu et visualOptionsMenu.
icon(facultatif) : image que vous souhaitez afficher en tant qu’icône. Les icônes sont uniquement prises en charge dans le menu options.
extend : définissez le menu que la commande étend. Vous pouvez ajouter la commande au menu contextuel visuel, au menu d’options visuelles ou aux deux. Il est également possible de personnaliser les propriétés de chaque menu, comme le titre du menu ou l’emplacement de l’icône.

Ajoutez la définition de commande au tableau de commandes dans l’objet extensions, qui est passé aux paramètres du rapport. Commands est un tableau d’ICommandExtension à l’intérieur des extensions, qui est de type IExtensions.

let embedConfig = {
    ...
    settings: {
        extensions: {
            commands: [...]
        }
    }
};

Vous devez également gérer l’événement commandTriggered pour la nouvelle commande. Cet événement est déclenché spécifiquement pour .commandName

report.on("commandTriggered", function(event) {
    let commandName = event.detail.command;
    ...
    if (commandName === "command name") {
        // Handler code
    }
});

Pour plus d’informations sur la gestion des événements, consultez Comment gérer les événements.

Les icônes sont facultatives. Si vous choisissez d’en utiliser un, il doit être converti en Base 64. Consultez le code suivant pour obtenir un exemple d’icône base 64 valide.

"data:image/png;base64,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"

Le code suivant est un exemple de code complet pour ajouter une extension de commande de menu.

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

let embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Aad,
    accessToken: 'e4...rf',
    settings: {
        ...
        extensions: {
            commands: [{
                name: "command name",
                title: "command title",
                icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
                extend: {
                    visualContextMenu: {
                        title: "context menu title",
                    },
                    visualOptionsMenu: {
                        title: "options menu title",
                    }
                }
            }]
        }
    }
};

...

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

// Report.on will add an event handler to commandTriggered event which prints to console window.
report.on("commandTriggered", function (command) {
    console.log(command);
});

Les commandes sont ajoutées au bas du menu par défaut. Pour les commandes non groupées, vous pouvez utiliser la menuLocation propriété pour sélectionner si une commande est placée en haut ou en bas du menu.

Notes

Lors de l’ajout de plusieurs extensions en haut du menu, la dernière extension ajoutée se trouve en haut.

Par exemple, le code suivant vous permet de définir l’extension de commande du menu options en haut du menu et la commande de menu contextuel en bas du menu.

extensions: {
    commands: [{
       name: "command name",
       title: "command title",
       icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
       extend:
       {
           visualContextMenu: {
               title: "context menu title",
               menuLocation: models.MenuLocation.Bottom
           },
           visualOptionsMenu: {
               title: "options menu title",
               menuLocation: models.MenuLocation.Top
           }
       }
    }]
}

Regrouper les commandes dans un sous-menu

Vous pouvez créer un sous-menu pour regrouper des commandes avec les paramètres suivants :

name : nom du groupe. Il s’agit de l’identificateur unique de groupe.
title : titre à afficher dans le menu.
menuLocation(facultatif) : indiquez si le groupe est placé en haut ou en bas du menu.

La définition de groupe doit être ajoutée au tableau de groupes, qui est un tableau d’IMenuGroupExtension, à l’intérieur de l’objet extensions.

Si vous choisissez d’utiliser une valeur d’emplacement de menu, Top place le groupe en haut du menu au moment de l’ajout de la première commande du groupe. En cas d’utilisation non utilisée ou lors de l’utilisation de la Bottom valeur, le groupe est ajouté en bas du menu au moment de l’ajout de la première commande du groupe.

Pour ajouter une commande à un groupe qui a été défini dans le tableau de groupes, ajoutez la groupName propriété à la commande .

Le code ci-dessous est un exemple de code complet montrant comment ajouter un sous-menu au menu d’options avec deux commandes à l’intérieur.

extensions: {
    commands: [
        {
            name: "Command 1",
            title: "Command 1",
            extend: {
                visualOptionsMenu: {
                    groupName: "group-unique-identifier"
                }
            }
        },
        {
            name: "Command 2",
            title: "Command 2",
            extend: {
                visualOptionsMenu: {
                    groupName: "group-unique-identifier"
                }
            }
        }
    ],
    groups: [{
        name: "group-unique-identifier",
        title: "Group title",
        menuLocation: models.MenuLocation.Top
    }]
}

L’affichage des commandes intégrées a trois modes d’affichage.

Activé : la commande s’affiche si elle est disponible pour le visuel.
Désactivé : la commande s’affiche si elle est disponible pour le visuel, mais qu’elle est grisée (l’utilisateur ne peut pas sélectionner la commande).
Masqué : la commande n’apparaît pas.

Les commandes intégrées actuellement disponibles sont les suivantes :

copy : copiez la valeur, la sélection ou le visuel. Disponible uniquement sous le menu contextuel (le visuel est disponible uniquement en mode édition).
drill : utilisez le mode d’extraction. Disponible uniquement dans le menu contextuel.
extraction : utilisez la fonctionnalité d’extraction. Disponible uniquement dans le menu contextuel.
expandCollapse : développez ou réduisez la sélection, le niveau entier ou la hiérarchie entière. Disponible uniquement dans le menu contextuel.
exportData : exportez les données utilisées pour créer une visualisation. Disponible uniquement dans le menu options.
includeExclude : inclure ou exclure des points de données. Disponible uniquement dans le menu contextuel.
removeVisual : supprimez le visuel. Disponible uniquement sous le menu options en mode Édition.
search : activez l’option de recherche d’un segment. Disponible uniquement en mode édition.
seeData : affiche les données utilisées pour créer une visualisation (également appelée Afficher en tant que table).
tri : triez et sélectionnez l’ordre de tri des valeurs par un champ de données sélectionné. Disponible uniquement dans le menu options.
spotlight - Mettre en avant un visuel. Disponible uniquement dans le menu options.
insightsAnalysis : affichez des insights sur le visuel. Disponible uniquement sous le menu options.
addComment : ajoutez un commentaire au visuel. Disponible uniquement sous le menu options.
groupVisualContainers : disponible uniquement sous le menu contextuel en mode édition.
résumé : affiche un résumé de la visualisation. Disponible uniquement dans le menu contextuel.
clearSelection - Disponible uniquement dans le menu contextuel.

Pour personnaliser l’affichage des commandes intégrées, définissez et transmettez un objet de commande dans les paramètres de configuration incorporés. Les commandes sont un tableau d’ICommandsSettings.

let embedConfig = {
    ...
    settings: {
        commands: [...]
    }
};

Le code ci-dessous est un exemple de code complet pour l’ajout de commandes intégrées.

// The new settings that you want to apply to the report.
const newSettings = {
    commands: [
        {
            spotlight: {
                displayOption: models.CommandDisplayOption.Hidden,
            },
            drill: {
                displayOption: models.CommandDisplayOption.Disabled,
            }
        }
    ]
};

// Update the settings by passing in the new settings you have configured.
await report.updateSettings(newSettings);

Share via

Modifier les commandes de menu d’un visuel de rapport

Comment modifier les commandes de menu

Étendre les commandes de menu

Définir l’emplacement de l’élément de menu

Regrouper les commandes dans un sous-menu

Personnaliser les commandes de menu

Ressources supplémentaires

Share via

Modifier les commandes de menu d’un visuel de rapport

Comment modifier les commandes de menu

Étendre les commandes de menu

Définir l’emplacement de l’élément de menu

Regrouper les commandes dans un sous-menu

Personnaliser les commandes de menu

Contenu connexe

Ressources supplémentaires