Compartir a través de

Inserción de un informe de Power BI con diseño móvil

  • Artículo

Los usuarios móviles pueden ver cualquier página de informe de Power BI en orientación horizontal. Sin embargo, los autores de informes pueden crear una vista adicional optimizada para dispositivos móviles y mostrar en orientación vertical. Esta opción de diseño, que está disponible tanto en Power BI Desktop como en el servicio Power BI, permite a los autores seleccionar y reorganizar solo aquellos objetos visuales que tengan sentido para los usuarios móviles.

Si el informe tiene un diseño móvil que se creó en Power BI Desktop o en el servicio Power BI, puede insertar el informe con este diseño en la aplicación web.

Cómo insertar un informe mediante el diseño móvil

En primer lugar, debe crear un diseño móvil para el informe, consulte Optimizar informes de Power BI para la aplicación móvil para crear este diseño.

Para insertar un informe de Power BI en el diseño móvil del informe, debe establecer el layoutType en models.LayoutType.MobilePortrait en el objeto de configuración:

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Para obtener más información sobre la configuración del informe, consulte Configuración de las opciones de informe.

Hay dos tipos de diseño dedicados a dispositivos móviles:

  • MobilePortrait: optimizado para la vista vertical. Este es el diseño móvil que creó para el informe.

  • MobileLandscape: optimizado para la vista horizontal. Este es el diseño normal del informe.

Nota

El diseño del informe se determinará mediante la propiedad layoutType independientemente de la orientación real del dispositivo.

Por ejemplo, el código siguiente muestra cómo insertar el informe con un diseño móvil.

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Para actualizar el diseño del informe cuando el informe ya esté cargado, use el método report.updateSettings. Para obtener más información, consulte Actualizar la configuración del informe en tiempo de ejecución.

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

Comprobar si una página de informe tiene un diseño móvil

La clase Page Client de Power BI, define el método como:

hasLayout(layoutType: any): Promise<boolean>

El método hasLayout devolverá un valor booleano si la página tiene el tipo de diseño especificado.

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

Puede usar inserción por fases con hasLayout para comprobar si la página tiene diseño móvil antes de representar el informe.

Eventos de deslizar el dedo

Al insertar un informe en el diseño móvil, puede escuchar los eventos de deslizar el dedo y ejecutar un código personalizado en la aplicación web. Hay dos eventos de deslizamiento, swipeStart y swipeEnd ambos devuelven el siguiente formato:

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

Por ejemplo, puede usar el evento swipeEnd para detectar un dedo izquierdo:

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

Para obtener más información sobre el control de eventos, vea Cómo controlar eventos.

Optimización de la aplicación con diseños personalizados

También puede usar la característica de diseño personalizado para crear diseños personalizados optimizados para diferentes pantallas móviles o tabletas.

Consideraciones y limitaciones

  • Después de la carga inicial del informe, solo se admite cambiar al diseño móvil del informe si el diseño móvil (vertical/horizontal) se ha establecido en el objeto de configuración de inserción inicial. De lo contrario, primero debe llamar a powerbi.reset(HTMLElement) para quitar el iframe. A continuación, debe llamar a powerbi.embed(...) mediante el mismo contenedor con la configuración de diseño móvil definida en el objeto de configuración incrustado.

  • Si intenta insertar una página de informe con el diseño de MobilePortrait y la página no tiene un diseño móvil, la página se cargará con el diseño de MobileLandscape.

  • Para permitir que los usuarios naveguen entre páginas mientras usan diseños móviles, puede usar report.setPage e implementar su propia navegación. Para obtener más información, vea de navegación de páginas.

  • Las configuraciones anteriores hacen referencia a la inserción de un informe de Power BI en la vista móvil.
    La inserción de paneles se puede configurar para el diseño móvil con la configuración pageView: pageView: 'oneColumn'

Contenido relacionado