Přidání cílové stránky do vizuálu Power BI

Cílová stránka vizuálu Power BI může před získáním dat zobrazit informace na kartě vizuálu Power BI. Cílová stránka vizuálu může zobrazit:

  • Text, který vysvětluje, jak vizuál používat
  • Odkaz na váš web.
  • Odkaz na video

Screenshot of a Power BI visual's example landing page.

Tento článek vysvětluje, jak navrhnout cílovou stránku vizuálu. Cílová stránka se zobrazí vždy, když vizuál neobsahuje žádná data.

Poznámka:

Návrh cílové stránky vizuálu Power BI je podporován v rozhraní API verze 2.3.0 a vyšší. Pokud chcete zjistit, kterou verzi používáte, podívejte se do apiVersionsouboru pbiviz.json .

Vytvoření cílové stránky

Pokud chcete vytvořit cílovou stránku, musí být v capabilities.json souboru nastaveny dvě funkce.

  • Aby cílová stránka fungovala, povolte supportsLandingPage.
  • Aby se cílová stránka zobrazovala v režimu zobrazení nebo aby byl vizuál interaktivní, i když není v režimu rolí dat, povolte supportsEmptyDataView.
    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

Příklad vizuálu s cílovou stránkou

Následující kód ukazuje, jak se dá cílová stránka přidat do vizuálu pruhového grafu.

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