Está en la página 1de 137

Construyendo Tableros de

Control con Pentaho

Agenda
Audiencia y Requisitos Previos
Objetivos de Aprendizaje
Proceso de Clase

Audiencia y Requisitos Previos


Audiencia del Curso
Para diseadores y presentadores de informacin de forma grfica

Requisitos del Curso


Conocimiento base de JavaScript y HTML
Conocimientos en base de datos relacionales
Conocimiento y comprensin de modelos OLAP, Metadata y SQL

Objetivos de Aprendizaje
Al final del curso, los participantes estarn en la capacidad de:
Comprender los conceptos bsicos de los Tableros de Controles
Crear Tableros de Controles (Dashboards) rpidamente usando
Pentaho Dashboard Designer
Crear Tableros avanzados usando Pentaho Community Dashboard
Framework
Comprender la arquitectura del CDE (Community Dashboard Editor)

Objetivos de Aprendizaje
Cules son tus objetivos?
Cules son tus expectativas?

Evolucin del Curso


Horario
8:00 am 5:00 pm
1 hora de Almuerzo ~ medioda
Descansos cuando sean necesarios

El curso es una combinacin de presentaciones, demostraciones y


laboratorios
Tipos de laboratorios
Seguir con el instructor
Por cuenta propia

Pueden hacer todas las preguntas y sugerencias que quieran!

Agenda Curso
Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

Agenda Curso
Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

Conceptos Bsicos

Conceptos Bsicos
El concepto de cuadro de mando deriva del concepto denominado
Tableau de bord en Francs, que traducido de manera literal,
vendra a significar algo as como tablero de mandos, o cuadro de
instrumentos, como en el tablero del carro.
La gestin de las empresas requiere un sistema de indicadores que
nos faciliten la toma de decisiones y el control. Se requiere un
sistema completo de anlisis financiero.
El sistema de indicadores debe organizarse en un cuadro de
mando. El cuadro de mando recoge los principales indicadores y los
presenta de un modo claro y til. El cuadro de mando es un
sistema que nos informa de la evolucin de los parmetros
fundamentales del negocio.

Conceptos Bsicos
Existe infinidad de posibles indicadores que podemos utilizar.
Algunos ratios o indicadores son de uso muy general. Los ms
habituales son, por ejemplo, los indicadores de ventas, margen,
rotacin del inventario y rentabilidad.
Otros indicadores debern ser elaborados expresamente para
analizar una empresa concreta.
Los cuadros de mando han de presentar slo aquella informacin
que sean imprescindible, de una forma sencilla y por supuesto,
sinptica y resumida.

Conceptos Bsicos
El mostrar datos precisos en un formato bonito no es suficiente
Una tabla de control ejecutivo ayudar a los gerentes a:
Responder preguntas fundamentales acerca de su negocio
Alertar sobre problemas que estn ocurriendo
Proveer informacin para tomar decisiones que impacten al negocio

Si decimos las ventas actuales han sido de $1.500.000,00


es eso bueno o malo?

Agenda del Curso


Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

Pentaho Dashboard Builder

Como usar Pentaho Dashboard Builder

Como usar Pentaho Dashboard Builder


Seleccin de la distribucin de los paneles.

Como usar Pentaho Dashboard Builder


Seleccin de colores de los paneles.

Como usar Pentaho Dashboard Builder


Seleccin de titulo del dashboard.
Intervalo de refrescamiento

Como usar Pentaho Dashboard Builder

Agregar o modificar contenido


Agregar grfica
Tabla de datos
Direcciones Web (URL)
Archivos de pentaho
Reportes
Analisis
xActions

Agenda del Curso


Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

Como Incluir grficos


Seleccionar incluir grfica
Seleccin fuente de datos (MetaData)

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Como Incluir grficos


Seleccionar datos para la grfica

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Como Incluir grficos


Aplicar filtros de parmetro usando {parmetro}

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Como Incluir grficos


Seleccionar tipo de grfica y uso de datos

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Como Incluir grficos


Seleccionar tipo de grfica y uso de datos

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Pentaho Analyzer
Definicin de Parmetros

Como Incluir Parmetros


Seleccionar Filtros
Activar opcin para ver los Filtros en la parte superior
Aadir nuevo Filtro

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Como Incluir Parmetros


Seleccionar fuente de datos y nombre del parmetro

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Como Incluir Parmetros


Seleccionar fuente de datos y nombre del parmetro

Click to edit Master text styles


Second level
Third level
Fourth level

