Een landingspagina toevoegen aan uw Power BI-visual
De landingspagina van een Power BI-visual kan informatie weergeven in uw Power BI-visualkaart voordat de kaart gegevens ophaalt. De landingspagina van een visual kan het volgende weergeven:
- Tekst waarin wordt uitgelegd hoe u de visual gebruikt.
- Een koppeling naar uw website.
- Een koppeling naar een video.
In dit artikel wordt uitgelegd hoe u een landingspagina voor uw visual ontwerpt. De landingspagina wordt weergegeven wanneer de visual geen gegevens bevat.
Notitie
Het ontwerpen van een power BI-visuallandingspagina wordt ondersteund in API-versie 2.3.0 en hoger. Als u wilt achterhalen welke versie u gebruikt, controleert u het apiVersion bestand in het pbiviz.json .
Landingspagina maken
Als u een landingspagina wilt maken, moeten er twee mogelijkheden in het capabilities.json bestand worden ingesteld.
- Schakel de landingspagina in om te werken
supportsLandingPage. - Als u wilt dat de landingspagina wordt weergegeven in de weergavemodus of dat de visual interactief moet zijn, zelfs wanneer u geen gegevensrollen gebruikt, schakelt u deze optie in.
supportsEmptyDataView
{
"supportsLandingPage": true,
"supportsEmptyDataView": true,
}
Voorbeeld van een visual met een landingspagina
De volgende code laat zien hoe een landingspagina kan worden toegevoegd aan een staafdiagramvisual.
export class BarChart implements IVisual {
//...
private element: HTMLElement;
private isLandingPageOn: boolean;
private LandingPageRemoved: boolean;
private LandingPage: d3.Selection<any>;
constructor(options: VisualConstructorOptions) {
//...
this.element = options.element;
//...
}
public update(options: VisualUpdateOptions) {
//...
this.HandleLandingPage(options);
}
private HandleLandingPage(options: VisualUpdateOptions) {
if(!options.dataViews || !options.dataViews[0]?.metadata?.columns?.length){
if(!this.isLandingPageOn) {
this.isLandingPageOn = true;
const SampleLandingPage: Element = this.createSampleLandingPage(); //create a landing page
this.element.appendChild(SampleLandingPage);
this.LandingPage = d3.select(SampleLandingPage);
}
} else {
if(this.isLandingPageOn && !this.LandingPageRemoved){
this.LandingPageRemoved = true;
this.LandingPage.remove();
}
}
}