Tworzenie adresu URL uruchamiania

Adres URL uruchamiania umożliwia otwarcie nowej karty lub okna przeglądarki przez dodanie host.launchUrl() wywołania interfejsu API do kodu wizualizacji usługi Power BI.

Przykład

Zaimportuj IVisualHost interfejs i zapisz link do host obiektu w konstruktorze wizualizacji.

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;
        // ...
    }

    // ...
}

Użycie

Użyj wywołania interfejsu host.launchUrl() API i przekaż docelowy adres URL jako argument ciągu:

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

Najlepsze rozwiązania

• Zazwyczaj najlepiej jest otworzyć link tylko jako odpowiedź na jawną akcję użytkownika. Ułatw użytkownikowi zrozumienie, że kliknięcie linku lub przycisku powoduje otwarcie nowej karty. Może to być mylące lub frustrujące dla użytkownika, jeśli launchUrl() wywołanie wyzwala bez akcji użytkownika lub jako efekt uboczny innej akcji.

• Jeśli link nie jest niezbędny do prawidłowego działania wizualizacji, zalecamy nadanie autorowi raportu sposobu wyłączenia i ukrycia linku. Specjalne przypadki użycia usługi Power BI, takie jak osadzanie raportu w aplikacji innej firmy lub publikowanie go w Internecie, może wymagać wyłączenia i ukrycia linku.

• Unikaj wyzwalania wywołania launchUrl() wewnątrz pętli, funkcji wizualizacji update lub innego często cyklicznego kodu.

Przykład krok po kroku

Dodawanie elementu uruchamiania linków

Dodaj następujące wiersze do funkcji wizualizacji constructor :

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

Dodaj funkcję prywatną, która tworzy i dołącza element kotwicy:

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;
};

Zdefiniuj styl elementu linku z wpisem w pliku 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;
    }
}

Dodawanie mechanizmu przełączania

Aby dodać mechanizm przełączania, należy dodać obiekt statyczny, aby autor raportu mógł przełączać widoczność elementu linku. (Wartość domyślna jest ustawiona na ukrytą). Aby uzyskać więcej informacji, zobacz samouczek dotyczący obiektu statycznego.

showHelpLink Dodaj obiekt statyczny warunkowy do wpisu obiektów pliku capabilities.json:

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

Dodaj następujące wiersze w funkcji wizualizacji update :

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

Klasa ukryta jest zdefiniowana w pliku visual.less w celu kontrolowania wyświetlania elementu.

Rozważania i ograniczenia

• Używaj tylko ścieżek bezwzględnych, a nie ścieżek względnych. Na przykład użyj ścieżki bezwzględnej, takiej jak https://some.link.net/subfolder/page.html. Ścieżka/page.html względna nie zostanie otwarta.

• Obecnie obsługiwane są tylko protokoły HTTP i HTTPS . Unikaj protokołów FTP, MAILTO i innych.