Jaa


URL-käynnistysosoiteen luominen

Url-käynnistysosoite antaa sinun avata uuden selainvälilehden tai ikkunan lisäämällä host.launchUrl() ohjelmointirajapinnan kutsun Power BI -visualisoinnin koodiin.

Muistiinpano

- host.launchUrl() menetelmä otettiin käyttöön visualisointien ohjelmointirajapinnassa 1.9.0.

Näyte

Tuo - IVisualHost liittymä ja tallenna linkki objektiin host visualisoinnin konstruktorissa.

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

    // ...
}

Käyttö

Käytä ohjelmointirajapinnan host.launchUrl() kutsua ja välitä kohde-URL merkkijonoargumenttina:

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

Parhaat käytännöt

  • Yleensä linkki kannattaa avata vain käyttäjän eksplisiittisen toiminnon vuoksi. Varmista, että käyttäjän on helppo ymmärtää, että linkin tai painikkeen napsauttaminen johtaa uuden välilehden avaamiseen. Voi olla käyttäjälle hämmentävää tai turhauttavaa, launchUrl() jos kutsu käynnistyy ilman käyttäjän toimia tai muun toiminnon sivuvaikutuksena.

  • Jos linkin toiminta ei ole olennaista visualisoinnin kannalta, on suositeltavaa antaa raportin tekijälle tapa poistaa linkki käytöstä ja piilottaa se. Power BI:n erityiskäyttötapaukset, kuten raportin upottaminen kolmannen osapuolen sovellukseen tai sen julkaiseminen verkkoon, saattavat edellyttää linkin poistamista käytöstä ja piilottamista.

  • Vältä käynnistämästä launchUrl() -kutsua silmukan sisältä, visualisoinnin update -toiminnosta tai mistä tahansa muusta usein toistuvasta koodista.

Vaiheittainen esimerkki

Lisää seuraavat rivit visualisoinnin -funktioon constructor :

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

Lisää yksityinen funktio, joka luo ja liittää ankkuri-elementin:

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

Määritä linkkielementin tyyli visual.less-tiedoston merkinnällä:

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

Vaihtomekanismin lisääminen

Jos haluat lisätä vaihtomekanismin, sinun on lisättävä staattinen objekti, jotta raportin tekijä voi muuttaa linkkielementin näkyvyyttä. (Oletusasetus on Piilotettu.) Jos haluat lisätietoja, katso staattisen objektin opetusohjelma.

showHelpLink Lisää staattinen totuusarvo-objekti capabilities.json tiedoston objektimerkintään:

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

Näyttökuva Power BI:n Visualisoinnit-ruudusta, jossa näkyy uusi Ota Ohje-painike käyttöön -vaihtoehto.

Lisää seuraavat rivit visualisoinnin update -funktioon:

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

Elementin näyttämisen hallintaan määritetty piilotettu luokka on määritetty visual.less-tiedostossa .

Huomioitavat asiat ja rajoitukset

  • Käytä vain absoluuttisia polkuja, älä suhteellisia. Käytä esimerkiksi absoluuttista polkua, kuten https://some.link.net/subfolder/page.html. Suhteellista polkua/page.html ei avata.

  • Tällä hetkellä vain HTTP- ja HTTPS-protokollat ovat tuettuja. Vältä protokollia FTP, MAILTO ja muut protokollat.