Создание URL-адреса запуска

Создав URL-адрес запуска, вы можете открыть новую вкладку браузера или окно, добавив host.launchUrl() вызов API в код визуального элемента Power BI.

Важно!

Этот host.launchUrl() метод был представлен в API Visuals 1.9.0.

Пример

IVisualHost Импортируйте интерфейс и сохраните ссылку на host объект в конструкторе визуального элемента.

import powerbi from "powerbi-visuals-api";
import IVisualHost = powerbi.extensibility.visual.IVisualHost;

export class Visual implements IVisual {
    private host: IVisualHost;
    // ...
    constructor(options: VisualConstructorOptions) {
        // ...
        this.host = options.host;
        // ...
    }

    // ...
}

Использование

host.launchUrl() Используйте вызов API и передайте URL-адрес назначения в качестве строкового аргумента:

this.host.launchUrl('https://some.link.net');

Ограничения

• Используйте только абсолютные пути, а не относительные пути. Например, используйте абсолютный путь, например https://some.link.net/subfolder/page.html. Относительный путь/page.html не будет открыт.

• В настоящее время поддерживаются только протоколы HTTP и HTTPS . Избегайте ftp, MAILTO и других протоколов.

Рекомендации

• Как правило, лучше всего открыть ссылку только в качестве ответа на явное действие пользователя. Чтобы пользователь понимал, что нажатие ссылки или кнопки приводит к открытию новой вкладки. Это может быть запутано или разочаровано для пользователя, если launchUrl() вызов активируется без действия пользователя или в качестве побочных эффектов другого действия.

• Если ссылка не важна для правильной работы визуального элемента, рекомендуется предоставить автору отчета способ отключить и скрыть эту ссылку. Специальные варианты использования Power BI, такие как внедрение отчета в стороннее приложение или публикация его в Интернете, могут потребовать отключения и скрытия ссылки.

• Избегайте активации launchUrl() вызова из цикла, функции визуального элемента update или любого другого часто повторяющегося кода.

Пошаговый пример

Добавление элемента link-запуска

Добавьте следующие строки в функцию визуального constructor элемента:

    this.helpLinkElement = this.createHelpLinkElement();
    options.element.appendChild(this.helpLinkElement);

Добавьте частную функцию, которая создает и присоединяет элемент привязки:

private createHelpLinkElement(): Element {
    let linkElement = document.createElement("a");
    linkElement.textContent = "?";
    linkElement.setAttribute("title", "Open documentation");
    linkElement.setAttribute("class", "helpLink");
    linkElement.addEventListener("click", () => {
        this.host.launchUrl("https://learn.microsoft.com/power-bi/developer/visuals/custom-visual-develop-tutorial");
    });
    return linkElement;
};

Определите стиль элемента ссылки с записью в файле visual.less :

.helpLink {
    position: absolute;
    top: 0px;
    right: 12px;
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #80B0E0;
    border-radius: 20px;
    color: #80B0E0;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    background-color: #FFFFFF;
    transition: all 900ms ease;

    &:hover {
        background-color: #DDEEFF;
        color: #5080B0;
        border-color: #5080B0;
        transition: all 250ms ease;
    }

    &.hidden {
        display: none;
    }
}

Добавление механизма переключения

Чтобы добавить механизм переключения, необходимо добавить статический объект, чтобы автор отчета смог переключить видимость элемента ссылки. (По умолчанию задано значение hidden.) Дополнительные сведения см. в руководстве по статическим объектам.

Добавьте логический статический showHelpLink объект в запись объектов capabilities.json :

"objects": {
    "generalView": {
            "displayName": "General View",
            "properties":
                "showHelpLink": {
                    "displayName": "Show Help Button",
                    "type": {
                        "bool": true
                    }
                }
            }
        }
    }

Добавьте следующие строки в функцию визуального update элемента:

if (settings.generalView.showHelpLink) {
    this.helpLinkElement.classList.remove("hidden");
} else {
    this.helpLinkElement.classList.add("hidden");
}

Скрытый класс определяется в файле visual.less для управления отображением элемента.