5 Tips para crear mejores interfaces de usuario en ABAP

Constantemente necesitamos crear interfaces para que el usuario interactúe con algún proceso, ya sea que genere un reporte, una modificación a la BBDD, descargue información o cualquier otra funcionalidad. Es por eso que los desarrolladores debemos pensar como hacer que la interacción entre la aplicación y el usuario sea un experiencia cómoda e incluso placentera.

Piensa en esto, lo que hace que una aplicación sea muy utilizada, además del proceso que esté automatizando, es la facilidad con la que el usuario puede operarla y que tenga una curva de aprendizaje que no represente mayor reto.

A continuación te muestro 2 interfaces que ejecutan el mismo proceso; sin embargo, pese a ser pantallas con un diseño muy básico, la organización de los elementos de la primer pantalla brinda al usuario una sensación de mayor operabilidad de la herramienta, esto únicamente agrupando los “inputs” por contexto.

SAP UI
SAP UI
SAP UI
SAP UI

 

Así que por este motivo te dejo 5 consejos para realizar interfaces de usuario profesionales .

1.- Mantenlo Simple

El usuario debe ser capaz de intuir a primera vista de que se trata tu programa, si es un usuario clave debe poder identificar de forma inmediata que debe colocar como entrada de información para ejecutar la aplicación. Además de contar con los elementos justamente necesarios para ejecutar el programa; es decir, eliminar todas la entradas, etiquetas, botones o cualquier otro elemento que no necesite el programa. Esto pareciera ser obvio pero es algo que se debe tener en cuenta desde los primeros borradores del diseño.

2.- Crea una jerarquía y organiza tus elementos

Define cuales serán los parámetros de entrada, a que contexto pertenecen y asígnales una prioridad, esto le permitirá al usuario identificar que es lo mínimo que requiere para correr la aplicación. Trata de usar marcos que te ayuden a agrupar tus parámetros.

3.- Cuida los detalles

Trata de colocar elementos que le ayuden a tu usuario a saber en dónde está y a dónde debe de ir, por ejemplo, ayudas de búsqueda o indicadores de avance. Utiliza elementos gráficos como íconos que indiquen el estado de la aplicación y sobre todo cuida tu ortografía.

4.- Experiencia de usuario

Trata de hacer que el usuario no se enfade con tu aplicación, evita mensajes negativos que digan que algo no se puede hacer, en su lugar muéstrale alternativas o información de apoyo. Otra cosa que puede molestar al usuario con tu aplicación es que no valores su esfuerzo; es decir, si se ha tomado el tiempo de ingresar mucha información trata de conservarla y que no se pierda al validar algún “input” o al hacer un refresh.

5.- Relación de conceptos

Mantener una coherencia entre las palabras es muy importante, ya que esto es lo que le podría ayudar al usuario a saber fácilmente los datos que debe introducir, por ejemplo, en la siguiente imagen podemos observar 2 parámetros que hacen referencia a un número de factura; sin embargo, el segundo parámetro “No Doc”, pese a que podemos darnos una idea de que se trata de un número de documento financiero, nos es más difícil asociarlo de primaria instancia, en cambio con el primer parámetro podemos identificar a simple vista a que se refiere.

SAP UI
SAP UI

Tip Extra

No pongas sonido a los mensajes negativos, basta con ver el siguiente video para que puedas comprender este punto.

 

 

 

 

 

 

 

 

 

 

Por favor ayúdame compartir este post

Consume un servicio ABAP y actualiza tu sitio en tiempo real con AJAX y PHP pt.5

Cada día es más importante contar con la información de la forma más rápida posible, por lo que se han creado tecnologías capaces de actualizar partes de tu sitio WEB en tiempo real. Es por eso que te dejo este tutorial de como obtener información a través de un servicio ABAP, actualizando una página WEB sin tener que refrescarla.

Resultado

El resultado que debemos obtener es una página .html con un input text que al momento de ingresar una cadena en mayúsculas se vea de forma inmediata su transformación en minúsculas, esta parte la haremos desde SAP.

REQUEST AJAX

Ahora que ya tenemos desplegado nuestro servicio SAP y un script PHP que llame a la función, debemos crear un script del lado del cliente que consulte sin refrescar la información de SAP.

1.- Creamos un formulario HTML para la entrada de información.

