Opprette en nettadresse for start

Ved å opprette en nettadresse for start, kan du åpne en ny nettleserfane eller et nytt vindu ved å legge til host.launchUrl() API-kallet i koden for et Power BI-visualobjekt.

Viktig

Metoden host.launchUrl() ble introdusert i Visuals API 1.9.0.

Eksempel

Importer grensesnittet IVisualHost , og lagre koblingen til host objektet i konstruktøren av visualobjektet.

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

    // ...
}

Bruk

host.launchUrl() Bruk API-kallet og send mål-URL-adressen som et strengargument:

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

Begrensninger

• Bruk bare absolutte baner, ikke relative baner. Bruk for eksempel en absolutt bane, for eksempel https://some.link.net/subfolder/page.html. Den relative banen,/page.html åpnes ikke.

• For øyeblikket støttes bare HTTP- og HTTPS-protokoller . Unngå FTP, MAILTO og andre protokoller.

Beste fremgangsmåter

• Vanligvis er det best å åpne en kobling bare som et svar på en brukers eksplisitte handling. Gjør det enkelt for brukeren å forstå at det å klikke koblingen eller knappen resulterer i å åpne en ny fane. Det kan være forvirrende eller frustrerende for brukeren hvis et launchUrl() anrop utløses uten en brukers handling eller som en bivirkning av en annen handling.

• Hvis koblingen ikke er viktig for at visualobjektet skal fungere som den skal, anbefaler vi at du gir forfatteren av rapporten en måte å deaktivere og skjule koblingen på. Spesielle Power BI-brukstilfeller, for eksempel innebygging av en rapport i et tredjepartsprogram eller publisering på nettet, kan kreve deaktivering og skjuling av koblingen.

• Unngå å utløse et launchUrl() anrop fra innsiden av en løkke, visualobjektets update funksjon eller andre regelmessige koder.

Et trinnvis eksempel

Legge til et koblingslanseringselement

Legg til følgende linjer i visualobjektets constructor funksjon:

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

Legg til en privat funksjon som oppretter og fester ankerelementet:

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

Definer stilen for koblingselementet med en oppføring i visualobjektet.less-filen :

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

Legge til en vekslemekanisme

Hvis du vil legge til en vekslemekanisme, må du legge til et statisk objekt slik at forfatteren av rapporten kan veksle mellom synligheten til koblingselementet. (Standardverdien er satt til skjult.) Hvis du vil ha mer informasjon, kan du se opplæringen for statisk objekt.

Legg til det showHelpLink boolske statiske objektet i capabilities.json-filens objektoppføring:

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

Legg til følgende linjer i visualobjektets update funksjon:

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

Den skjulte klassen er definert i visualobjektet.less-filen for å kontrollere visningen av elementet.