Vytvorenie URL adresy na spustenie

URL adresa na spustenie umožňuje otvorenie novej karty alebo okna prehliadača pridaním host.launchUrl() volania rozhrania API do kódu vizuálu služby Power BI.

Dôležité

Metóda host.launchUrl() bola zavedená v rozhraní API vizuálov, vo verzii 1.9.0.

a marketingu

IVisualHost Importujte rozhranie a uložte prepojenie na host objekt v konštruktore 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žitie

host.launchUrl() Ako argument reťazca použite volanie rozhrania API a odovzdajte cieľovú URL adresu:

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

Obmedzenia

• Používajte iba absolútne cesty, nie relatívne. Použite napríklad absolútnu cestu .https://some.link.net/subfolder/page.html Relatívna cesta/page.html, , sa neotvorí.

• V súčasnosti sú podporované iba protokoly HTTP a HTTPS . Nepoužívajte protokoly FTP, MAILTO a iné protokoly.

Osvedčené postupy

• Vo väčšine prípade je najlepšie otvoriť prepojenie iba ako odpoveď na explicitnú akciu používateľa. Uistite používateľovi, aby pochopil, že kliknutím na prepojenie alebo tlačidlo sa otvorí nová karta. Pre používateľa môže byť mätúce alebo frustrujúce, ak launchUrl() sa volanie spustí bez akcie používateľa alebo ako vedľajší účinok inej akcie.

• Ak prepojenie nie je nevyhnutné na správne fungovanie vizuálu, odporúča sa poskytnúť autorovi zostavy spôsob, ako prepojenie vypnúť a skryť. Špeciálne prípady použitia služby Power BI, ako je napríklad vloženie zostavy do aplikácie tretej strany alebo publikovanie na webe, môžu vyžadovať zakázanie a skrytie prepojenia.

• Vyhnite sa spusteniu launchUrl() volania funkcie priamo zo slučky, z funkcie vizuálu update alebo z akéhokoľvek iného často opakujúceho sa kódu.

Podrobný príklad

Pridanie prvku na spustenie prepojenia

Do funkcie vizuálu pridajte nasledujúce riadky constructor :

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

Pridajte súkromnú funkciu, ktorá vytvorí a priloží prvok ukotvenia:

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 štýl prvku prepojenia so položkou v súbore 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;
    }
}

Pridanie mechanizmu prepínania

Ak chcete pridať mechanizmus prepínania, musíte pridať statický objekt, aby autor zostavy mohol prepínať viditeľnosť prvku prepojenia. (Predvolená hodnota je nastavená na možnosť skrytý.) Ďalšie informácie nájdete v kurze statického objektu.

showHelpLink Pridajte booleovský statický objekt do položky objektov súboru capabilities.json:

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

Do funkcie vizuálu pridajte nasledujúce riadky update :

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

Trieda skryté je definovaná v súbore visual.less na ovládanie zobrazenia prvku.