AJAX HTML

2.- Realizamos nuestra función en JavaScript, donde primero validamos nuestra entrada de datos.

JavaScript AJAX

3.- Creamos nuestro objeto para el llamado http.

AJAX JavaScript

4.- Utilizamos esta función, la cual se ejecutará cuando la respuesta del servicio esté lista.

JavaScript

5.- Y por último se hace el envío de petición http al archivo servicios.php.

JavaScript
JavaScript

CÓDIGO PHP Y AJAX

PRIMERA PARTE DA CLICK AQUÍ

Por favor ayúdame compartir este post

Consume un servicio ABAP y actualiza tu sitio en tiempo real con AJAX y PHP pt.4

Cada día es más importante contar con la información de la forma más rápida posible, por lo que se han creado tecnologías capaces de actualizar partes de tu sitio WEB en tiempo real. Es por eso que te dejo este tutorial de como obtener información a través de un servicio ABAP, actualizando una página WEB sin tener que refrescarla.

Resultado

El resultado que debemos obtener es una página .html con un input text que al momento de ingresar una cadena en mayúsculas se vea de forma inmediata su transformación en minúsculas, esta parte la haremos desde SAP.

Consumir Servicio SAP (Script PHP)

Ahora que hemos terminando de exponer nuestro servicio WEB estamos listo para consumirlo, utilizaremos un script PHP para llamar al servicio.

1.- Activamos nuestro servidor local, en mi caso es XAMP.

XAMP PHP

2.- Creamos un directorio llamado servicios dentro de nuestra carpeta hdocs.

3.- Dentro Guardamos nuestro archivo WSDL.xml y creamos el archivo servicios.php

WSDL PHP

4.-  Dentro del Script PHP,  definimos el WSDL que vamos a utilizar y nuestras credenciales.

WEBService

5.- Llamamos al servicio

PHP WEBService

6.-  Llamamos a nuestra operación con un parámetro estático de prueba “PRUEBA” e imprimimos la respuesta.

PHP WEBService

Nota: Posteriormente la cadena ‘PRUEBA’ Deberá ser sustituida por la variable que envíe la petición

7.- Cargamos en nuestro buscador la página. Si todo marchó bien deberemos ver nuestra cadena en minúscula.

PHP WEBService

QUINTA PARTE DA CLICK AQUÍ

 

Por favor ayúdame compartir este post

Consume un servicio ABAP y actualiza tu sitio en tiempo real con AJAX y PHP pt.3

Cada día es más importante contar con la información de la forma más rápida posible, por lo que se han creado tecnologías capaces de actualizar partes de tu sitio WEB en tiempo real. Es por eso que te dejo este tutorial de como obtener información a través de un servicio ABAP, actualizando una página WEB sin tener que refrescarla.

Resultado

El resultado que debemos obtener es una página .html con un input text que al momento de ingresar una cadena en mayúsculas se vea de forma inmediata su transformación en minúsculas, esta parte la haremos desde SAP.

Publicar Servicio (SOAMANAGER)

Una vez que terminemos con el asistente de configuración debemos ir a la TX SOAMANAGER para publicarlo.

1.-  Una vez dentro seleccionamos la opción de “Web Service Configuration”.

ABAP SOAMANAGER

2.-  Buscamos nuestro Servicio WEB.

ABAP WEB Service

3.- Seleccionamos nuestro servicio y escogemos la opción de crear.

ABAP WEB Service

4.- Completamos el asistente de configuración.

WEB Service ABAP

WEB Service ABAP

WEB Service ABAP

WEB Service ABAP

5.- Damos click en finalizar.

6.- Obtenemos la URL del WSDL.

WEB Service ABAP

7.- Seleccionamos opción No Policy en el parámetro WSP Version.

 

8.- Seleccionamos la URL que se encuentra en la sección WSDL Generation.

WEB Service ABAP

9.- Accedemos a un buscador y ponemos la ruta, una vez que cargue el documento damos click derecho y seleccionamos ver código fuente.

WEB Service

10.- En cuanto cargue nuevamente el WSDL lo guardamos en un archivo de texto, en mi caso lo nombraré WSDL1.xml.

Nota: Podemos probar nuestra URL con el programa SOAPUI.

SOAP UI

