Adición de una página de aterrizaje a los objetos visuales de Power BI

La página de aterrizaje de un objeto visual de Power BI puede mostrar información en la tarjeta del objeto visual de Power BI antes de que la tarjeta obtenga datos. La página de aterrizaje de un objeto visual puede mostrar:

• Texto que explica cómo usar el objeto visual.
• Un vínculo al sitio web.
• Un vínculo a un vídeo.

En este artículo se explica cómo diseñar una página de aterrizaje para el objeto visual. La página de aterrizaje se muestra siempre que el objeto visual no contenga datos.

Nota

Desde la versión 2.3.0 de la API se admite el diseño de la página de aterrizaje de un objeto visual de Power BI. Para averiguar qué versión usa, compruebe apiVersion en el archivo pbiviz.json.

Creación de una página de aterrizaje

Para crear una página de aterrizaje, se deben configurar dos funcionalidades en el archivo capabilities.json.

• Para que la página de aterrizaje funcione, habilite supportsLandingPage.
• Para que la página de aterrizaje se muestre en modo de vista o para que el objeto visual sea interactivo incluso cuando no esté en modo de roles de datos, habilite supportsEmptyDataView.

    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

Ejemplo de un objeto visual con una página de aterrizaje

El código siguiente muestra cómo se puede agregar una página de aterrizaje a un objeto visual del gráfico de barras.

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

Pasos siguientes

Utilidades de formato