Vytvorenie URL adresy na spustenie
URL adresa na spustenie umožňuje otvoriť novú kartu alebo okno prehliadača pridaním host.launchUrl()
volania rozhrania API do kódu vizuálu služby Power BI.
Poznámka
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;
// ...
}
// ...
}
Použ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');
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áluupdate
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 capabilities.json súboru:
"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.
Dôležité informácie a 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.