Visual personalizado en LuckyTemplates: aprenda a controlar las propiedades de fuente en DAX

Para esta publicación de blog, quiero tomarme un tiempo hoy y presentarles un objeto visual personalizado en LuckyTemplates que comencé a usar y que proporciona mucha flexibilidad y capacidades que no son posibles dentro de los objetos visuales nativos de LuckyTemplates. Puedes ver el video completo de este tutorial en la parte inferior de este blog.

Sé que hemos estado hablando mucho sobre Deneb últimamente y por una buena razón, pero este también proporciona mucha flexibilidad. Usarlos a los dos juntos forma un par bastante poderoso. La imagen personalizada de la que estoy hablando se llama HTML & CSS Viewer de K Team Solutions .

Recientemente hubo una sobre cómo controlar tanto el color como los atributos de formato de texto enriquecido de una tarjeta visual basada en una medida DAX. El color ciertamente no es un problema; eso es algo que podemos hacer muy fácilmente a través del formato condicional dentro de LuckyTemplates.

Controlar atributos de textos como negrita y cursiva a través de medidas DAX es algo que no puede hacer con LuckyTemplates nativo, pero es bastante fácil de hacer con este visor HTML CSS. También puede usar lo visual para crear algunos efectos visuales y hacer un enfoque de tarjeta de KPI integral.

Echemos un vistazo a la publicación del foro. Básicamente, el miembro tenía una tarjeta visual simple basada en una medida y quería cambiar los atributos del texto.

Saltaremos a LuckyTemplates para recrear este escenario. Configuraremos la medida en función del conjunto de datos de práctica de la herramienta externa que usamos para crear maquetas.

Lo configuraremos de manera que si las ventas anuales totales superan los 40 millones, aparecerá en negrita y en rojo.

Y si fuera menos que eso, será azul y no en negrita.

Tabla de contenido

• Descarga del visualizador personalizado HTML CSS Viewer en LuckyTemplates
• Cambiar las propiedades de la fuente con un objeto visual personalizado en LuckyTemplates
• Uso de la aplicación personalizada de diferentes maneras
• Adición de animaciones y GIF a su informe
• Conclusión

Descarga del visualizador personalizado HTML CSS Viewer en LuckyTemplates

Te mostraré cómo se puede hacer esto. Lo primero que debe hacer es obtener realmente lo visual. Vaya a AppSource y escriba HTML CSS Viewer.

Esta será una visualización paga y, por ahora, puede obtener una licencia de prueba gratuita desde su sitio web hasta finales de septiembre de 2022. Tiene un par de meses para probar esto de forma gratuita.

Una vez que lo hayamos cargado en LuckyTemplates, podemos verlo desde el panel de visuales. Podemos fijarlo como una imagen permanente si lo usaremos con frecuencia.

Cambiar las propiedades de la fuente con un objeto visual personalizado en LuckyTemplates

Si miramos el cuadro de texto, hay dos medidas principales que estamos usando aquí: una medida HTML y una medida CSS. HTML proporciona la estructura general de la página web, mientras que CSS proporciona el formato.

Lo que tenemos aquí es una etiqueta HTML, y luego el ID=contenedor es una devolución de llamada al CSS. El cuerpo sustantivo principal de esto es solo el título en el cuadro de texto.

Y luego, si vamos al CSS, aquí es cuando las cosas se vuelven un poco más complejas.

La estructura general que uso es el Estilo 1 como variable y luego el Estilo 2 como variable.

A esto le sigue una declaración if simple que dice “si las ventas totales son mayores a 40 millones, usa el estilo dos; si no, usa el estilo 1”. El único trabajo pesado que se hace es definir estos dos estilos.

Uso de la aplicación personalizada de diferentes maneras

La aplicación también viene con un informe muy detallado que le muestra las diferentes cosas que puede hacer con este elemento visual.

Como mencioné anteriormente, aquí están las tarjetas de KPI que puede hacer.

También tiene la capacidad de crear tablas detalladas al usar este objeto visual.

También puede crear una imagen dominada por texto.

En la opción de la página de destino, también puedes usar un desplazador de texto con opciones de fuente y fondo.

Si repasamos la mayor parte del código CSS de texto cambiante, es muy intuitivo. Podemos realizar cambios en el peso de la fuente, el tamaño de la fuente y el color de la fuente.

Podemos copiar esto en la plantilla y luego usarlo como base para la segunda medida. Si volvemos a nuestro archivo, tenemos el CSS del título de la tarjeta, que controla el formato.

Pegamos el código que copiamos para tener el color azul y el peso de fuente más ligero para el Estilo 1. Luego, la misma fuente en el Estilo 2 con un color rojo y el peso de fuente más pesado para crear el efecto de negrita.

Esto lo ponemos a través de la declaración IF y dependiendo del valor de la medida, elegirá el estilo. Simplemente tomaremos esas dos medidas y luego colocaremos el HTML y el CSS en estas ranuras.

Con esta técnica, podrá formatear fácilmente atributos de texto enriquecido mediante HTML y CSS.

Adición de animaciones y GIF a su informe

Además de la capacidad de usar fuentes personalizadas, también tenemos la capacidad de usar animaciones y GIF. Se me ocurrió una medida simple donde usé un HTML para el título personalizado.

Y luego usé este archivo CSS para crear tres estilos con diferentes fuentes personalizadas.

Estas son solo fuentes de tipo verdadero o fuentes de tipo abierto que descargué gratis. El estilo es el predeterminado, lo que significa que no se seleccionó nada en la segmentación.

Además de eso, tengo una medida GIF. Incorporé tres archivos GIF que cargué en el sitio imgbb , luego usé las URL directas y las puse en la etiqueta HTML usando el formato en el informe de muestra para la visualización HTML CSS.

Luego usé una medida simple de CAMBIO VERDADERO para elegir el GIF correcto. Si no se selecciona nada, simplemente elige un espacio en blanco.

Así es como se ve con el espacio en blanco y sin nada seleccionado en la segmentación.

Y luego, si hacemos una selección en la segmentación, esto es lo que vemos.

Al usar esta imagen personalizada, ahora podemos seleccionar fuentes personalizadas. También podemos agregar GIF y luego hacer que esos GIF estén condicionados a las selecciones de segmentación y las medidas DAX. Estos cambiarán dinámicamente dependiendo de la elección en su cortadora.

Sin embargo, hay una limitación importante. Cuando publica esto en el servicio, la fuente debe instalarse en la máquina local para que el usuario la vea.

Si la fuente está instalada en la máquina local, se mostrará correctamente a través del visor HTML cuando la publique en el servicio LuckyTemplates. Si la fuente no está cargada en la máquina local, volverá a la familia de fuentes predeterminada.

Indicador de KPI en un informe de LuckyTemplates
Cree una imagen personalizada para LuckyTemplates con
los iconos personalizados de Deneb LuckyTemplates | Técnica de visualización de PBI

Conclusión

El visor de HTML y CSS de K Team Solutions es un excelente elemento visual personalizado en LuckyTemplates y proporciona una forma personalizable e interesante de modificar los elementos visuales en sus informes. Definitivamente te animo a que descargues esta aplicación y juegues con ella.

Además, no olvides suscribirte al canal de televisión LuckyTemplates. Tenemos una gran cantidad de contenido que sale todo el tiempo de mí y una variedad de creadores de contenido, todos dedicados a mejorar la forma en que usa LuckyTemplates y Power Platform.

Por último, visite el sitio web de LuckyTemplates para obtener más recursos y más aprendizaje al que puede acceder muy fácilmente.