Zdieľať cez

Pridanie stránky prvého kontaktu do vizuálu služby Power BI

  • Článok

Stránka prvého kontaktu vizuálu power BI môže zobraziť informácie na karte vizuálu služby Power BI ešte predtým, ako karta získa údaje. Zobrazí sa stránka prvého kontaktu vizuálu:

  • Text, ktorý vysvetľuje, ako používať vizuál.
  • Prepojenie na vašu webovú lokalitu.
  • Prepojenie na video.

Snímka obrazovky zobrazujúca príklad stránky prvého kontaktu vizuálu služby Power BI.

Tento článok vysvetľuje, ako navrhnúť stránku prvého kontaktu pre vizuál. Stránka prvého kontaktu sa zobrazí vždy, keď vizuál neobsahuje žiadne údaje.

Poznámka

Navrhovanie stránky prvého kontaktu vizuálu služby Power BI je podporované vo verzii 2.3.0 a novšej v rozhraní API. Ak chcete zistiť, ktorú verziu používate, pozrite si apiVersion pbiviz.json súbore.

Vytvorenie vstupnej stránky

Ak chcete vytvoriť stránku prvého kontaktu, v súbore capabilities.json musia byť nastavené dve možnosti.

  • Ak má stránka prvého kontaktu fungovať, povoľte .supportsLandingPage
  • Stránka prvého kontaktu sa zobrazí v režime zobrazenia alebo aby bol vizuál interaktívny, aj keď nie je v režime bez rolí údajov, povoľte .supportsEmptyDataView
    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

Príklad vizuálu so stránou prvého kontaktu

Nasledujúci kód zobrazuje, ako je možné pridať stránku prvého kontaktu 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();
                }
        }
    }

Súvisiaci obsah

Pomôcky pre formátovanie