Fifth level

Como Incluir Parmetros


Resultado de incluir un parmetro

Como conectar los elementos a los


parametros
Seleccionar el panel y vincular con los parmetros

Pentaho Analyzer
Uso de parmetros via URL

EDITOR: http://serverName:8080/pentaho/content/analyzer/editor
command=open
solution=steel-wheels
path=/analysis
action=actionName.xanalyzer
showFieldList=true

VISUALIZADOR: http://serverName:8080/pentaho/content/analyzer/viewer
solution=steel-wheels
path=/analysis
action=actionName.xanalyzer
parameterName=value

Ejemplo: http://localhost:8080/pentaho/content/analyzer/viewer?solution=steelwheels&path=/analysis&action=actionName.xanalyzer&country_name=Brazil

Agenda del Curso


Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

Laboratorio: Crear su propio tablero de control


Objetivo:
Crear un Dashboard con
una grfica y una vista de
un modelo que cambien
dependiendo de un
parmetro.

Requisitos:
Instalacin del BI Server

Laboratorio: Resultado esperado

Laboratorio: Actividades
Para el grafico seleccionar el Datasource Orders, y colocar los siguientes
datos:

Country
SUM - Quantity Ordered

Column: Territory
Comparison: exactly match
Value: {territory}
Default: EMEA

Country - ASC

Laboratorio: Actividades
Para la configuracin del grfico:

Type: Pie Chart


Theme: Default
Series Column: Country
Values Column: Quantity
Ordered
Chart Title: Cantidad
Guarde el dashboard

Ordenada

Laboratorio: Actividades
Seleccione en la barra de men Archivo -> Nuevo -> Analyzer Report
Seleccione el cubo SteelWheels: SteelWheelsSales
Colocar Line y Sales en la vista de anlisis, adems agregar Territory al rea de filtro

- Colocar el valor por defecto

- Marcar el check
- Colocar el nombre del parmetro
igual al parmetro del Dashboard

Laboratorio: Actividades
Cambiar la vista a grfico, seleccione Bar:

Guardar la vista

Laboratorio: Actividades
Agregar la vista de anlisis en el otro recuadro del Dashboard:

Guardar la vista

Laboratorio: Actividades
Agregue el filtro en la seccin Prompts
Click en el botn

Configurar el filtro como la imagen a continuacin:

Query:
select distinct(territory)
from offices

Laboratorio: Actividades
Marcar cada uno de los recuadros y configurar en la pestaa de

Parameters, el filtro Territorio que el objeto va a escuchar para


actualizarse

Guardar la vista
Quitar el modo de edicin

y previsualizar el dashboard

Fin del
Lab

Agenda del Curso


Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

Community Dashboard
Framework

Community Dashboard Framework (CDF)


Caractersticas:
Un framework integrado a Pentaho
para desarrollar dashboards
Disponible en la versin Community y
Enterprise
Provee componentes para mostrar
elementos grficos, tomar parmetos de
entrada, etc.
El desarrollo de los dashboards se
realiza a travs de javascript.

CDF: Arquitectura
Plantilla de Pie y Cabecera
Plantilla de Layout
Component
es
Javascript

Formulario
HTML

xdcf
(ndice
)
xcdf expone el
dashboard y provee
un punto de entrada
al mismo

Formulario html indica la disposicin de


los elementos visuales mediante etiquetas
html (<div>)

xaction
s
xactions alimentan los componentes del dashboard

CDF: Plantilla de Cabecera y Pie de Pgina


Provee una plantilla por defecto
Se denominan:
template-dasboard.html
template-dasboard-mantle.html
Se encuentra en /pentaho-solutions/systempentaho-cdf
Ejemplos de otras plantillas disponibles
Permite definir cabeceras y pie de pginas comunes para los
dashboards de una solucin.
til para branding empresarial

CDF: Plantilla de Layout


Permite definir la forma en la cual se disponen los elementos
visuales del dashboard
Es un archivo html
Aloja los elementos visuales que se deben mostrar (cdigo
javascript)

Proceso de Curso
Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

CDF: Componentes
Los componentes permiten la creacin de contenido para mostrarse en
el dashboard.
Se definen y configuran utilizando javascript
Los objetos de javascript debe ir en la plantilla de layout
Algunos componentes que se han implementado:
check

textInput

dateInput

xaction

Radio

jpivot

select

map

selectMulti

mapBubble

text

check

CDF: Creacin de Elementos Visuales

