Crear extension Qlikview: TextBox que muestra código HTML

Una de las novedades que trajo consigo QlikView 10 (y heredada en la 11) fue la posibilidad de diseñar y desarrollar componentes externos denominados “Extensions” que pueden ser explotados y reutilizados en cualquier documento o report.  La definición exacta, tomada del Manual de Referencia en castellano:

Objetos de extensión. Por medio de una simple API nueva, ahora se pueden escribir objetos de hoja para extensiones plug-in, para una presentación integrada en diseños QlikView (funciona en el cliente Ajax y en WebView únicamente). Las extensiones se construyen sobre un objeto gráfico QlikView y pueden escribirse en cualquier lenguaje web moderno, como por ej. Flash, Silverlight, JavaScript, etc.

Es decir, la idea es publicar contenido que normalmente se consume vía web dentro de un report de QlikView. Por ello, una limitación importante a la hora de utilizarlos es que sólo funcionan en WebView y el cliente Ajax, pero no en el Desktop. Por cierto, podéis descargar QlikView de forma gratuita desde su propia página web.

Por otro lado, uno  de los defectos de esta suite de Business Intelligence es que no existe oficialmente ningún objeto o componente que permita incrustar código HTML en un txtbox de un informe, a diferencia de otros grandes competidores como MicroStrategy, ¿la solución?, diseñar nuestra propia Extension.

En mi caso, he adaptado el Extension de Stefan WALTHER a QlikView 10. Como la mayoría, está desarrollado en Javascript y jQuery. Nuestro Extension tiene dos ficheros obligatorios, y dos opcionales. Podéis descargarlo desde aquí.

• Definition.xml: (obligatorio) fichero XML que especifica entra otras cosas, el nombre del Extension, la descripción y los parámetros personalizados, a los que se les puede asignar un valor por defecto.
• Script.js:  (obligatorio)  fichero fundamental, ya que tiene el core de la funcionalidad. En javascript y jQuery, es el encargado de manejar por DOM los objetos y asignarles o modificar sus características.
• Properties.qvpp: fichero en XHTML que especifica las opciones y propiedades configurables de la extensión. Muy recomendable seguir la hoja de referencia para los ficheros QVPP de QlikView. No es necesario; si no se define, se toma por defecto las propiedades genéricas de cualquier objeto (layout, caption,expressions, etc).
• Icon.PNG: es la imagen que se verá desde el Extension Objects en WebView.

Podéis descargar el código fuente desde mi repositorio de Github.

Definition.xml

Simplemente asignamos el nombre y descripción del Extension, dejando vacío el parámetro Text Expression, ya que en nuestro caso, no nos interesa que venga relleno.

<?xml version=”1.0” encoding=”utf-8”?>
 <ExtensionObject Label=”HTML TextBox QV10” Description=”Extensión para añadir código HTML a un objeto TextBox”>

<Text  Expression=”” />

</ExtensionObject>

Script.js

Lo que vamos a hacer es muy sencillo, simplemente creamos un DIV al que le asignamos el contenido HTML que introduzcamos desde el panel de propiedades del Extension. Para mantener la funcionalidad y la personalización del objeto, es necesario incluir la función setProps, encargada de asignar cualquier cambio de estilos desde el panel de propiedades en WebView.

Qva.AddExtension('HTML TextBox QV10', function() {

    this.Element.innerHTML = "<div style='width: 100%; height: 100%; overflow: auto;></div>"; this.Element.firstChild.innerHTML = this.Layout.Text0.text;

    setProps(this.Element.firstChild, this);

    function setProps(obj, parentObj) {
        obj.style.fontStyle = parentObj.Layout.Style.fontstyle;
        obj.style.fontFamily = parentObj.Layout.Style.fontfamily;
        obj.style.fontSize = parentObj.Layout.Style.fontsize + "pt";
    }
});

Properties.qvpp

Como comentábamos, este fichero pseudo XHTML tiene el objeto de construir el menú de propiedades u opciones del Extension.

<div class="ToolWindow-MainBody">
   <table width="360px">
      <tr class="ToolProperty-Header" >
         <td onclick="Qva.SelectToolPane(this, false)">HTML TextBox QV10</td>
         <th onclick="Qva.SelectToolPane(this, true)">
            <img alt="" src="unpinned.png" icon="web:unpinned" avq="img:.Chart.Title"/>
         </th>
      </tr>
      <tr>
         <td colspan="2">
            <table width="100%">
               <colgroup>
                  <col width="100px" />
                  <col width="190px" />
                  <col width="30px" />
               </colgroup>
               <tr>
                  <td class="ToolProperty-Literal">
                     HTML Code:
                  </td>
                  <td colspan="2">
                     <input style="width: 200px" avq="edit:.Chart.Text.0.Content" readonly="readonly" />
                     <button class="ToolProperty-DialogButton" avq="dlg:.Chart.Text.0.Content:Expression.qvpp">
                     Editar HTML
                     </button>
                  </td>
               </tr>
            </table>
         </td>
      </tr>
      <tr class="ToolProperty-Header" avq="panel::Layout.qvpp">
         <td>Layout</td>
         <th></th>
      </tr>
      <tr style="display: none">
         <td colspan="2"></td>
      </tr>
      <tr class="ToolProperty-Header" avq="panel::Caption.qvpp">
         <td>Caption</td>
         <th></th>
      </tr>
      <tr style="display: none">
         <td colspan="2"></td>
      </tr>
   </table>
</div>

Lo fundamental de este fichero son estas líneas:

<input style=”width: 200px” avq=”edit:.Chart.Text.0.Content” readonly=”readonly” />

<button class=”ToolProperty-DialogButton” avq=”dlg:.Chart.Text.0.Content:Expression.qvpp”>

El input va a ser una caja de texto, la cual se va a modificar pulsando el button, que abrirá un dialog o popup con un textarea donde podremos copiar o escribir lo que deseemos. En este caso, debemos quedarnos con los parámetros avq=”edit:”, que es del input text, y el de avq=”dlg:”, que es un dialog. En esta guía tienes todas las especificaciones y parámetros posibles.

Por otro lado, las dos últimas TR son dos opciones que van a heredar directamente de las propiedades genéricas de cualquier objeto: caption (que nos permite modificar la barra de título u ocultarla) y Layout (esencial para cambiar la fuente, tamaño, color de fondo, etc).

¿Cómo genero un Extension para QlikView?

Una vez tengas todos los ficheros necesarios, simplemente los comprimes en .ZIP y renombras el fichero para cambiar la extensión por .QAR. Recuerda que para esto tienes que habilitar desde opciones de carpeta la visibilidad de las extensiones.

¿Cómo se instala un Extension en QlikView?

Muy fácil, haces doble clic sobre el fichero con extensión .QAR y se abrirá QlikView avisándote del éxito o no de la operación. Para hacerlo de forma manual, descomprimes el fichero y copias el contenido en C:Userstu_usuarioAppDataLocalQlikTechQlikViewExtensionsObjects o bien C:Documents and Settingstu_usuarioLocal SettingsApplication DataQlikTechQlikViewExtensionsObjects

 

Para desinstalar un Extension basta con eliminar los ficheros correspondientes de estas carpetas.

Ejemplo de TextBox HTML para QliKView 10

Finalmente, os mostramos un ejemplo del funcionamiento de este Extension en QlikView 10, donde creamos un nuevo objeto de Extensión:

Añadimos el contenido HTML que deseemos:

Y observamos el resultado: