miércoles, 3 de abril de 2019

Error al usar servicio Northwind con SAPUI5 - Aprendiendo a buscar errores

La semana pasada, dos lectores comentaron que el ejemplo para crear una aplicación usando el servicio oData de Northwind no funcionaba. La verdad es que el error no era nada intuitivo, "HTTP request failed", así que probé a volver a crear la aplicación a ver qué fallaba. Y, efectivamente, ahí estaba el error.

Por todos los draconianos de Krynn, yo juraría que esto antes funcionaba

¿Qué es lo que podía pasar? ¿Por qué había comenzado a fallar? Había que investigar para descubrirlo.

miércoles, 27 de marzo de 2019

Crear un gráfico en SAPUI5 (IV) - Usar eventos de interacción

Ya hemos aprendido unas cuantas cosas relacionadas con los gráficos en SAPUI5, como han sido:


Ahora vamos a ver una opción adicional con los elementos del gráfico, y es que podemos realizar acciones cuando se seleccione uno de ellos, sin necesidad de mostrar un tooltip.

Para ello usaremos una propiedad de los Vizframe, la propiedad interaction.decorations, que nos permite ejecutar una función callback cuando se muestra el tooltip (al seleccionar) y cuando se oculta (al deseleccionar).

Podemos encontrar la ayuda en la documentación específica de Vizframes, buscando en el apartado de Propiedades.

Aunque esta propiedad nos la proponen para crear nuestros propios tooltips, ya que con las funciones callback podemos recuperar el elemento seleccionado y la posición (x e y), vamos a utilizarla para otro propósito: Para mostrar un panel informativo con los puntos seleccionados y la probabilidad. No lo haremos en un tooltip, sino en un panel desplegable, y obtendremos algo como lo siguiente:


Y los pasos que seguiremos serán:


  • Crear un modelo de datos para guardar los elementos seleccionados (un string concatenado) y el total de probabilidad.
  • Añadir una propiedad al gráfico (interaction.decorations), a la que podemos asignar dos valores: showDetail, para indicar una función callback que se ejecutará al seleccionar un elemento; y hideDetail, que se ejecutará cuando se deseleccione un elemento.
  • Definir las dos funciones que se llaman desde showDetail y hideDetail, para modificar el contenido del modelo de datos.
  • Añadir a la vista XML un panel expansible para mostrar los datos que hemos seleccionado, enlazándolo con el modelo de datos.

Al final del artículo, tenemos el enlace para descargar el ejemplo en GitHub.

viernes, 22 de marzo de 2019

Crear un gráfico en SAPUI5 (III) - Tooltip a medida

En artículos anteriores, habíamos creado un gráfico en SAPUI5 para mostrar la probabilidad de éxito al tirar dos dados (2d6) y habíamos añadido un tooltip que aparecía al seleccionar uno o varios elementos del gráfico (uno de los "puntitos") y que nos mostraba la información de la última selección hecha.

Y oye, el resultado era aparente... bueno, más o menos, tampoco era para tirar cohetes en una fiesta hobbit. ¿Pero qué pasa si queremos que el tooltip muestre una información más personalizada? Por ejemplo, que nos liste todos los elementos que están seleccionados y muestre la probabilidad total de que, al lanzar los dados, el resultado sea alguno de dicho conjunto.

De eso nos vamos a encargar en este artículo, y los pasos que seguiremos serán:

  • Crear en la vista el control que vamos a utilizar: sap.viz.ui5.controls.Popover.
  • En el controlador, conectar el Popover con el gráfico (el control VizFrame): Método connect.
  • Crear en contenido personalizado del Popover. Aquí añadiremos un layout vertical con dos textos, uno para mostrar los elementos seleccionados y otro para mostrar la probabilidad total.
  • Calcular y modificar los datos a visualizar en el método que se llamará al seleccionar un elemento del gráfico: Método setCustomDataControl.
  • Crear un array de botones, que se mostrarán en el Popover para realizar acciones personalizadas adicionales: Método setActionItems.

Y el resultado que obtendremos será algo como lo siguiente:

