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

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.

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

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 apiVersionsúbor pbiviz.json .

Vytvorenie stránky prvého kontaktu

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