Создание диалогового окна для визуального элемента Power BI

Статья
09/08/2023

При создании визуального элемента иногда полезно отображать дополнительную информацию клиенту в отдельном окне. Например, может понадобиться:

Отображение дополнительных сведений : например, текстовое примечание или видео
Диалоговое окно "Отображение входных данных" — например диалоговое окно "Дата"

В этих целях можно создать всплывающее окно диалогового окна диалогового окна, называемое диалоговым окном в этой статье.

Создание диалогового окна для визуального элемента

Чтобы настроить диалоговое окно, необходимо добавить два компонента в код:

Файл реализации— рекомендуется создать файл реализации для каждого диалогового окна.
Код для вызова диалогового окна . Чтобы вызвать диалоговое окно, добавьте код в visual.ts файл.

Создание файла реализации диалогового окна

Рекомендуется создать файл реализации для каждого создаваемого диалогового окна. Поместите файлы диалогового окна в папку src :

Screenshot showing the location of a dialog box implementation file called DatePickerDialog.ts in a Power BI visuals project.

Каждый файл реализации диалогового окна должен содержать следующие компоненты:

Класс диалогового окна
Класс результатов
Регистрация класса диалогового окна

Создание класса диалогового окна

Создайте класс диалогового окна для диалогового окна. После initialState его создания параметр openModalDialog передается подрядчику диалога. initialState Используйте объект для передачи параметров в диалоговое окно, чтобы повлиять на его поведение или внешний вид.

Код диалогового окна может использовать следующие IDialogHost методы:

IDialogHost.setResult(result:object) — Код диалогового окна возвращает объект результата, который передается обратно в вызывающий визуальный элемент.
IDialogHost.close(actionId: DialogAction, result?:object) — Код диалогового окна может программно закрыть диалоговое окно и предоставить результирующий объект обратно в вызывающий визуальный элемент.

Импортируется поверх файла:

import powerbi from "powerbi-visuals-api";
import DialogConstructorOptions = powerbi.extensibility.visual.DialogConstructorOptions;
import DialogAction = powerbi.DialogAction;
// React imports as an example
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import reactDatepicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

В этом примере требуется установить следующие пакеты:

    npm i react-dom react react-datepicker

Реализация класса:

export class DatePickerDialog {
    static id = "DatePickerDialog";

    constructor(options: DialogConstructorOptions, initialState: object) {
        const host = options.host;
        let pickedDate: Date;
        const startDate = new Date(initialState['startDate']);
        
        // Dialog rendering implementation
        ReactDOM.render(
            React.createElement(
                reactDatepicker,
                {
                    inline: true,
                    openToDate: startDate,
                    onChange: (date: Date) => {
                        pickedDate = date
                        host.setResult({ date: pickedDate })
                    }
                },
                null),
            options.element
        );

        document.addEventListener('keydown', e => {
            if (e.code == 'Enter' && pickedDate) {
                host.close(DialogAction.Close, {date: pickedDate});
            }
        });
    }
}

Создание класса результатов

Создайте класс, который возвращает результат диалогового окна, а затем добавьте его в файл реализации диалогового окна.

В приведенном ниже DatePickerDialogResult примере класс возвращает строку даты.

export class DatePickerDialogResult {
    date: string;
}

Добавление диалогового окна в список реестра

Каждый файл реализации диалогового окна должен содержать ссылку на реестр. Добавьте две строки в приведенном ниже примере в конец файла реализации диалогового окна. Первая строка должна совпадать в каждом файле реализации диалогового окна. Вторая строка выводит диалоговое окно; измените его в соответствии с именем класса диалогового окна.

globalThis.dialogRegistry = globalThis.dialogRegistry || {};
globalThis.dialogRegistry[DatePickerDialog.id] = DatePickerDialog;

Вызов диалогового окна

Перед созданием диалогового окна необходимо решить, какие кнопки будут включены. Визуальные элементы Power BI поддерживают следующие шесть кнопок диалогового окна:

export enum DialogAction {
        Close = 0,
        OK = 1,
        Cancel = 2,
        Continue = 3,
        No = 4,
        Yes = 5
    }

Каждое создаваемое диалоговое visual.ts окно должно вызываться в файле. В этом примере диалоговое окно определяется двумя кнопками действий.

import powerbi from "powerbi-visuals-api";
import DialogAction = powerbi.DialogAction;
const dialogActionsButtons = [DialogAction.OK, DialogAction.Cancel];

В этом примере диалоговое окно вызывается путем нажатия визуальной кнопки. Визуальная кнопка определяется как часть визуального конструктора в visual.ts файле.

Определение размера и положения диалогового окна

В API версии 4.0 или более поздней можно определить размер и положение диалогового окна с помощью DialogOpenOptions параметра openModalDialog. Чтобы узнать, какая версия используется, проверка apiVersion в файле pbiviz.json.

    export interface RectSize {
        width: number;
        height: number;
    }

    export interface DialogOpenOptions {
        title: string;
        size?: RectSize;
        position?: VisualDialogPosition;
        actionButtons: DialogAction[];
    }