Se configuran los parmetros, datos de entrada y comportamiento del


objeto (respuestas a eventos)
Pueden ser grficos, reportes y tambin elementos de interaccin
como botones, selectores de fecha, etc.
Pueden alimentarse de un xaction (datos de entrada o contenido)
Se puede crear dependencias entre componentes

CDF: Propiedades de Componentes


Los componentes de CDF tienen un conjunto de propiedades que
definen su comportamiento y apariencia
Las propiedades ms comunes son:
name: Nombre del componente
type: Tipo de componente
listeners: Cambios en estas variables hacen refrescar el
componente
parameter: La variable del dashboard que este componente cambia
htmlObject: El id de la etiqueta que muestra este componente
(generalmente <div>)
executeAtStart: Si se debe ejecutar o no este componente al
iniciar el dashboard

CDF: Propiedades de Componentes (Cont)


Otras propiedades:
solution: solucin del xaction
Solo se usan
path: ruta al xaction en la solucin
cuando el
action: Nombre del xaction a ejecutar
componente
parameters: Parmetros para ejecutar el xactionxaction
preExecution: Funcin javascript que se ejecuta antes de ejecutar
el componente
postExecution: Funcin javascript que se ejecuta despus de
ejecutar el componente
preChange: Funcin javascript que se ejecuta antes de refrescar el
objeto debido a un cambio
postChange: Funcin javascript que se ejecuta despus de
refrescar el objeto debido a un cambio

CDF: Componentes Ejecutar xaction

Eventos:
Listeners: est atento por si cambia el valor de la lnea de
producto y el territorio
Parameters: toma los dos valores como parmetros al momento
que detecta un cambio en ellos y vuelve a refrescarse

CDF: Componentes Selector de Fecha

Este objeto no toma datos de un xaction


postChange: Luego de refrescarse mostrar la fecha seleccionada al
usuario en un dilogo

CDF: Componentes Selector

Especificar:
Los datos de entrada se configuraron dentro del objeto, pero pueden
venir de un xaction
valueAsId: Se puede especificar si lo que recibe la variable region es
el nombre o el identificador numrico en el valuesArray
Si valueAsId es true, entonces no se tiene que especificar el
identificador numrico

CDF: Componentes Texto

Sirve para mostrar texto en el dashboard


Se le puede pasar parmetros o variables definidas en javascript

CDF: Creando un Dashboard


ndice (Expone el Dashboard en la Cnsola de Usuario)
Plantilla de Layout
Elementos visuales, fuentes de datos para componentes

Plantilla de cabecera y pie


Componentes visuales
Acepta mltiples fuentes
de datos
Se pueden crear nuevos
componentes visuales a
partir de la biblioteca del
CDF

Agenda del Curso


Conceptos bsicos de los Tableros de Controles
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregando Elementos
Laboratorios
Pentaho Community Dashboard Framework (CDF)
Arquitectura
Componentes
Laboratorios

Laboratorio: Crear un elemento visual


Objetivo: Crear y mostrar
elementos visuales usando
componentes de CDF.

Requisitos:
Instalacin del BI Server
Pentaho Design Studio

Prelaboratorio: Las conexiones estn


configuradas?

La conexin SampleData debe estar definida dentro del Enterprise

Console
Si no est creada, crearla ahora

Laboratorio 1: Exponer un nuevo dashboard a


Pentaho

Se crear una carpeta en la cnsola llamada

Dashboard Curso CDF


En ella alojaremos todos los ejercicios
En la primera parte crearemos un dashboard de
prueba.

Dashboard de Prueba

El dashboard de prueba tendr un ttulo y un grfico de barras


alimentado por un xaction.

Paso 1: Crear la carpeta

Abrir Pentaho Design Studio y crear una carpeta llamada


curso_cdf en pentaho-solutions

Paso 2: Hacer la carpeta visible


Crear los archivos index.xml e

index.properties. Se pueden copiar de


archivos existentes para luego
modificarlos.

Paso 3: Modificar index.xml

Este archivo da visibilidad a la carpeta desde la Consola de Usuario


Las variables %name y %description toman sus valores del archivo

index.properties

Paso 4: Modificar index.properties

name le dar el nombre a la carpeta que se mostrar en la

Consola de Usuario

Paso 5: Exponer un nuevo dashboard

De /pentaho-solutions/bi-developers/cdf-samples/10-cdf copiar los archivos

information_dashboard.xcdf y template.html y pegar al directorio creado


