Vytvoření adresy URL pro spuštění

Vytvořením spouštěcí adresy URL můžete otevřít novou kartu prohlížeče nebo okno přidáním host.launchUrl() volání rozhraní API do kódu vizuálu Power BI.

Důležité

Metoda host.launchUrl() byla představena v rozhraní VISUALS API 1.9.0.

Vzorek

Importujte IVisualHost rozhraní a uložte odkaz na host objekt v konstruktoru vizuálu.

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

    // ...
}

Využití

host.launchUrl() Jako řetězcový argument použijte volání rozhraní API a předejte cílovou adresu URL:

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

Omezení

• Používejte pouze absolutní cesty, nikoli relativní cesty. Například použijte absolutní cestu, například https://some.link.net/subfolder/page.html. Relativní cesta/page.html se neotevře.

• V současné době se podporují jenom protokoly HTTP a HTTPS . Vyhněte se ftp, MAILTO a dalším protokolům.

Doporučené postupy

• Obvykle je nejlepší otevřít odkaz pouze jako odpověď na explicitní akci uživatele. Aby uživatel snadno pochopil, že kliknutím na odkaz nebo tlačítko otevřete novou kartu. Může to být pro uživatele matoucí nebo frustrující, pokud launchUrl() se volání aktivuje bez akce uživatele nebo jako vedlejší účinek jiné akce.

• Pokud odkaz není pro správné fungování vizuálu nezbytný, doporučujeme, abyste autorovi sestavy poskytli způsob, jak odkaz zakázat a skrýt. Speciální případy použití Power BI, jako je vložení sestavy do aplikace třetí strany nebo jeho publikování na webu, můžou vyžadovat zakázání a skrytí odkazu.

• Vyhněte se aktivaci launchUrl() volání uvnitř smyčky, funkce vizuálu update nebo jakéhokoli jiného často opakujícího se kódu.

Podrobný příklad

Přidání elementu link-launching

Do funkce vizuálu constructor přidejte následující řádky:

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

Přidejte privátní funkci, která vytvoří a připojí element ukotvení:

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

Definujte styl elementu odkazu s položkou v souboru 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;
    }
}

Přidání mechanismu přepínání

Pokud chcete přidat mechanismus přepínání, musíte přidat statický objekt, aby autor sestavy mohl přepnout viditelnost prvku odkazu. (Výchozí hodnota je nastavená na skrytou.) Další informace najdete v kurzu statického objektu.

showHelpLink Přidejte logický statický objekt do položky objektů souboru capabilities.json:

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

Do funkce vizuálu update přidejte následující řádky:

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

Skrytá třída je definována v souboru visual.less pro řízení zobrazení prvku.