Compartir a través de


Personalización de la presentación de conclusiones principales

La Personalizar información superior mostrar en el área de juegos de análisis insertado de Power BI (versión preliminar) de usa la API de diseño personalizado para permitir a los usuarios seleccionar qué visualizaciones y diseños ver durante su sesión de visualización de informes.

Power BI embedded diseños de informe personalizados controlar el tamaño, la posición y la visibilidad de los objetos visuales en una página de informe. Use diseños personalizados para presentar diferentes vistas a distintos usuarios o para permitir que los usuarios personalicen sus propias vistas. Los diseños personalizados ayudan a los usuarios a centrarse en sus visualizaciones e información más importantes.

También puede usar diseños personalizados para cambiar el tamaño de los objetos visuales cuando cambia el tamaño de la ventana o para presentar diferentes diseños para pantallas de escritorio, tableta o móviles.

Experiencia de presentación de diseño personalizado

En la presentación de Personalizar las conclusiones principales, unglómero imaginario denominado Contoso usa un informe insertado de Power BI para mostrar los datos empresariales a sus partes interesadas. El informe incrustado se carga con las nueve visualizaciones disponibles que aparecen en un diseño de dos columnas.

Selección de objetos visuales

Para elegir solo los objetos visuales que más quieren ver, los usuarios del informe seleccionan el botón Elegir objetos visuales. Se abre el cuadro de lista desplegable Elegir objetos visuales, con los nueve objetos visuales disponibles seleccionados.

Los usuarios pueden desactivar las casillas situadas junto a los objetos visuales que no quieren ver. Solo los objetos visuales seleccionados aparecen en el informe para el resto de esa sesión de visualización.

Captura de pantalla que muestra el cuadro de diálogo Elegir objetos visuales con tres objetos visuales seleccionados y mostrados.

Al seleccionar Elegir objetos visuales de nuevo se cierra el cuadro desplegable. Los usuarios pueden seleccionar Elegir objetos visuales de nuevo para seleccionar objetos visuales diferentes o los nueve objetos visuales.

Selección de un diseño

Los usuarios también pueden seleccionar Elegir diseño para colocar una paleta de cinco opciones de diseño de visualización diferentes. Al seleccionar una opción de diseño se aplica el diseño seleccionado y se cierra la paleta.

Captura de pantalla que muestra la paleta de diseño con un diseño de tres columnas seleccionado y aplicado.

Interacción de objetos visuales y diseño

Los Elegir objetos visuales y Elegir controles de diseño en el código de aplicación son independientes, pero interactúan. Por ejemplo, si solo se muestra un objeto visual, el diseño de una columna muestra el objeto visual con un tamaño mayor que el diseño de tres columnas.

Captura de pantalla que muestra un solo objeto visual en un diseño de una columna.

Captura de pantalla que muestra un solo objeto visual en un diseño de tres columnas.

Código de presentación de diseño personalizado

El código para implementar la aplicación de presentación se encuentra en el repositorio PowerBI-Embedded-Showcases GitHub.

  • La aplicación código HTML compila el contenedor de informes, Elegir objetos visuales botón y lista desplegable, y botón Elegir diseño y paleta desplegable.

  • El informe javaScript inserta el informe, calcula y configura los objetos de diseño personalizados e implementa los diseños personalizados predeterminados y personalizados.

Para crear un diseño de informe personalizado, pase un objeto de diseño personalizado a la propiedad settings del informe de configuración de inserción. Para habilitar diseños personalizados, el informe JavaScript usa la propiedad layoutType con el valor models.LayoutType.Custom.

El objeto customLayout especifica el tamaño de página del lienzo del informe, el escalado de lienzo y el diseño de página. Los diseños de página especifican un diseño visual predeterminado para el informe y diseños visuales para cada objeto visual.

let settings = {
    ...
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: {
            type: models.PageSizeType.Custom,
            width: reportWidth - 10,
            height: reportHeight - 20
        },
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: pagesLayout
    }
};

Para mostrar visualizaciones y diseños seleccionados, javaScript muestra dinámicamente el objeto settings y actualiza la configuración de inserción. El informe se carga con los objetos visuales seleccionados que se muestran y el diseño personalizado implementado.