Параметр позиции позволяет определить, где должно открыться диалоговое окно на экране. Можно открыть диалоговое окно в центре экрана или определить другую позицию относительно визуального элемента.

    const enum VisualDialogPositionType {
        Center = 0,
        RelativeToVisual = 1
    }

    export interface VisualDialogPosition {
        type: VisualDialogPositionType;
        left?: number;
        top?: number;
    }

Если тип не указан, поведение по умолчанию — открыть диалоговое окно в центре.
Позиция определяется в пикселях относительно левого верхнего угла визуального элемента.

В этом примере показано диалоговое окно выбора даты 250 x 300 пикселей 100 пикселей слева и 30 пикселей под верхней частью визуального элемента:

export class Visual implements IVisual {
    private target: HTMLElement;
    private host: IVisualHost;
 
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        this.target = options.element;
        const dialogActionsButtons = [DialogAction.OK, DialogAction.Cancel];

        const sectionDiv = document.createElement("div");

        const span = document.createElement("span");
        span.id = "datePicker";

        let button = document.createElement("button");
        button.id = "DateButton";
        button.innerText = "Date";

        button.onclick = (event) => {
            const initialDialogState = { startDate: new Date() };
            const position = {
                    type: VisualDialogPositionType.RelativeToVisual,
                    left: 100,
                    top: 30
            };

            const size = {width: 250, height: 300};
            const dialogOptions = {
                actionButtons: dialogActionsButtons,
                size: size,
                position: position,
                title: "Select a date"
            };
            this.host.openModalDialog(DatePickerDialog.id, dialogOptions, initialDialogState).
                then(ret => this.handleDialogResult(ret, span)).
                catch(error => this.handleDialogError(error, span));
        }
        sectionDiv.appendChild(button);
        sectionDiv.appendChild(span);
        this.target.appendChild(sectionDiv)
    }

    // Custom logic to handle dialog results
    private handleDialogResult( result: ModalDialogResult, targetElement: HTMLElement){
        if ( result.actionId === DialogAction.OK || result.actionId === DialogAction.Close) {
            const resultState = <DatePickerDialogResult> result.resultState;
            const selectedDate = new Date(resultState.date);
            targetElement.textContent = selectedDate.toDateString();
        }
    }

    // Custom logic to handle errors in dialog
    private handleDialogError( error: any, targetElement: HTMLElement ) {
        targetElement.textContent = "Error: " + JSON.stringify(error);
    }
}

Определение способа закрытия диалогового окна

Предпочтительный способ закрытия диалогового окна — это пользователь, щелкнув кнопку [x], одну из кнопок действия или фон отчета.

Вы также можете программировать диалоговое окно для автоматического IDialogHost закрытия путем вызова метода закрытия. Этот метод блокируется в течение пяти секунд после открытия диалогового окна, чтобы самое раннее автоматическое закрытие диалогового окна было равно 5 секунд после его запуска.

Не показывать диалоговое окно

Откроется диалоговое окно с проверка box, которое дает пользователю возможность блокировать диалоговые окна.

Screenshot showing a checkbox giving the option to block dialog boxes.

Этот проверка box — это функция безопасности, которая запрещает визуальному элементу создавать модальные диалоги (намеренно или нет) без согласия пользователя.

Эта блокировка действует только для текущего сеанса. Таким образом, если пользователь блокирует модальные диалоги CV, но позже изменяет свое мнение, они могут повторно включить диалоги. Для этого необходимо запустить новый сеанс (обновить страницу отчетов в служба Power BI или перезапустить Power BI Desktop).

Максимальное/минимальное значение	Ширина	Высота
Максимум	90 % ширины браузера	90 % высоты браузера
Минимум	240 пикселей	210 пикселей

Поделиться через

Создание диалогового окна для визуального элемента Power BI

Рекомендации по диалоговым окнам

Создание диалогового окна для визуального элемента

Создание файла реализации диалогового окна

Создание класса диалогового окна

Создание класса результатов

Добавление диалогового окна в список реестра

Вызов диалогового окна

Определение размера и положения диалогового окна

Определение способа закрытия диалогового окна

Не показывать диалоговое окно

Рекомендации и ограничения

Обратная связь

Обратная связь

Дополнительные ресурсы

Поделиться через

Создание диалогового окна для визуального элемента Power BI

Рекомендации по диалоговым окнам

Создание диалогового окна для визуального элемента

Создание файла реализации диалогового окна

Создание класса диалогового окна

Создание класса результатов

Добавление диалогового окна в список реестра

Вызов диалогового окна

Определение размера и положения диалогового окна

Определение способа закрытия диалогового окна

Не показывать диалоговое окно

Рекомендации и ограничения

Связанный контент

Обратная связь

Обратная связь

Дополнительные ресурсы