Crear un "mashup" en Qlik Sense desde una plantilla prediseñada

Visitas: 3831

Para comenzar abriremos QlikSense Desktop y desde este iniciaremos el Dev Hub.

Nos ofrece distintas posibilidades, en este caso nos centraremos en la creación de un mashup basado en una plantilla prediseñada. De este modo podremos familiarizarnos con la creación de los mismos y partiremos de una plantilla para identificar los elementos necesarios.

Paso 1

Desde el Dev Hub, seleccionamos la pestaña Mashup.

Paso 2

Pulsamos sobre Crear nuevo.

Paso 3

Le damos un nombre a nuestro mashup, debemos asegurarnos de que elegimos un nombre único y elegimos la plantilla, Basic Single Page Mashup.

Paso 4

Pulsamos sobre Crear y Editar. En este momento observaremos que nos ofrece distintas pestañas en el editor de mashup.

Paso 5

Vamos a guardar el mismo sin incluir de momento ningún objeto, esto nos va a permitir explicar el contenido básico necesario para la creación de mashup.

​De forma automática nos ha creado una carpeta contenedora del proyecto mashup, recibe el mismo nombre que le hemos dado a nuestro mashup, en este caso "SistelPlantilla", por defecto lo ubica en la carpeta extensiones de la ruta local de nuestra instalación.

Tenemos una pestaña con el archivo SistelPlantilla.qext. En este archivo se configura el nombre el tipo y la posición por defecto del mashup.

Tenemos otra pestaña con el archivo SistelPlantilla.js. Este es el archivo principal JavaScript. Aquí definimos el motor actual de la conexión Qlik, el lugar donde estará ubicado el propio mashup. Nos permite cargar el navegador cuando vamos a utilizar el mashup a través de la instrucción Require JS, se utiliza como un cargador de módulos. Conecta la aplicación que contiene los objetos que vamos a utilizar en el mashup a través de la instrucción var app y enlaza los objetos que vamos a mostrar a través de la instrucción app.getObject.

El archivo JavaScript y el archivo QEXT deben tener el mismo nombre. El nombre también debe ser único en Qlik Sense.

Tenemos otra pestaña con el archivo SistelPlantilla.html, En este archivo establecemos las relaciones entre el documento actual y los enlaces Sense, establece la ubicación de los objetos Sense que vamos a mostrar en el mashup.

En nuestra plantilla se incluyen dos documentos más, el CSS y la imagen que vamos a mostrar. El CSS es la página de estilo que usará nuestro HTML y la imagen a su vez se utiliza en nuestra página de estilo.

Paso 6

Ahora nos vamos a centrar en la pestaña de Previsualización para montar nuestro mashup interactivamente. 

Abrimos la aplicación Sense de la que deseaos incluir nuestros objetos. En nuestro caso será Cuadro de Mando Comercial.qvf. Una vez que elegimos la app, nos ofrece una lista de objetos para añadir.

Vamos a elegir el objeto Filtros Rentabilidad, pulsamos sobre él y lo arrastramos a la primera posición de objeto de nuestro html.

El objeto queda incrustado en la web. Vamos a repetir estos pasos para los siguientes objetos.

Cumplimiento de objetivo y la evolución de ventas. En este momento podemos pulsar sobre una vista previa para hacernos una idea de cómo está quedando nuestro mashup. Podemos observar el resultado final desde una nueva pestaña en nuestro navegador.

Ahora vamos a cambiar la imagen de cabecera que muestra el mashup, vamos a sustituirla por una imagen corporativa.

Para ello podemos usar dos opciones, la primera es sobreescribir la imagen que tenemos con una corporativa utilizando el mismo nombre. La segunda es incluir en nuestra carpeta la imagen que deseamos incluir en la plantilla y sustitur este archivo en nuestro documento css.

Vamos a usar la segunda opción. Colocamos la imagen Sistel.jpg en la carpeta y sustituimos la imagen actual por Sistel.jpg en nuestro archivo css. El resultado será el siguiente:

A continuación vamos a completar el mashup incluyendo los objetos que nos faltan y modificando los textos de la plantilla. Vamos a sustituir los textos de la plantilla desde el propio editor de mashup situándonos en el archivo HTML

Pulsamos sobre el botón Guardar y Generamos una Vista Previa. El mashup estará finalizado y con el siguiente aspecto.

Para colocar nuestro mashup en la web tan solo debemos copiar el enlace que genera en la vista previa e insertarlo en nuestra web como un iframe o en el propio proyecto de Sense como un enlace.

Paso 7

Automáticamente tendremos en la carpeta contenedora todo el contenido del proyecto actualizado. Para reutilizar este mashup debemos comprimir la carpeta completa en un zip, y esta carpeta la podemos descomprimir en otro desktop o importarla al servidor de aplicaciones...

Autor

Imagen de Business Analytics

Equipo

CAPTCHA
Esta pregunta es para comprobar si usted es un visitante humano y prevenir envíos de spam automatizado.