Pentaho CDE: Como crear tu propio componente

Pentaho es una estupenda suite para realizar tareas de Business Intelligence. Que está compuesta por distintas herramientas que nos permiten hacer tareas de minería de datos, transformación de ficheros (ETL) e informes de negocio.  Y de la mayoría de herramientas hay tanto una versión Enterprise como una versión Community.

Dentro de la plataforma de Business Analytics, está Community Dashboard Editor (CDE) que es una magnífica herramienta para la creación de informes de negocio. Y será sobre esta herramienta la que veremos un ejemplo. Nos basaremos en la creación de nuestro propio dateTimePicker para ver diversos detalles. más allá de la creación básica de componentes. 

Como hemos dicho, CDE nos permitirá crear informes facilmente, dividiendo el mismo en tres secciones principales bien diferenciadas:

• Layout Panel: Permite generar la estructura HTML de nuestro informe. Y para ello se basa principalmente en Boostrap.
• Components Panel: Permite asociar componentes predefinidos por Pentaho a la estructura creada en el punto anterior. Desde input fields a gráficos de diferente formatos. 
• Datasource Panel: Permite crear fuentes de datos de muy distintos orígenes: SQL, NoSQL, XPath, Javascript, Mondrian, etc. 

Algo que veremos en este ejemplo que al menos la versión CE, tiene muchos componentes predefinidos. Pero hay ciertas cosas, en apariencia básicas, que no se pueden realizar fácilmente. Y tampoco hay mucha información, de ahí la creación de este post. 

Nuestro ejemplo se basará en que queremos crear dos input fields que nos permitan indicar rango de fechas. Si es solo queremos fechas, podremos utilizar el componente Date Range Input Component. Pero si queremos poder seleccionar tanto fecha como hora, ya tendremos nuestro primer problema. Puesto que el componente solo permite elegir fechas. 

¿Qué podemos hacer entonces? Podemos crear dos input fields donde verifiquemos el formato de la fecha con la hora a seleccionar. O podemos crear nuestro propio componente con otras librerías javascript. En nuestro caso vamos a utilizar este datatimepicker. La creación estará dividida por un código HTML y otro JavaScript. 

Empezaremos por el Layout Panel. Aquí podremos crear filas y columnas. Las cuales podremos personalizarlas indicando un estilo, ancho, alto y varios detalles más. Y además sobre las columnas podremos añadir elementos HTML o añadir imágenes. 

En el componente podremos añadir el siguiente código:

<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepickerFrom'>
                <input type='text' class="form-control" id="idtpFrom"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepickerTo'>
                <input type='text' class="form-control" id="idtpTo"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

El siguiente paso será añadir el código JavaScript. El cual, aunque se podría haber añadido en el componente HTML en pos de la claridad vamos a añadirlo a través de un componente Function en el Panel de Componentes. 

El código es el que ya viene con el propio ejemplo de la página de datatimepicker. Pero si queremos que funcione debemos tener en cuenta que los dashboards utilizan RequireJS para cargar los módulos JavaScript. Por tanto, para poder usar nuestra librería correctamente deberemos incluirla a través de la configuración de require. 

require.config({
    paths: { 
        datetimepicker: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min' 
    },
    map: {
        'datetimepicker': {
            'jquery': 'cdf/lib/jquery',
            'moment': 'cdf/lib/moment'
        }
    }
});
require(["cdf/Logger", "cdf/lib/jquery",'datetimepicker'], function(Logger, $)  {
    $('#datetimepickerFrom').datetimepicker({});
    $('#datetimepickerTo').datetimepicker({
        useCurrent: false //Important! See issue #1075
    });
});  

Así de sencillo y en dos simples pasos, tendremos ya nuestro propio componente.