Renombrar a prueba.xcdf y prueba.html. Esto permitir al usuario acceder al dashboard desde la
cnsola de usuario

Paso 6: prueba.xcdf

Editar prueba.xcdf como se muestra


Le dar el nombre y un punto de entrada al dashboard desde la

Consola de Usuario

Paso 7: prueba.html
Editar prueba.html

como se muestra
Se determina el
layout del ttulo y
del grfico que se
mostrar

Paso 8: Grfico
Agregar este cdigo

a la parte inferior del


archivo prueba.html
Refrescar y probar en
la consola de
usuario. Funcion?

Laboratorio 2:

Configurar la Plantilla de Cabecera y Pie de Pgina


Objetivo:
Crear cabeceras y pies
personalizados.

Requisitos:
Instalacin del BI Server
Pentaho Design Studio

Laboratorio 2:

Configurar la Plantilla de Cabecera y Pie de Pgina

Queremos cambiar la cabecera y eliminar el pie que el CDF provee


por defecto

Paso 1: Eliminar Pie

Eliminar este cdigo de /pentaho-solutions/system/pentahocdf/template-dashboard-mantle.html

Paso 2: Modificar Cabecera


Modificaremos la

cabecera que se
muestra en la
cnsola de usuario.
Es una etiqueta div
id=header

Paso 2: Modificar Cabecera


La nueva cabecera

mostrar el logo de
Pentaho.
El logo es una
imagen alojada en el
servidor de Pentaho,
solo hay que
referenciarla.

Paso 2: Modificar Cabecera

Comentar esta lnea al comienzo del archivo

Cambiar en la seccin del div header como se indica


Refrescar la solucin, actualizar las configuraciones del sistema (system settings) y

probar en la cnsola. Funcion?

Paso 2: Modificar Cabecera


Resultado

Laboratorio 3: Dashboard CDF


Objetivo: Desarrollar un
dashboard usando CDF que
obtenga datos de Steel Wheels y
muestre un elemento grfico.

Requisitos:
Instalacin del BI Server
Pentaho Design Studio

Laboratorio 3: Grfico

Primero se expondr un nuevo dashboard a Pentaho y luego se


configurarn las plantillas y componentes respectivos

Paso 1: Exponer en nuevo dashboard

Copiar los archivos prueba.html y prueba.xcdf, pegar al mismo directorio


Renombrar a grafico_barra.xcdf y grafico_barra.html

Paso 2: Asignar nuevo Nombre

Editar el archivo .xcdf como se muestra

Paso 3: Configuracin HTML

Editar el archivo .html como se muestra

Paso 4: Crear Objeto de Barra


Un objeto javascript
que provee las
opciones de
configuracin del
grfico y en el cual se
define el modelo
multidimensional y la
consulta sobre dicho
modelo para traer los
datos

Objeto que
define el grfico

Agregar esto al archivo a la plantilla de layout


La definicin del grfico se hace en un objeto separado, alimenta al objeto
que muestra el grfico

Paso 5: Verificar que funcione

Refrescar el repositorio de soluciones, buscar la carpeta y el archivo


en Pentaho User Console
Funcion?

Laboratorio 4: Dashboard Interactivo


Objetivo: Agregar
interactividad al Dashboard que
se ha diseado.

Requisitos:
Instalacin del BI Server
Pentaho Design Studio

Grfico Parametrizado

Queremos que el usuario pueda seleccionar las ventas por lnea


de producto

Paso 1: Crear Nuevos Archivos de Trabajo

Copiar los archivos .xcdf y .html del dashboard anterior, renombrar y


pegar en la misma carpeta como grafico_barra_parametrizado.html y
grafico_barra_parametrizado.xcdf
La estructura de archivos debera verse como en la figura

Paso 2: Renombrar el ndice

Cambiar el nombre del archivo .html respectivo

Paso 3: Crear Objeto Selector

Agregar esto al archivo .html nuevo, antes del objeto del grfico de
barras

Paso 4: Modificar el layout

Incluir el <div> para el selector

Paso 5: Asegurar que se carguen los componentes

Actualizar la lista de componentes que se deben inicializar


Refrescar el repositorio y probar
Funcion?

Paso 6: Actualizar LISTENERS y Parmetros del


grfico

Paso 7: Refrescar y revisar


Refrescar el
repositorio y
probar
Funcion?

Laboratorio 5: Grficos
Objetivo: Agregar otro
grfico interactivo.

Requisitos:
Instalacin del BI Server
Pentaho Design Studio

