Ya sea para tu propia organización como para terceros, si usas Microsoft PowerBI este tutorial es para ti.
En esta entrada del blog vamos a ver cómo crear tus propios custom visual o widgets para PowerBI. Con un control personalizado podremos mostrar la información como a nosotros nos gusté más, pudiendo ser más corporativo o dándole a la visualización de los datos un toque más personal.
Antes de ver cómo desarrollar nuestro custom visual para PowerBI necesitamos comprobar que cumplimos los siguientes prerrequisitos:
- Tener una cuenta de Power BI Pro.
- Un IDE (Integrate Development Environment), en nuestro caso vamos a utilizar Visual Studio Code.
- Disponer de PowerShell con una versión igual o superior a la versión 4.
- Disponer de un entorno preparado para poder desarrollar custom visuals de PowerBI
- Disponer de un report, del cual vayamos a mostrar los datos que deseamos.
- Tener conocimiento sobre qué son y como añadir elementos svg a un fichero HTML.
Entorno de desarrollo de visual en Power BI
Comenzaremos montando el entorno necesario para poder desarrollar visuals de PowerBI.
En nuestro caso vamos a utilizar un ordenador con sistema operativo Windows 10. Lo primero que instalaremos será Node.js, el cual es utilizado para poder probar aplicaciones escritas en JavaScript.
Una vez tengamos Node.js instalado, deberemos de instalar pbiviz, la cual es una herramienta utilizada para compilar el código del controlador visual en un paquete del tipo pbiviz. Este tipo de paquetes es un comprimido el cual contiene todos los scripts y assests necesarios para el correcto funcionamiento de custom visual de PowerBI.
Pbiviz es una herramienta que se instala mediante un paquete npm. La instalaremos con el siguiente comando:
Una vez instalada la herramienta el siguiente paso será crear e instalar un certificado SSL, ya que es necesario para que un cliente (tu ordenador) se conecte de manera segura a un servidor (tu servicio de PowerBI). Para ello utilizaremos el siguiente comando:
La primera vez que ejecutemos el comando nos aparecerá un error como el siguiente:
Tras el error generará el certificado, para instalarlo correctamente, deberemos de volver a ejecutar de nuevo el comando, con el que podremos ver por un lado la contraseña en forma de cadena para la instalación del certificado y, por otro lado, se iniciará el instalador de certificados para proceder con la instalación mediante una interfaz de usuario.
En el instalador seleccionaremos la opción de Current user, para instalarlo solo en nuestro usuario.
Llegados a la parte de la contraseña, deberemos de indicar la que nos ha devuelto Powershell cuando hemos ejecutado el comando.
En el último paso del instalador, deberemos de seleccionar la opción donde indica que podemos seleccionar la ruta donde deseamos seleccionar el certificado.
En este caso deberemos de situar el certificado en la carpeta de certificados raíz de confianza.
Una vez terminado el proceso pulsaremos el botón de terminar y el sistema nos lanzará un mensaje para preguntarnos si estamos de acuerdo con la instalación del certificado.
Indicamos que sí y ya tendremos el certificado creado e instalado.
Para comprobar que realmente tenemos el entorno listo, basta con lanzar el siguiente comando en la consola de Powershell:
Para que esté listo, la consola no debe de arrojar ningún tipo de error y mostrar lo siguiente:
¿Quieres Ahorrar Tiempo A La Hora De Generar Informes?
Conviértete en un experto en Power BI con nuestro curso en la herramienta líder en analítica avanzada. Porque cuando el informe es bueno, las decisiones son acertadas.
Quiero saber másConfiguración de tu Power BI para poder desarrollar un custom visual
Debemos de dirigirnos al portal de Power BI y el en menú dirigirnos a Settings > Settings > Settings
Estando dentro de dicho submenú, deberemos dirigirnos al apartado de desarrollo y marcar la siguiente casilla:
Marcado dicha casilla, habilitaremos la capacidad de depuración de un custom visual dentro del portar de Power BI.
Instalación de Librerías
Para terminar, antes de comenzar con el desarrollo del control, debemos de instalar ciertas librarías necesarias para el proceso de desarrollo. Todas las librerías que veremos a continuación son paquetes npm, por lo que se instalaran mediante comandos en una consola de Powershell.
La primera es D3 JavaScript library, la cual se utiliza para la creación dinámica, interactiva de visualización de datos en servidores web.
La segunda es TypeScript definitions, útiles para el desarrollo mediante TypeScript, también es recomendable instalar módulos de TypeScript dentro de Visual Studio Code para este propósito.
La tercera será core-js esta es una de las librerías estándar de JavaScript.
Y, por último, powerbi-visual-api, la cual trae definiciones para la API de PowerBI.
Creación e Inicialización de un Proyecto de Custom Visual
Bien llegados a este punto, ya tenemos listo el entorno y ya podemos entrar de lleno en el desarrollo de un control visual de PowerBI.
Para ello comenzaremos dirigiéndonos al directorio en el cual vamos a desarrollar el custom visual y crearemos el proyecto con el siguiente comando en una consola de Powershell:
Indicaremos el nombre de nuestro custom visual.
Dentro del nuevo directorio que se nos acaba de crear, iniciaremos el custom visual con el siguiente comando:
Si es la primera vez que arrancamos node.js, deberemos de crear una regla en firewall para él.
Si todo ha ido correctamente, el custom visual habrá compilado y estará arrancado en nuestra maquina gracias node.js, en la consola de Powershell se mostrará algo como lo siguiente:
Llegado a este punto, deberemos de abrir en el portal de PowerBI nuestro report para poder hacer uso de sus datos en nuestro custom visual.
En este post no se va a explicar cómo añadir un report o como crear entorno de recogida de datos dentro de PowerBI. Lo que sí que haremos en nuestro report, será añadir una nueva pagina en blanco para poder probar nuestro custom visual:
Dentro de la página nueva en blanco si queremos añadir nuestro custom visual para visualizarlo seleccionaremos el Developer Visual, dentro del panel de visualizaciones.
Este elemento visual solo estará disponible si hemos activado la casilla de debug en el los ajuste de PowerBI, como hemos hecho en el apartado de configuración del entorno.
En este punto podremos ver nuestro custom visual, en este caso solo es un contador que indica el numero de veces que se ha refrescado el elemento visual, lo que le falta son entradas de datos, para ello puede añadir entradas de datos desde la lista de campos:
Puede ocurrir que no se visualice correctamente el custom visual:
Si esto ocurre, navegaremos a la siguiente dirección https://localhost:8080/assets/status y autorizar al navegador para acceder a dicha página web.
Añadir Elementos Visuales y Texto a tu Custom Visual
Es la hora de abrir el proyecto en Visual Studio Code, el cual tendrá la siguiente estructura:
El fichero principal del custom visual será visual.ts dentro del directorio src.
Es aquí donde deberemos de añadir los elementos que vayamos a utilizar en nuestro custom visual.
Lo primero que debemos de saber es que el documento, así como el proyecto está bajo la licencia MIT, por lo que las primeras líneas del fichero son unos cometarios sobre la licencia y no deberían eliminarse:
Después de los comentarios de la licencia, nos encontramos con la importación de librerías:
Ahora bien, antes de avanzar debemos de saber que un custom visual se construye mediante código HTML y los elementos mediante los cuales vamos a construir nuestro custom visual serán del tipo SVGElement y que utilizaremos la librería d3 instalada previamente para manejar estos objetos en JavaScript, por lo que deberemos de añadir las siguientes líneas a nuestro fichero:
También podemos utilizar elementos del tipo HTMLElement y utilizar las etiquetas propias de HTML para definir nuestro custom visual. Nosotros no lo realizaremos de esa forma ya que deberemos de realizar muchos más pasos para poder llegar a tener un custom visual que sea vistoso y amigable con el usuario.
Dentro de nuestra clase definiremos las siguientes propiedades que harán referencia a los elementos que vamos a utilizar:
En este caso vemos que nuestra intención es utilizar dos círculos y dos elementos de tipo texto.
Lo siguiente que nos encontraremos será con el constructo de la clase, el cual se llamará siempre que instanciemos el elemento visual. A este constructor le llegará como parámetro un objeto de tipo VisualCostructorOptions el cual a su vez trae las propiedades element y host.
La propiedad element es la que verdaderamente nos interesa, ya que es la propiedad que hace referencia al DOM del elemento, el cual contendrá nuestro custom visual.
La propiedad host, es en realidad una colección de propiedades que pueden ser utilizadas para interactuar con el PowerBI.
Como hemos dicho la propiedad del paramento que nos interesa es element, ya que lo que vamos a hacer es añadir etiquetas y elementos al DOM de nuestro custom visual.
Lo primero que añadiremos será una etiqueta de tipo <svg>, el cual se utilizará para contener elemento svg:
Lo siguiente será crear un contenedor añadiendo la etiqueta <g>:
La etiqueta <g> es utilizada para agrupar elementos de tipo HTML SVG Graphics.
Y, por último, añadiremos 2 círculos y 2 textos, dentro del contenedor o grupo. En este caso vamos a utilizar formas que ya se encuentran disponibles dentro del lenguaje HTML, pero también es posible añadir imágenes, de esta forma podemos llegar a diseñar gráficamente todos los aspectos de nuestros custom visual.
En este punto tenemos que llevar cuidado ya que los elementos se mostrarán en el orden en el que son añadidos al grupo, en este caso, el circulo 2 se mostrará por encima del circulo 1 y así sucesivamente.
Si miramos nuestro custom visual, todavía no seremos capaces de visualizar algo, ya que aun no hemos añadido las propiedades a los elementos que acabamos de añadir al DOM. Alguien que lea esto puede pensar que está mal, que debemos de añadir las propiedades de los elementos a la vez que añadimos estos al DOM, pero no, ya que a nosotros lo que nos interesa es que dichas propiedades cambien cada vez que se actualice el custom visual, por lo que deberemos de añadirle las propiedades a los elementos, dentro de la función update() que encontramos dentro de la clase. De esta forma conseguiremos cambios en tiempo de ejecución, así como una correcta visualización de los elementos cada vez que redimensionemos nuestro custom visual.
Dentro de la función update(), es donde verdaderamente ocurre la magia. Para que todo vaya en función del tamaño del custom visual y que por lo tanto los elementos acompañen a la dimensión del custom visual, definiremos nuestras propiedades en función del alto y ancho del custom visual.
Tanto el ancho como el alto del elemento, se obtienen del parámetro con el que es llamado la función, en este caso el parámetro es del tipo VisualUpdateOptions:
Tanto el ancho como el alto del elemento, se obtienen del parámetro con el que es llamado la función, en este caso el parámetro es del tipo VisualUpdateOptions:
El resto de atributos y estilos depende del resultado que queramos alcanzar:
En nuestro caso el resultado que buscábamos es el siguiente:
Procesamiento de Datos
Bien, llegados a este punto tan solo nos quedaría procesar datos desde el portal de Power BI para poder mostrarlos en nuestro custom visual. Para ello, el siguiente fichero importante del proyecto será capabilities.json
El fichero capabilities.json te permite definir qué datos se van a poder añadir al custom visual desde el portal de PowerBI. El fichero te deja definir en forma de diccionarios clave-valor, si quieres crear y utilizar grupos de medidas y valores o solo una medida o valor
En el fichero podremos definir tanto aspectos que refieran a los datos, como al comportamiento y visualización del custom visual, por ejemplo, podemos definir el color de uno de nuestros elementos sea configurable desde el portal de PowerBI.
Lo primero que deberemos de finir en el fichero capabilities.json es un rol. El rol se utilizará para poder mostrar en la pestaña de visualización los valores u opciones del custom visual.
Cada rol, contará con un nombre que se mostrará en el portal de PowerBI, un nombre con el que podremos hacer referencias internamente y el tipo de valor que vamos a necesitar.
Bien, ¿ahora cómo podemos hacer la conexión entre la interfaz del portal de PowerBI y nuestro código?
Para ello primero deberemos definir también el fichero capabilities.json que tipo de conexión queremos realizar, para ello dentro del fichero encontraremos el array de propiedades dataViewMapping, donde se definirán como se realiza la conexión del dato al código, y a su vez que condiciones debe cumplir el valor del dato o a que parte del dato exactamente haremos referencia dentro de nuestro código.
Para este caso de ejemplo haremos una conexión simple entre el rol definido y nuestro código.
Con todo ello definido, ya podremos hacer uso de los valores del dato dentro de nuestro código, para ello, volviendo al fichero visual.ts, dentro de la función update(), añadiremos la siguiente línea de código:
Con esta línea conseguiremos recuperar el array de datos a los cuales estamos haciendo una conexión entre la interfaz de PowerBI y nuestro código.
Este objeto dataView que recuperamos nos devuelve en estructura de filas y columnas los datos del custom visual, si queremos visualizar la estructura para saber como acceder al dato, podemos hacerlo desde el custom visual presionando este botón:
Entonces viendo la estructura de los datos podemos definir valores para nuestros elementos del DOM contenidos dentro de nuestro custom visual:
Por lo que llegados a este punto si seleccionamos un campo de datos de nuestro report dentro del portal de nuestro PowerBI y lo asignamos al rol o característica que hemos definido previamente, obtendremos un resultado como el siguiente
Y de esta manera tan sencilla podemos llegar a diseñar nuestros propios Visuals de PowerBI.
Custom visual complejos gracias a dataViewMappings
En un caso mucho más práctico, lo que queremos, será representar nuestros datos de manera que, utilizando el visual, nos proporcione información directa de como están evolucionando dichos datos en el report que tenemos, independientemente de la escala, la cual puede ser, por ejemplo, una escala de tiempo o una escala de precio.
Es por ello que vamos hacer que nuestro custom visual, nos muestre el porcentaje de ventas anuales por región, de manera que de un solo vistazo y filtrando por las diferentes regiones, nos muestre el porcentaje de ventas.
Para ello deberemos de modificar el archivo capabilities.json como ya hemos hecho en los anteriores apartados. Dentro de este fichero añadiremos los siguientes roles:
Definiendo estos roles dentro de capabilities.json conseguiremos empezar a definir una tabla para el mapeo de datos. La tabla es un tipo de mapeo simple en cual se puede asociar puntos de datos, es decir agrupar los datos en filas y columnas para dos ejes de valores. El primer rol indica que agruparemos los datos en función del campo que añadamos, mientras que en el segundo utilizaremos el valor del campo como dato.
Tras añadir dichos roles al fichero, si guardamos, podremos ver que en el apartado de visualización del tablón de PowerBI nos aparece ahora lo siguiente:
En nuestro caso, las columnas de la tabla serán las regiones , es decir agruparemos por regiones, y como valores dentro de las filas de la tabla, tendremos el año y las ventas de ese año.
Bien una vez añadidos los roles, deberemos de indicar como se va a realizar el mapeo de datos entre el portal de Power BI y nuestro código, en este caso añadiremos lo siguiente al array de mapeo de datos:
De esta manera le estamos indicando que para cada uno de los valores que tenemos agrupados por el rol column, introduce todos los datos en la query para todos los valores que encontramos en el rol de values.
Tras definir el tipo de mapeo de datos, solo nos queda visualizar la estructura de los datos dentro de la tabla, para saber como acceder a ellos desde nuestro código.
Como podemos observar deberemos de acceder al array dataView.table.rows desde nuestro código para poder hacer uso de los datos de las filas de la tabla.
En nuestro caso, deseamos obtener el valor total de las ventas, por lo que debemos de recorrer el array sumando todos los valores que encontremos:
También añadiremos más texto a nuestro custom visual, de manera que podamos saber la cantidad de porcentaje de ventas que estamos viendo:
Como resultado obtendremos algo parecido a lo siguiente:
Para poder filtrar sobre los datos seleccionados, haremos uso de un visual propio de PowerBI, este se llama Slicer:
Y en su campo de visualización añadiremos para filtrar por regiones, obteniendo un resultado como el siguiente:
Ahora si seleccionamos una de las regiones podremos ver cual es el valor del porcentaje total de dicha región en el total de las ventas:
Pero, además, vamos a añadir que en función del porcentaje que se haya obtenido en dicha región en ese año, se cambie de color el custom visual para saber de un solo vistazo si esa región ha ido bien o mal en relación al porcentaje total de las ventas:
Obteniendo como resultado lo siguiente:
Como hemos visto, todo es cuestión del resultado que se quiera obtener, crear custom visual nos puede ayudar ha visualizar los datos de la manera que mejor nos convenga, haciendo de nuestros portales de PowerBI un lugar mucho más productivo.