Sí, se me ha olvidado añadir la tilde a selección, pero luego lo he hecho :P.

jueves, 21 de marzo de 2019

Cuando uno se pone a probar alternativas

Tengo que admitir que el próximo artículo que voy a publicar, relacionado con gráficos y tooltips (Vizframe y Popover), me ha costado hacerlo. Y no por la complicación ni por el tiempo dedicado a investigar (no soy para nada un experto, simplemente voy trasteando con las cosas para aprender), sino más bien por la dudas y alternativas que me iban surgiendo a la hora de desarrollarlo. ¿Y si en lugar de hacer un setText utilizo un modelo de datos, qué será más eficiente pero qué será más claro para el lector? ¿Y si uso ya de una vez bind(this) y no var that = this? ¿Cómo puedo conseguir saber qué gráfico estoy seleccionando? Tonterías así.

Al final, entre hacer, rehacer, revisar, requetehacer, volver a revisar, me ha llevado un tiempo mucho más largo de lo esperado... para lo poco que realmente aporta el artículo :(.

Eso sí, he conseguido dos cosas: Aprender mucho más, y tener una posible lista de miniartículos adicionales para añadir. No está mal la tontería, ¿no?

En cualquier caso, esto me ha dado como objetivo una posible aplicación (friki, por supuesto), para hacer más compleja aún la aplicación de gráficos: Un simulador de tiradas de dados de rol (dados de 4 caras, 6 caras, 8, 10, 12, 20, 100... y cualquier alternativa que queramos) con gráfica incorporada. Vale, aplicaciones para tirar dados hay muchas, pero yo lo que quiero es aprender.

Así que, ¿seré capaz de hacerlo y no morir en el intento? Bueno, el tiempo lo dirá.

lunes, 18 de marzo de 2019

Cursos del 2º trimestre de 2019: SAPUI5, SAP CP, HTML5, Node.js...

Porque no podemos dejar de aprender, volvemos a la carga con un buen puñado de cursos que nos pueden resultar interesantes para el desarrollo web, ya sea con SAPUI5 o con otras herramientas "más mundanas". Como siempre, centro mis selecciones en dos portales de cursos masivos online (ambos gratuitos), el específico para SAP, openSAP, con cursos en inglés, y Miriadax, con cursos más genéricos (no de SAP y no sólo de programación, sino prácticamente de cualquier cosa) y en español.

Sólo menciono los que más me interesan, que son aquellos centrados en desarrollo (generalmente web o ABAP), pero ambas webs merecen una buena visita por si hay algún otro curso que nos pueda resultar interesante. En resumen, en este post veremos:


  • Cursos de OpenSAP relacionados con SAP UX (SAP CP y SAP UI5) que se inician en breve.
  • Repaso de cursos de OpenSAP de SAP UX (Fiori, PortalSAP UI5, SAP Screen Personas, incluso Java), que ya han acabado pero que siempre podemos volver a hacer.
  • Cursos de MiriadaX de desarrollo web (HTML5, Javacript, Node.JS), programación (introducción, aplicaciones móviles, videojuegos) y metodologías ágiles.
  • Cursos de MiriadaX que ya no tienen nada que ver con programación, (o quizá sí :P) pero que a mí me apetece hacer :D: Teoría, gamificación y escritura.


Y, como siempre, hay que ver cada curso como un principio. Posiblemente no acabaremos siendo expertos en nada por haberlos hecho, pero tendremos el punto de partida para luego ya buscarnos la vida por nuestra cuenta y mejorar. No nos quedemos ahí parados.

Imagen de Pexels en Pixabay

miércoles, 6 de febrero de 2019

Crear un gráfico en SAPUI5 (II) - Tooltip y selección

En un artículo anterior habíamos aprendido cómo crear gráficos sencillos con SAPUI5. Era algo muy básico, pero habíamos visto dónde está la documentación para poder hacerlos todo lo complicado que queramos.

En este artículo, lo que vamos a hacer es mostrar un tooltip cuando pasemos o seleccionemos uno de los valores del gráfico. Como habíamos hecho un gráfico con líneas, este tooltip se mostrará cuando pulsemos sobre uno de los puntos. Si fuese un gráfico de barras, se mostraría al pulsar la barra.

Esto es ya nivel profesional, como poco.

Podríamos crearnos un elemento personalizado para mostrarlo al pulsar sobre el gráfico, pero de momento sólo vamos a mostrar el tooltip por defecto y ver un par de opciones para configurarlo.

Nos centraremos en la documentación de los VizFrames de tipo línea, y en particular en dos propiedades, tooltip e interactions.

Lo que haremos será:

  • Hacer el tooltip visible para que aparezca cuando pasamos sobre un valor o lo seleccionamos.
  • Cambiar el color de fondo del tooltip.
  • Que se puedan seleccionar varios valores o sólo uno.

miércoles, 23 de enero de 2019

RPTARQPOST - Cuando tropezamos varias veces con la misma piedra

Hoy vengo dispuesto a contar una anécdota, de cuando tropezamos varias veces con la misma piedra. Un poco por llorar las penas y por ver si, al escribirlo, no me vuelve a pasar ya por tercera vez. Y es que parece ser que nunca aprendo.

Os voy a hablar del report RPTARQPOST, y de cuando decide no postear los absentismos recién aprobados.

¿Y eso qué es lo que es? Es un report de SAP HCM, relacionado con la aplicación de My Leave Requests (las de Web Dynpro y las de Fiori). Su tarea es actualizar los infotipos correspondientes (2001 y 2002) una vez un absentismo es aprobado por el manager. Vamos, que en el portal, yo pido vacaciones, mi manager me las aprueba, pero hasta que no se ejecuta este report (generalmente programado cada pocos minutos), no se guardan en mis infotipos. Hasta entonces, el portal simula que se ha actualizado en el sistema, pero aún siguen en su capa (las tablas PTREQ*), pendientes de actualizarse en SAP HCM.

Tanto Fiori y tanta leche, y al final, por detrás, tenemos nuestra bonita pantalla SAPera


miércoles, 16 de enero de 2019

Instalar y configurar Eclipse para Fiori y SAPUI5

Hace unos días me decidí, por fin, a actualizar el Eclipse que tenía instalado en el equipo para trabajar con SAPUI5. Hasta ahora trabajaba con la versión Eclipse Mars, pero iba siendo hora de actualizarlo. Así que, aprovechando que lo hacía, pensé "pues ya puedo contar cómo hacerlo, porque lo mismo a alguien le interesa". Así que veamos cómo hacerlo.

Está claro que SAP ha apostado bien fuerte por usar su Web IDE como aplicación para desarrollar aplicaciones SAPUI5 y, aunque se siga manteniendo el desarrollo de SAP UI5 en Eclipse, hay una cosa con la que aún no podemos contar en esta herramienta: Con las plantillas predefinidas.

En su momento, en la antigua version Eclipse Juno, existía un add-on que podíamos añadir, el Fiori Toolkit, para hacer una aplicación de tipo Master-Detail. Pero se le dejó de dar soporte hace años. Hoy por hoy, no contamos con algo específico y con soporte que cuente con plantillas predefinidas.

Pero eso no quiere decir que no podamos usar Eclipse para SAPUI5. Podemos hacer desarrollos e incluso ampliaciones y probarlod en un sandbox local que cuenta con un Fiori Launchpad.


Así que, aunque siempre hemos hablado del Web IDE, en este artículo vamos a ver cómo instalar Eclipse y el software necesario para trabajar con SAPUI5 y Fiori. Vamos a ver los siguientes puntos:

  • Cómo instalar Eclipse en nuestro ordenador.
  • Añadir en Eclipse las ABAP Development Tools y la librería de SAPUI5.
  • Instalar localmente un servidor web para poder probar nuestros desarrollos.
  • Crear una aplicación SAPUI5 sencilla para probar (un Hola Mundo).
  • Configurar el Fiori Launchpad en nuestro sandbox (localmente).