Изменение команд меню для визуального элемента отчета
Визуальные элементы в Power BI имеют меню, которые позволяют пользователям приложения изменять способ просмотра данных. Например, с помощью контекстного меню точки данных можно включать или исключать из визуального элемента. Меню Параметры можно использовать для экспорта данных, содержащихся в визуальном элементе, в электронную таблицу.
Откройте контекстное меню, щелкнув правой кнопкой мыши визуальный элемент или определенную точку данных в визуальном элементе.
Откройте меню Параметры , щелкнув многоточие в правом верхнем углу визуального элемента.
Примечание
Если заголовок визуального элемента скрыт, многоточие не отображается.
Этот API позволяет расширить эти меню, чтобы добавить команды для пользователей и улучшить работу приложения. Вы можете дополнительно настроить меню, скрывая или отключая действия. Например, можно скрыть встроенную команду Spotlight для меню параметров.
Изменение команд меню
Измените меню с помощью для extensions
добавления команд и commands
изменения способа отображения встроенных команд.
Вы можете настроить API для работы с загрузкой отчета (конфигурация внедрения) или вызвать метод отчета updateSettings
для обновления добавленных элементов после загрузки отчета. Дополнительные сведения см. в разделах Настройка параметров отчета и Скрытие или отображение заголовков визуальных элементов.
Новые параметры меню применяются ко всем визуальным элементам в отчете. Чтобы применить параметр к определенному визуальному элементу, используйте селекторы.
Команды меню "Расширение"
Используйте следующие параметры для создания определения команды:
- name — имя команды.
- title — заголовок команды. Используется по умолчанию, если в и
visualOptionsMenu
нет переопределенияvisualContextMenu
. - icon(необязательно) — изображение, которое нужно отобразить в виде значка. Значки поддерживаются только в меню параметров.
- extend — определите меню, которое расширяет команда. Вы можете добавить команду в контекстное меню визуального элемента, меню параметров визуального элемента или в оба варианта. Также можно настроить свойства в каждом меню, например заголовок меню или расположение значка.
Добавьте определение команды в массив commands в объекте extensions, который передается в параметры отчета. Commands — это массив ICommandExtension внутри расширений, который имеет тип IExtensions.
let embedConfig = {
...
settings: {
extensions: {
commands: [...]
}
}
};
Необходимо также обработать commandTriggered
событие для новой команды. Это событие активируется специально для commandName
.
report.on("commandTriggered", function(event) {
let commandName = event.detail.command;
...
if (commandName === "command name") {
// Handler code
}
});
Дополнительные сведения об обработке событий см. в разделе Обработка событий.
Значки являются необязательными. Если вы решили использовать один из них, его необходимо преобразовать в Base 64. Пример допустимого значка Base 64 см. в следующем коде.
"data:image/png;base64,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"
Ниже приведен полный пример кода для добавления расширения команды меню.
// 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);
});
Установка расположения пункта меню
Команды добавляются в нижнюю часть меню по умолчанию. Для несгруппированных команд можно использовать menuLocation
свойство , чтобы указать, будет ли команда размещена в верхней или нижней части меню.
Примечание
При добавлении нескольких расширений в верхнюю часть меню последнее добавленное расширение будет находиться в верхней части.
Например, следующий код позволяет задать расширение команды "Параметры" в верхней части меню и команду контекстного меню в нижней части меню.
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
}
}
}]
}
Команды группирования в подменю
Вы можете создать подменю для группирования команд со следующими параметрами:
- name — имя группы. Это уникальный идентификатор группы.
- title — заголовок, отображающийся в меню.
- menuLocation(необязательно) — укажите, будет ли группа размещаться в верхней или нижней части меню.
Определение группы должно быть добавлено в массив groups, который является массивом IMenuGroupExtension, внутри объекта extensions.
Если вы решили использовать значение расположения меню, Top
разместит группу в верхней части меню во время добавления первой команды группы. Если оно не используется или используется Bottom
, группа будет добавлена в нижней части меню во время добавления первой команды группы.
Чтобы добавить команду в группу, определенную в массиве groupName
групп, добавьте свойство в команду .
Приведенный ниже код является полным примером добавления подменю в меню параметров с двумя командами внутри него.
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
}]
}
Настройка команд меню
Отображение встроенных команд имеет три режима отображения.
- Включено — команда отображается, если она доступна для визуального элемента.
- Отключено — команда отображается, если она доступна для визуального элемента, но неактивна (пользователь не может выбрать команду).
- Скрытый — команда не отображается.
Доступные в настоящее время встроенные команды:
- copy — копирование значения, выделения или визуального элемента. Доступно только в контекстном меню (визуальный элемент доступен только в режиме редактирования).
- drill — используйте режим детализации. Доступно только в контекстном меню.
- drillthrough — используйте функцию детализации . Доступно только в контекстном меню.
- expandCollapse — развертывание или свертывание выделенного фрагмента, всего уровня или всей иерархии. Доступно только в контекстном меню.
- exportData — экспорт данных, которые использовались для создания визуализации. Доступно только в меню параметров.
- includeExclude — включение или исключение точек данных. Доступно только в контекстном меню.
- removeVisual — удаление визуального элемента. Доступно только в меню параметров в режиме редактирования.
- search — переключение параметра поиска для среза. Доступно только в режиме редактирования.
- seeData — отображение данных, которые использовались для создания визуализации (также называется Показать как таблицу).
- sort — сортировка и выбор порядка сортировки значений по выбранному полю данных. Доступно только в меню параметров.
- spotlight — в центре внимания визуальный элемент. Доступно только в меню параметров.
- insightsAnalysis — отображение аналитических сведений о визуальном элементе. Доступно только в меню параметров.
- addComment — добавление комментария к визуальному элементу. Доступно только в меню параметров.
- groupVisualContainers — доступно только в контекстном меню в режиме редактирования.
- summarize — отображение сводки визуализации. Доступно только в контекстном меню.
- clearSelection — доступно только в контекстном меню.
Чтобы настроить отображение встроенных команд, определите и передайте объект команды в параметрах конфигурации внедрения. Команды — это массив ICommandsSettings.
let embedConfig = {
...
settings: {
commands: [...]
}
};
Приведенный ниже код представляет собой полный пример кода для добавления встроенных команд.
// 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);