Aplicar estilos CSS en objetos Qlik Sense

Introducción

Aunque Qlik Sense es una de las mejores herramientas de visualización en el panorama actual, los que llevamos tiempo trabajando con ella ya conocemos sus puntos fuertes y sus no tan fuertes.

Y es que cuando tienes que hacer cuadros de mando un poco más sofisticados en diseño nos encontramos con un problema: apenas hay posibilidad de personalización de forma nativa.

Qlik Sense es tan sencillo e intuitivo de utilizar para diseñar cuadros de mando que peca de simple cuando queremos añadir algo de vida a los objetos.

Cuando la herramienta viene limitada tenemos que tirar de ingenio y por supuesto aprovechar ciertos “trucos” que nos harán la vida más fácil.

En el artículo de hoy vamos a ver un pequeño tutorial para añadir color y cambiar propiedades a los objetos de una hoja.

¿Te pica la curiosidad? Vamos allá.

Pasos a seguir

Para este ejemplo vamos a diseñar, a partir de una hoja en blanco, un menú de bienvenida.

Esta hoja puede servir de entrada al usuario del cuadro de mando para presentarle de forma ágil y cómoda una navegación por las diferentes hojas de datos.

¿Qué pueden contener este tipo de pantallas de bienvenida? Por poco que pensemos se me ocurren dos cosas básicas: textos y botones de navegación o imágenes.

Empecemos pues a pintar esto, nos quedaría algo así:

…Y eso que le he dado algo de redondeo a los botones.

Vamos a darle algo de vida utilizando estilos CSS pero aplicados directamente sobre los objetos Qlik Sense. ¿Cómo es posible esto? Hay un objeto llamado multiKPI del Qlik Visualization Bundle oficial de Qlik que tiene un sitio para ello.

Pongamos el objeto multiKPI en nuestra hoja:

MultiKPI permite como su nombre indica poner dentro de un solo objeto varias visualizaciones, e incluso a partir de elementos maestros. Pero estos detalles no son los que nos interesan ahora.

Una vez colocado en la hoja le seleccionaremos una dimensión y una medida (es obligatorio pero da igual la que pongamos, es simplemente para que no dé error), nos dirigimos a Appearance\Styles y ahí veremos una caja de texto llamada Styles (CSS) que es donde obraremos la magia.

Utilizando CSS estándar podemos ir aplicando efectos de todo tipo a cada tipo de objeto o bien a un objeto concreto: fondos en gráficos, tipos de letra, eliminación de bordes en cajas de texto, y un largo etc.

En nuestro ejemplo vamos a colorear el fondo de nuestra hoja con un gradiente de color azul, por lo que introduciremos esto en la caja:

#grid-wrap {
background: linear-gradient(180deg,
rgba(1,9,173,1) 3%,
rgba(16,60,188,1) 34%,
rgba(2,70,223,1) 100%)
!important;
}

Con #grid afectaríamos al fondo de la hoja, pero veríamos márgenes. Esto se soluciona con #grid-wrap. Con Background haremos referencia al fondo y luego pintaremos el gradiente con linear-gradient y sus argumentos de colores. Al final con ¡important haremos que se muestre.

Vale, ya tenemos un fondo algo más colorido. Ahora queremos hacer algo con esos cuadros de texto con fondo blanco y los dejaremos trasnparentes. Podríamos pintar todos los objetos de tipo texto pero en este caso aprovecho para contaros cómo obtener el ID interno de cada uno de los objetos:

En la URL actual en la que nos encontremos, añadiremos al final “options/developer” y pulsaremos intro para que recargue.

Ahora tras entrar en modo edición y haciendo click en el botón secundario podremos ver información extra asociada con el ID del objeto seleccionado:

Con esto ya seremos capaces de poner propiedades a los objetos que necesitemos.

Siguiendo el caso práctico vamos a eliminar bordes y hacer el fondo transparente a los textos con esta sintaxis aplicada a cada uno de los objetos de texto (para hacer referencia a un ID se utiliza “[tid= nuestroID]”):

div[tid="NuLVmrA"] * {
border-right: none !important;
border-left: none !important;
border-bottom: none !important;
border-top: none !important;
background: none
!important;
}

Si repetimos esto para cada texto y luego ponemos los textos en blanco de forma nativa en Qlik ya tendremos algo más vistoso:

Vamos con el paso final: el propio objeto de multikpi está ocupando sitio en el menú y molesta, por lo que lo haremos invisible con:

.qv-object-qlik-multi-kpi {
display: none
}

Importante que ahora no lo hemos hecho sobre el ID si no sobre la tipología de objeto. En este caso como solo hay uno daría un poco igual cómo hacerlo.

Tras todo este proceso, al final obtenemos nuestro menú principal:

A partir de aquí y tirando de internet para conocer bien la sintaxis estándar CSS podremos dar rienda a nuestra imaginación y suplir esta carencia de Qlik a nivel personalización.

En resumidas cuentas...

Hemos visto como poder emplear las capacidades de CSS del objeto multiKPI de las extensiones nativas de Qlik para poder inyectar estilos a los objetos que necesitemos y personalizar nuestro dashboard al gusto.

Además, también se ha explicado cómo identificar los ID de los objetos de una hoja para después aplicarles propiedades visuales o incluso esconderlos.

Lo mejor de esto es que no necesitamos plugins externos no oficiales y además podemos controlar el alcance de estas personalizaciones, sin afectación al resto de hojas.

Espero que os haya resultado útil esta guía. ¡Hasta la próxima!