Dos Grficos

Tambin queremos que se vean las ventas de los ltimos 12 meses


para esa lnea de productos.

Paso 1: Crear Nuevos Archivos de Trabajo

Copiar los archivos .xcdf y .html del dashboard anterior, renombrar y


pegar en la misma carpeta como dos_graficos.html y dos_graficos.xcdf
La estructura de archivos debera verse como en la figura

Paso 2: Renombrar el ndice

Cambiar el nombre del archivo .html respectivo

Paso 3: Crear Segundo Grfico

Se separa en dos objetos como el grfico anterior

Paso 4: Modificar el Layout

Asegurarse que concuerdan los nombres de los div con los


parmetros de los objetos

Paso 5: Cargar el objeto nuevo

Asegurarse que cargue el segundo grfico


Refrescar el repositorio y probar
Funcion?

Dashboard interactivo con dos grficas

Laboratorio Opcional: Interaccion Avanzada


Objetivo: revisar el
dashboard Avanzado.html.

Requisitos:
Instalacin del BI Server
Pentaho Design Studio

Resultado Avanzado

CDF: Documentacin
Ejemplos y documentacin disponibles en
la cnsola de usuario en la solucin BI
Developer Examples

http://wiki.pentaho.com/display/COM/Community+

Community Dashboard
Editor
(CDE)

CDE Community Dashboard Editor


Es una herramienta grfica para crear, editar y previsualizar
Dashboards, esta se integra con Pentaho, se utiliza desde la Consola de
Usuario.
Ayudante para generar dashboard, permite establecer el cuerpo a
travs de filas y columnas, generando el cdigo html, adems ofrece
algunas plantillas que pueden utilizarse para crear la estructura del
dashboard.

CDE Diseo de Plantilla (Layout)


El diseo del Dashboard puede ser creado a travs de la combinacin de
filas y columnas, tambin puede ser establecido por bloques HTML y puede
incluir imgenes.

2.
Permiten
agregar
filas,
columnas
y codigo
HTML

1. Seccin Layout

CDE Conexin de Datos (Datasources)


El contenido del dashboard puede provenir de diferentes fuentes, tales como:

- Bases de Datos

- Cubos Mondrian

- Archivos XML

- Transformaciones ETL

- Pentaho Metadata

1. Seccin Data Sources

2. Seleccionar
la Categora
de acuerdo a
la conexin
que desee
crear

CDE Componentes(Component)
1. Componentes visuales: corresponde por ejemplo a tablas, cajas de texto,

grficos, reportes, vistas Olap, etc.


2. Parmetros: representan los valores que son compartidos por los
componentes, le aportan interaccin al dashboard.
3. Scripts: cdigo JavaScript que permite personalizar la apariencia y
comportamiento de otros componentes.

1. Seccin Componentes

2. Seleccionar
el tipo de
componente que
desea agregar

CDE Componentes(Component)
En general la mayora de los componentes comparten las siguientes propiedades:

executeAtStart: para indicar si el componente se carga al ejecutar el


dashboard.
HtmlObject: donde se mostrar el objeto dentro dentro del dashboard.
Datasource property: para indicar que datasource ser utilizado por el
componente.
preExecution: funcin que prepara los datos antes de cargar el componente.
postExecution: funcin que es ejecutada despus de cargar el componente.
Listeners: lista de variables que actualizarn el componente.

Laboratorio 6: CDE
Objetivo: Instalar el CDE en el
Pentaho para quedar integrado
en el Consola de Usuario.

Requisitos:
Descomprimir el archivo CDE-bundle-1.0-RC3.tar.bz2.
Copiar las carpetas de acuerdo a las instrucciones.

Laboratorio 6: Copiar Carpetas


Instrucciones:

Copiar las subcarpetas en las carpetas correspondientes en el pentaho


solutions, recordando eliminarlas si ya existen en el Pentaho.
. Las carpetas a eliminar son:
a) /pentaho-solutions/bi-developers/cdf-samples
b) /pentaho-solutions/cdf
c) /pentaho-solutions/system/pentaho-cdf
2.
Reiniciar el servidor de Pentaho.
3.
Refrescar el repositorio.
1.

Laboratorio 6: Copiar Carpetas


El CDE se crea como un plugin de Pentaho dentro de la Consola de Usuario.

CDE - Componentes

CDE Componentes(Component)
Generic:
Permiten establecer los parmetros que son utilizados en los
filtros y por ende en los datasources.