CUARTA PARTE DA CLICK AQUÍ

Por favor ayúdame compartir este post

Consume un servicio ABAP y actualiza tu sitio en tiempo real con AJAX y PHP pt.2

Cada día es más importante contar con la información de la forma más rápida posible, por lo que se han creado tecnologías capaces de actualizar partes de tu sitio WEB en tiempo real. Es por eso que te dejo este tutorial de como obtener información a través de un servicio ABAP, actualizando una página WEB sin tener que refrescarla.

Resultado

El resultado que debemos obtener es una página .html con un input text que al momento de ingresar una cadena en mayúsculas se vea de forma inmediata su transformación en minúsculas, esta parte la haremos desde SAP.

Exponer un Servicio WEB APAB

1.- Una vez que tenemos nuestro RFC operando es necesario crear nuestro Servicio WEB.

Enterprise Service

2.- Introducimos la definición, descripción del servicio y continuamos con el asistente.

Nota: Para fines prácticos guardaremos el WS como un objeto local

ABAP Web Service

 

3.- Guardamos y Activamos

TERCERA PARTE DA CLICK AQUÍ

Por favor ayúdame compartir este post

Consume un servicio ABAP y actualiza tu sitio en tiempo real con AJAX y PHP pt.1

Cada día es más importante contar con la información de la forma más rápida posible, por lo que se han creado tecnologías capaces de actualizar partes de tu sitio WEB en tiempo real. Es por eso que te dejo este tutorial de como obtener información a través de un servicio ABAP, actualizando una página WEB sin tener que refrescarla.

Resultado

El resultado que debemos obtener es una página .html con un input text que al momento de ingresar una cadena en mayúsculas se vea de forma inmediata su transformación en minúsculas, esta parte la haremos desde SAP.

Creando un RFC (Remote Function Call)

1.- Creamos un grupo de funciones en la TX SE80 y lo activamos.

2.- Creamos un módulo de funciones en laTX SE37 asignando el grupo de funciones previamente creado.

3.- Creamos un parámetro de entrada y uno de salida, no olvides seleccionar la opción de traspasar valores.

5.- Implementamos lógica que nos permita validar el funcionamiento de la función, en este caso convertiré una cadena de mayúscula en minúscula.

6.-  Seleccionamos en la pestaña de atributos la opción (RFC) y activamos.

7.- Probamos la función.

SEGUNDA PARTE DA CLICK AQUÍ

Por favor ayúdame compartir este post

ABAP Singleton

Este patrón nos sirve para restringir la creación de objetos, nos permitirá crear unicamente una instancia de una clase.

Implementación

Utilizaremos una clase estática para salvar dentro de esta misma la instacia creada y así podamos checar si se solicita una nueva instancia.

Ejemplo

1.- Creamos una clase estática.

Singleton ABAP

2.- Dentro de la sección de atributos privados declaramos el atributo estático lo_obj, el cual será una referencia de nuestra clase.

Singleton ABAP

3.- Definimos el método estático encargado de validar si la instancia está creada “get_instance”. En caso de que no esté creada la guardará en el atributo lo_obj, caso contrario utilizará la instancia guardada en el atributo lo_obj para hacer la referencia, la cual será el valor de retorno.

Singleton ABAP

Implementación

Singleton ABAP

4.- Definimos un atributo que nos permita ver un valor asignado al objeto, esto con la finalidad de validar que siempre se trata del mismo objeto.

5.- Definimos e implementamos nuestros métodos set y get para manipular el valor.

Singleton ABAP

Singleton ABAP

 

Ahora que tenemos listo nuestro patrón SINGLETON lo probaremos asignado a 2 referencias la instancia , obteniendo el mismo objeto para ambas referencias.

5.- Obtenemos la instancia

Singleton ABAP

6.- Asignamos un valor a nuestro atributo lv_valor

Singleton ABAP

7.- Obtenemos nuevamente la instancia para nuestra segunda referencia y llamamos al método get para obtener el valor de nuestro atributo lv_valor.

Singleton ABAP

8.- Imprimimos lv_msj y podremos observar que tenemos el mismo objeto asignado a una segunda referencia.

Singleton ABAP

Resultado

Singleton ABAP

DESCARGA EL CÓDIGO AQUÍ

Por favor ayúdame compartir este post