Indítási URL-cím létrehozása

Indítási URL-cím létrehozásával megnyithat egy új böngészőlapot vagy ablakot úgy, hogy hozzáadja az host.launchUrl() API-hívást egy Power BI-vizualizáció kódjába.

Fontos

A host.launchUrl() metódust a Visuals API 1.9.0-s kiadásában vezettük be.

Minta

Importálja a IVisualHost felületet, és mentse az host objektumra mutató hivatkozást a vizualizáció konstruktorában.

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

    // ...
}

Usage

Használja az host.launchUrl() API-hívást, és adja át a cél URL-címét sztring argumentumként:

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

Korlátozások

• Csak abszolút elérési utakat használjon, relatív elérési utakat nem. Használjon például egy abszolút elérési utat, például https://some.link.net/subfolder/page.html. A relatív elérési út/page.html nem nyílik meg.

• Jelenleg csak HTTP - és HTTPS-protokollok támogatottak. Kerülje az FTP, a MAILTO és más protokollok használatát.

Ajánlott eljárások

• Általában a legjobb, ha csak a felhasználó explicit műveletére adott válaszként nyit meg egy hivatkozást. A felhasználó könnyen megértheti, hogy a hivatkozásra vagy a gombra kattintva új lap nyílik meg. Zavaró vagy bosszantó lehet a felhasználó számára, ha egy launchUrl() hívás egy felhasználó beavatkozása nélkül vagy egy másik művelet mellékhatásaként aktiválódik.

• Ha a hivatkozás nem elengedhetetlen a vizualizáció megfelelő működéséhez, javasoljuk, hogy adjon módot a jelentés szerzőjének a hivatkozás letiltására és elrejtésére. A Power BI speciális használati esetei, például egy jelentés beágyazása egy külső alkalmazásba vagy a webes közzététel, szükségessé tehetik a hivatkozás letiltását és elrejtését.

• Kerülje a hívás indítását launchUrl() egy hurokból, a vizualizáció függvényéből update vagy bármely más gyakran ismétlődő kódból.

Példa lépésről lépésre

Hivatkozásindító elem hozzáadása

Adja hozzá a következő sorokat a vizualizáció függvényéhez constructor :

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

Adjon hozzá egy privát függvényt, amely létrehozza és csatolja a horgonyelemet:

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

Adja meg a hivatkozáselem stílusát a visual.less fájl egyik bejegyzésével:

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

Összevonási mechanizmus hozzáadása

Ha összevonási mechanizmust szeretne hozzáadni, statikus objektumot kell hozzáadnia, hogy a jelentés szerzője ki tudja kapcsolni a hivatkozáselem láthatóságát. (Az alapértelmezett beállítás rejtett.) További információt a statikus objektum oktatóanyagában talál.

Adja hozzá a showHelpLink logikai statikus objektumot a capabilities.json fájl objektumbejegyzéséhez:

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

Adja hozzá a következő sorokat a vizualizáció függvényéhez update :

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

A rejtett osztály a visual.less fájlban van definiálva az elem megjelenítésének szabályozásához.