CDE Componentes(Component)
Scripts:
Permite crear cdigo Javascript, para modificar el
comportamiento de los componentes en el dashboard.

CDE Componentes(Component)
Others:
Ofrece una serie de componentes para agregar objetos externos al
dashboard, como: reportes, vistas de anlisis, mens, botones, etc.

CDE Componentes(Component)
Charts:
El CDE utiliza el Componente CCC (Community Charting Components)
para generar diversos grficos como: torta, Bar, Linea, etc.

CDE Componentes(Component)
Selects:
Ofrece diferentes componentes que en su mayora se utiliza en los
filtros, estos son: Lista desplegable, radio button, calendario, casilla de
texto, etc.

CDE Componentes(Component)
Custom:
Contiene el Raphael Component, Raphael es un framework
JavaScript que permite crear grficos vectoriales en el explorador, ver
figuras:

Laboratorio 7: CDE Crear Dashboard


Objetivo: Crear un dashboard
esttico utilizando las
funcionalidades que ofrece el
CDE.

Laboratorio 7: CDE Crear Dashboard


Presionar el icono

o el botn New CDE Dashboard, para abrir el ayudante.

Laboratorio 7: CDE Crear Dashboard


Presionar en el men superior New, el CDE le dar la opcin de
guardar de una vez el dashboard, siempre que vaya a crear uno
nuevo.

Laboratorio 7: CDE Crear Dashboard


Vamos a la seccin de Layout, para crear la plantilla del Dashboard,
agregando filas y columnas de acuerdo a la forma que se le quiera dar.

2. Para
agrega
r
la fila

1.
Presione
para
ingresar a
Layout

Laboratorio 7: CDE Crear Dashboard


Coloque una columna(Column) en la primera fila(Row) creada, para
ubicar el titulo del Dashboard all.

1. Presionar
para
agregar
columna
2. Atributos
para
personaliza
r la
columna

Laboratorio 7: CDE Crear Dashboard


Agregue otra fila con 2 columnas para colocar all los objetos del Dashboard,
recuerde configurar el Span Size en las columnas para asignarle el tamao.

1. Dos columnas:
- Grafico
- Tabla de Datos

2. Colocar en la propiedad
Name, el nombre html
correspondiente para esa
seccin.

Laboratorio 7: CDE Crear Dashboard


Agregue 2 datasource (conexin a los datos) para crear un query para
la grfica y uno para la tabla.

2. Coloque aqu
el nombre de la
conexin a la
BD

1. Agregue 2
componentes
de SQL Queries

3. Presione para
escribir el query
en esta seccin.

Laboratorio 7: CDE Crear Dashboard


Escribir los queries en cada objeto.

Quer
y1

Query
2

1. Una vez finalizado


presione OK.

Laboratorio 7: CDE Crear Dashboard


Vaya a la seccin de Componentes para agregar el objeto para el
ttulo.
1. Presione
para ingresar
a
Componentes
2. Agregamos un
Componente de
Texto
3. Expression: lo que se va a
mostrar en cdigo html.
HtmlObject: coloque el nombre de
la columna donde queremos que
aparezca dicho objeto

Laboratorio 7: CDE Crear Dashboard


Agregamos un Table Component para la tabla de datos que har
referencia al segundo query.

1. Agregamos
un
Componente
de Texto

2. En HtmlObject
colocamos el
nombre de la
columna donde
quiere que
aparezca el
objeto

3. Nombre del
datasource
correspondiente

Laboratorio 7: CDE Crear Dashboard

Marcar la propiedad Column Headers (Cabecera de Columnas) para


agregar el nombre a las columnas, colocar tantos Arg como columnas
desee.

Colocar tantos
Arg como
columnas sean
necesarias

Para agregar
mas columnas
a la tabla
Presione OK
para finalizar

Laboratorio 7: CDE Crear Dashboard


Agregamos el grafico, en el men izquierdo en la seccin de Charts ->
CCC Pie Chart

Name: grafica01
Name: grafica01
Title: Presupuesto por Departamento
Datasource: presupuesto_bd
Width: 200
Height: 200
HtmlObject: grafica01

Laboratorio 7: CDE Crear Dashboard

Presione Preview para previsualizar el Dashboard.

Presione
Preview

Laboratorio 7: CDE Crear Dashboard

Previsualice el Dashboard, cualquier cambio que necesite en cuanto a


forma, regrese a la seccin de layout para personalizar.

Resumen del curso

Felicitaciones!!!!

FIN

También podría gustarte