Gráficos en SAP Appgyver
En esta lección aprenderás a visualizar datos en forma de gráficos en SAP AppGyver
Ya sabes que cuando hablamos de SAP AppGyver también nos referimos a su hermano mayor SAP Build Apps.
A lo largo de esta y otras lecciones y artículos que hablo en mi web, cuando aludo a AppGyver estoy haciendo referencia a ambas versiones (SAP AppGyver y SAP Build Apps).
Puedes leer más sobre estas dos versiones en mis artículos publicados.
El objetivo de esta lección es demostrar que podemos incrustar gráficos en pantallas de aplicaciones creadas por AppGyver, sin extensos conocimientos de JavaScript.
Descubriremos como funcionan los componentes visuales gráficos.
ÍNDICE
Paso 1.1: Diseño interfaz de usuario
Paso 1.2: Agregar fuente de Datos
Paso 1.3: Añadir Variables de página y Lógica
Paso 1.4: Añadir código JavaScript
Paso 2.1: Diseño interfaz de usuario
Paso 2.2: Agregar fuente de Datos
Paso 2.3: Añadir Variables de página y Lógica
Paso 2.4: Añadir código JavaScript
COMPONENTE DE VISTA CHART
En el momento en que escribo esta lección, el único componente de vista dedicado a la visualización de múltiples formas de gráficos se denomina: D3.js/Google chart. Con el que se accede a la producción de gráficos desde los productos: Google Charts y D3.js
Google Charts es una herramienta creada para desarrolladores web con el fin de que puedan incrustar gráficos en sus aplicaciones. Ofrece una gran variedad de gráficos diseñados para satisfacer cualquier necesidad de visualización de datos. Estos gráficos se basan en la tecnología pura HTML5/SVG
Por otro lado, D3.js (o simplemente D3 por las siglas de Data-Driven Documents) es una biblioteca de JavaScript para producir, a partir de datos, infogramas dinámicos e interactivos en navegadores web y aplicaciones móviles. Hace también uso de tecnologías SVG, HTML5, y CSS.
D3.js permite tener control completo sobre el resultado visual final.
Los componentes de vista de AppGyver suelen ser fáciles de usar y sus propiedades bastante intuitivas, sin embargo, las propiedades de este componente visual: D3.js/Google chart no son tan instintivas.
Este componente de vista requiere un formato específico de los datos y de definición del gráfico.
Sin embargo, no hay necesidad de preocuparse. Si sigues los pasos que detallo en esta lección y pruebas los diferentes tipos de gráficos que vamos a ver, encontrarás que NO es tan complicado de usar y podrás crear cualquier panel de gráfico para tu aplicación.
¡¡Como este!!
GRÁFICO DE BARRAS
PASO 1.1: Diseño interfaz de usuario
Nuestra interfaz de usuario, en esta app de pruebas, será muy sencilla. Básicamente, veremos en la pantalla de nuestro dispositivo móvil un tipo de gráfica de datos y le pondremos un texto como encabezado de la misma, por ejemplo, «TUTORIAL«.
Usaremos dos componentes de vista, uno de texto TITLE que encontraremos en la pestaña CORE del menú lateral izquierdo y que trasladaremos a nuestro lienzo para modificar su propiedad CONTENT por «Tutorial» y otro de tipo CHART.
Este segundo componente, el COMPONENTE de vista CHART, lo buscaremos en el marketplace de la herramienta.
Este marketplace lo encontramos en el menú lateral izquierdo de la pantalla principal.
Escribimos «chart» y debería aparecer «D3.js/Google chart «.
Hacemos clic en instalar y el estado del componente debería cambiar a «Última versión instalada» (Latest version installed).
Volvemos al lienzo principal y cambiamos a la pestaña Instalado (Installed).
Arrastramos y soltamos el componente Chart al centro de nuestra pantalla de nuestro proyecto de app.
Es importante saber que en el entorno de trabajo de AppGyver Composer, no veremos realmente el tipo de gráfico. Solo veremos un icono como el de la imagen superior.
Cuando visualicemos nuestra app en el dispositivo móvil (a través de la app de AppGyver), veremos exactamente como es el gráfico.
Paso 1.2: Agregar fuente de Datos
Para representar datos, necesitamos datos.
En esta lección vamos a tomar prestado los datos de una fuente mundialmente famosa: Northwind
La base de datos Northwind es archiconocida y fue creada por Microsoft. Se lleva utilizando más de una década para aprender a trabajar con bases de datos SQL Server en infinidad de artículos, libros y cursos.
Su ventaja es que es una base de datos sencilla, pero al mismo tiempo contiene gran cantidad de información, relaciones, … y simula las necesidades básicas de una empresa sencilla de importación de productos alimentarios. Contiene tablas para gestionar la información de productos, clientes, proveedores, personal, pedidos, transportistas, etc.
Nos vamos a la pestaña superior DATOS, hacemos clic en «Add Data Source» y selecionamos «OData integration«
Vamos a usar los datos de Northwind mediante un proceso de integración OData.
Si quieres saber que es OData, te recomiendo el artículo ODATA de SAP.
OData (Open Data Protocol) es un estándar aprobado que define un conjunto de mejores prácticas para crear y consumir REST APIs.
REST es la abreviatura de REPRESENTATIONAL STATE TRANSFER.
REST es cualquier interfaz entre sistemas que use HTTP para obtener datos o generar operaciones sobre esos datos en todos los formatos posibles, como XML y JSON.
OData permite la creación y el consumo de API que sean interoperables, todo ello de forma simple y estándar.
Para acceder a los datos de Northwind, escribimos la URL de destino en la configuración Odata integration
Escribimos «https://services.odata.org/v4/northwind/northwind.svc/» como URL base.
A la izquierda de esa pantalla, aparecerá todos los tipos de datos disponibles en Northwind, nosotros usaremos únicamente datos de facturas (invoices).
Grabamos haciendo clic en el botón SAVE DATA RESOURCES y salimos de esta pantalla.
En la pantalla principal, ahora Invoices está definido como la fuente de datos. Hacemos clic en Invoice OData y elegimos list (es el formato «lista» de todos los datos)
Nos pasamos a la pestaña TEST y hacemos clic en Ejecutar prueba (RUN TEST). Si el estado es correcto y aparecen datos, la prueba es exitosa y veremos el texto en verde: STATUS OK.
Ahora nos vamos a la pantalla de VARIABLES.
Tenemos que definir la variable de datos (DATA VARIABLE) de nuestra fuente de datos (Northwind).
Por definición, las variables de datos son como variables de página, pero su esquema está definido por el recurso de datos al que están vinculados, en este caso a Northwind.
Además, contienen lógica predeterminada para obtener datos del backend y completarlos en la variable, es decir, tienen un esquema lógico específico de su fuente de datos (Northwind).
Seleccionamos Variables de datos (DATA VARIABLES), hacemos clic sobre «ADD DATA VARIABLE» y seleccionamos «Invoices» (que es nuestra fuente de datos).
Automáticamente, nos aparecerá una variable de datos denominada Invoices1
Después de agregarlo, se vería como a continuación.
Cada variable de datos trae consigo un esquema de flujo de datos que veremos en el panel de propiedades de flujos de datos, en principio no nos interesa este esquema, así que eliminamos los componentes de flujo de esta variable, exactamente las que están dentro del rectángulo rojo de la imagen de arriba. Después guardamos el progreso.
Paso 1.3: Añadir Variables de página y Lógica
Después de definir la fuente de datos (Northwind y la variable Invoices1), vamos a crear cuatro (4) variables de página.
Recordemos que las variables de página (PAGE VARIABLES) existen en el contexto de la página actual. Se activan cuando se abre la página y se eliminan del estado de la aplicación cuando se cierra la página.
Deben usarse para cosas que existen en el contexto de la página actual, como datos de formulario, estado de carga de la página actual, filtros seleccionados, etc.
Desde la pantalla de variables vamos a crear 4 variables de página. En la siguiente tabla aparecen sus nombres y tipo, tres de ellas la definiremos con un tipo «list of list«, ya que este tipo es el que admite el componente chart que vamos a usar en esta app:
| Nombre Variable | Type |
| chartData | list of lists of texts / numbers |
| chartFunctionString | text |
| listHeader | list of lists of texts |
| listItem | list of lists of texts / numbers |
Volvemos a la vista: VIEW, abrimos el panel inferior de lógica para la página que estamos trabajando.
Buscamos el componente de lógica «Get record collection» y «Set data variable» en el panel lateral izquierdo y lo trasladamos al panel de lógica realizando las conexiones de los nodos como se ve en la siguiente imagen:
El componente GET RECORD COLLECTION , es un componente tipo GET, es decir, permite recibir datos, en este caso permite obtener una colección de registros de datos en formato «lista» (list).
El componente SET DATA VARIABLE, es un componente tipo SET, es decir, permite asignar datos, en este caso permite establecer esa colección de registros en una variable de datos en la página.
Ahora establecemos las propiedades de estos componentes de flujo.
Vamos a reducir la cantidad de datos con la que vamos a trabajar, así evitamos lentitud en los procesos.
Para ello, realizaremos un filtrado de datos en el componente GET RECORD COLLECTION.
Para el componente GET RECORD COLLECTION, creamos un filtro para la base de datos (FILTER CONDITION) usando la opción: OBJECT WITH PROPERTIES, limitándonos a un solo producto, en esta práctica usaremos el productID=63 (así mantenemos un volumen de datos pequeño).
Para el componente SET DATA VARIABLE seleccionamos como RECORD COLLECTION la propiedad OUTPUT VALUE OF ANOTHER NODE: Get record collection > Collection of records
Fíjate como queda la configuración en la imagen siguiente.
A continuación, vamos a transformar nuestro conjunto de datos obtenidos en formato «List of lists«.
Para ello agregamos tres nuevas funciones de «SET PAGE VARIABLE» y las conectamos por nodos como se ve en la imagen de abajo.
El componente SET PAGE VARIABLE asigna el dato a una variable de página.
Vamos a asociar cada uno de estos tres componentes de lógica (Set page variable) a cada una de las tres variables de página definidas anteriormente con el tipo «list of list»: listHeader, listItem y chartData.
listHeader
Para este primer componente de flujo (SET PAGE VARIABLE), en las propiedades de la columna de la derecha, seleccionamos como variable (Variable name): listHeader y le asignamos los siguientes valores como fórmula:
[['País', 'Precio Unidad', 'Transporte']]Ver imagen:
listItem
En el segundo componente de flujo SET PAGE VARIABLE, crearemos una fórmula que asigne los datos de la fuente de datos (invoices1) a la variable de página listItem.
En este caso la fórmula es:
MAP<item>(data.Invoices1, [ LOOKUP(item, "Country"), NUMBER(LOOKUP(item, "UnitPrice")), NUMBER(LOOKUP(item, "Freight")) ] )Usamos la función fórmula «MAP» que transforma cada elemento de una lista en otra lista
Revisa cada elemento de la lista dada y evalúa una fórmula para cada uno de ellos. Devuelve una lista con los valores evaluados.
La lista devuelta tiene la misma longitud que la lista original y el orden de sus elementos corresponde al orden en la lista original.
Esto es necesario porque la base de datos: Invoices, está en formato «object» (objeto) y los componentes de gráfico de AppGyver solo aceptan formato de lista de lista (list of list).
Para desglosar la fórmula, obtiene todos los datos de los campos «Country», «UnitPrice» y «Freight» y los pasa a listItem en la estructura de lista de listas.
Puedes reemplazar el nombre de los campos si desea probar con otros campos.
chartData
En el tercer componente de flujo SET PAGE VARIABLE, crearemos una fórmula que combine los datos de listHeader (encabezado) con los datos de listItem (elementos) en una variable tipo lista de listas (list of list), como es chartData.
chartData será la variable de la que tome los datos el componente de vista D3.js/Google Chart
UNION es la función fórmula para hacer este trabajo.
Esta función realiza la «Unión» de dos listas, combina las dos listas y devuelve una lista que contiene valores únicos de ambas listas dadas. En otras palabras, la lista devuelta no contiene valores duplicados.
Cuando llegues aquí, ¡guarda tu progreso!
[pum_scroll_trigger popup=»7873″]
Paso 1.4: Añadir código JavaScript
A continuación vamos a introducir algo de código JavaScript, esta parte es la menos «NoCode» de la creación de esta app.
Para introducir código JavaScript necesitamos incorporar al panel de componentes de flujo un componente JavaScript, lo encontraremos en el panel de componentes de la izquierda, dentro del grupo ADVANCED (se distingue por ser un componente de color verde)
También necesitamos incorporar otro componente de flujo SET PAGE VARIABLE a la que asignaremos la variable chartFunctionString.
Realizamos las uniones de estos componentes tal y como se ve en la imagen inferior.
Primero, le damos nombre al componente JS, para ello hacemos clic en el panel derecho de propiedades sobre la palabra ADVANCED e ingresamos un nombre como: «Google Charts function string«
Segundo, hacemos doble clic sobre el componente JavaScript verde y nos aparecerá una ventana emergente con el panel de configuración.
En esta pantalla debemos pegar el siguiente código JavaScript:
// El nombre de la función debe ser chartExecutor
function chartExecutor() {
// Se puede usar cualquier biblioteca de Google Charts
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable("$chartData");
const options = {
chart: {
title: 'Comparación precio unitario por transporte para el producto nº63',
subtitle: 'datos de la factura'
},
hAxis: {
title: 'Country',
minValue: 0,
},
vAxis: {
title: 'Price'
},
bars: 'horizontal',
height: 400,
colors: ['#1b9e77', '#d95f02']
};
// El ID del elemento debe ser chart_data_div
// Para dispositivos IOS se usa google.charts.Bar
const chart = new google.charts.Bar(document.getElementById('chart_data_div'));
// Para dispositivos Android se usa google.visualization.BarChart
// const chart = new google.visualization.BarChart(document.getElementById('chart_data_div'));
chart.draw(data, options);
}
}
// El componente Chart consume la función de chart como una cadena (string)
const funcAsString = chartExecutor.toString();
return { funcAsString }Después de pegar este código hay que asegurarse de agregar una salida que denominaremos funcAsString y que está en tipo de texto
Ten en cuenta que la sintaxis para ver el «gráfico» (chart) es diferente entre el dispositivo IOS y el dispositivo Android. Para dispositivos IOS se usa google.charts.Bar y para dispositivos Android se usa google.visualization.BarChart
Al componente SET PAGE VARIABLE se le asigna a la variable «chartFunctionString» y a los valores generados por la función JS creada anteriormente: Google chart / funcAsString.
Finalmente, volvemos a la vista de componentes y configuramos el componente de vista D3.js/Google chart .
Como Chart function declaramos la variable chartFunstionString y como Chart data declaramos la variable chartData.
¡Eso es todo!
Hemos finalizado y para ver el resultado obtenido, lo comprobamos en la app vista previa de AppGyver.
GRÁFICO CIRCULAR
Con el mismo método podemos crear otros tipos de gráficos. Vamos a crear un gráfico circular siguiendo los pasos anteriores.
Paso 2.1: Diseño interfaz de usuario
Este paso es idéntico al Paso 1.1 del ejercicio anterior. Introducimos otro componente de vista D3.js/Google Chart bajo el componente anterior (gráfico de barras).
Paso 2.2 : Agregar fuente de Datos
Usaremos la misma fuente de datos: Northwind.
La integración OData la haremos con la misma URL:
https://services.odata.org/v4/northwind/northwind.svc/
Pero para este tipo de gráfica seleccionaremos el conjunto de datos «Category_Sales_for_1997» en vez de «Invoices«.
Igualmente que en el Paso 1.2, hacemos el TEST para verificar la correcta captación de datos y veremos el texto en verde: STATUS OK.
Definimos otra variable de datos (DATA VARIABLE) de Northwind para estos datos: «Category_Sales_for_1997«
Seguimos los mismos pasos del Punto 1.2 y seleccionamos la variable de datos Category_Sales_for_19971
Recuerda que cada variable de datos trae consigo un esquema de flujo de datos que hay que eliminar.
Paso 2.3: Añadir Variables de página y Lógica
Repetimos la creación de 4 variables (como en el paso 1.3).
En la siguiente tabla aparecen sus nombres, para diferenciarlas de las variables de página del gráfico de barras, le añadimos un 1 al final del nombre y establecemos el mismo tipo:
| Nombre Variable | Type |
| chartData1 | list of lists of texts / numbers |
| chartFunctionString1 | text |
| listHeader1 | list of lists of texts |
| listItem1 | list of lists of texts / numbers |
Después de crear las 4 variables de página tenemos que introducir sus componentes de flujo tal y como lo vimos en el punto 1.3 anterior, en este caso, el componente de lógica «Get record collection» y «Set data variable» estarán asociados a las DATA VARIABLE: «Category_Sales_for_1997«.
En este caso, GET RECORD COLLECTION no tendrá ningún filtro de datos.
Ahora introducimos tres componentes de lógica (Set page variable) para cada una de las tres nuevas variables de página definidas anteriormente con el tipo «list of list»: listHeader1, listItem1 y chartData1.
Para listHeader1, el encabezado, le añadimos la fórmula: [[‘Category’, ‘Sales’]]
Para la variable listItem1, asignamos la fórmula:
MAP<item>(data.Category_Sales_for_19971, [ LOOKUP(item, "CategoryName"), NUMBER(LOOKUP(item, "CategorySales")) ] )Finalmente, para la variable chartData1 usamos la misma fórmula UNION para combinar estas dos variables en una lista de variables de listas, igual que hicimos para el gráfico de barras.
UNION(pageVars.listHeader1, pageVars.listItem1)
Paso 2.4: Añadir código JavaScript
Igual que hicimos en el punto 1.4, para el gráfico circular también tenemos que añadir código JavaScript.
Introducimos al panel de componentes de flujo un componente JavaScript y un componente de flujo SET PAGE VARIABLE a la que asignaremos la variable chartFunctionString1.
Le damos nombre al componente JS: «Google Charts function string1» y hacemos doble clic sobre el componente JavaScript verde para ingresar el siguiente código JavaScript:
// El nombre de la función debe ser chartExecutor
function chartExecutor() {
// Se puede usar cualquier biblioteca de Google Charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable("$chartData");
const options = {
title: 'Ventas por categorías',
is3D: true,
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
// El ID del elemento debe ser chart_data_div
// Para dispositivos IOS se usa google.charts.Bar
const chart = new google.visualization.PieChart(document.getElementById('chart_data_div'));
// Para dispositivos Android se usa google.visualization.BarChart
// const chart = new google.visualization.BarChart(document.getElementById('chart_data_div'));
chart.draw(data, options);
}
}
// El componente Chart consume la función de chart como una cadena (string)
const funcAsString = chartExecutor.toString();
return { funcAsString }El código JS es similar al usado para gráfico de barras, hemos sustituido algunos parámetros para adaptarlos a un gráfico circular:
Introducimos la opción is3D en true para que el gráfico circular se dibuje como si tuviera tres dimensiones.
Y con la opción
slices: { 2: {offset: 0.2},
4: {offset: 0.3},
6: {offset: 0.4},
8: {offset: 0.5},
},
Conseguimos separar «porciones» del círculo.
Al componente SET PAGE VARIABLE se le asigna a la variable «chartFunctionString1» y a los valores generados por la función JS creada anteriormente: Google chart circle/ funcAsString.
Finalmente, volvemos a la vista de componentes y configuramos el segundo componente de vista de nuestro gráfico circular: D3.js/Google chart .
Como Chart function declaramos la variable chartFunstionString1 y como Chart data declaramos la variable chartData.
¡Listo!
Hemos finalizado la configuración del gráfico circular.
Solo queda comprobar el resultado en la app de previsualización de AppGyver:
VÍDEO RESUMEN
En el siguiente vídeo podrás visualizar, de manera práctica, todo el proceso de creación de los distintos gráficos que aquí he explicado.
