Hola de nuevo. Recibí muy buen feedback en el blog anterior relacionado a la herramienta de tipo #NoCode o #LowCode AppGyver, leelo aquí. Para leer este blog en ingles, ve aqui
Hoy, voy a mostrar un ejemplo de una aplicación Master detail la cual se conecta a un servicio REST API en la nube de AWS. Asume que ya tienes acceso al servicio de AWS API gateway. Vamos a leer datos para una lista de Tickets para el ejemplo mencionado de Master Detail. En la nube de AWS, tuve que crear una función Lambda usando NodeJS, y el AWS API gateway llamando a la funcion Lambda. En una vista de 10,000 pies del backend, asume que el app de AppGyver va a llamar a mi servicio de la nuve REST API y obtendrá datos. Muy simple!
Abramos el app builder y creemos un Proyecto nuevo. Yo lo llame MasterDetail. Empeze por agregar una pagina de default para incluir una lista o una tabla. No encontre una table en la lista de controles disponibles del navegador izquierdo. Despues de ver el tutorial, me di cuenta que AppGyver permite instalar controles adicionales que no estan incluidos por default a la lista de controls para usar en la aplicación. Ve a la sección de Component Market (usa el campo para buscar bajo el tab de CORE) para buscar una table o un control de tipo listado y poder usarlo en el view Master. A primera vista pensaras que tienen el mismo comportamiento, pero si poner atención, verás porqué preferí usar el control de tipo Basic list; la razón fue poque al final de cada renglón hay un icono que da la impresión de que podemos darle click y hacer un drill down para ver más detalles en la siguiente página.
Una vez que selecciones el tipo de control que quieras usar, necesitaras que instalarlo usando el enlace Install. Si se instala propiamente, el control aparecerá en el tab del lado izquierdo bajo INSTALLED.
Ahora configuremos nuestro DATA así podemos usar el REST API de la nuve de AWS como fue mencionado anteriormente.
Selecciona la opción REST API direct integration del menú de abajo.
Provee los detalles para identificar el resource y el URL para acceder el servicio.
Ya que estaremos leyendo datos directamente, no necesitamos configurar el campo relative path abajo.
Una vez que hayas hecho el set up para el método GET dentro del GET COLLECTION, procede al tab TEST y vee como se leen los datos. BAAAM! Si obtuvimos los datos.
Trate de usar datos con su correspondiente tipo de datos, pero no pude mostrar el renglón seleccionado para las propiedades de mi array que no eran de tipo string. Tuve que regresar a la nuve de AWS y cambiar el tipo de datos a tipo string para mis tres propiedades. Idealmente, este tipo de control debería reconocer el tipo de datos y poder mostrarlos en la aplicación. Aun trate de hacer un parsing con la función STRING y ni así pude mostrar los valores en la aplicación.
Después de cambiar el tipo de datos y re-generar el schema, ya pude ver el valor de los textos en los campos que eran de tipo text de números como se muestran siguientemente en la lista.
Una vez que esta configurado el schema, regresa al canvas y estira el control de tipo Basic list dentro del canvas.
En el tab de PROPERTIES, selecciona la opción Configure para poner los datos que configuramos en el paso anterior.
Selecciona la X para ir dentro de la ventana Data Resource.
Selecciona Data resource
Selecciona una de las opciones disponibles.
Llena las propiedades de este control basado en las propiedades de tu data source. Debes de asignar data types que correspondan al tipo de datos del control, de otra forma, los valores no aparecerán en la pantalla. Mas abajo, tarte de pasar dos números con una función de STRING porque pensé que podría funcionar pero no. En este paso fue donde decidí regresar a AWS y cambiar el tipo de datos allá para poder usarlos en esta pantalla.
Hasta que complete este paso, no podía ver datos, pero ahora que los tipos de datos se cambiaron, ahora si puedo verlos.
Una vez que hize el set up del control, corrí la aplicación e hize el test. Nota que puse una función de tipo alerta para ver cuál fue el id del valor seleccionado y pues si lo fue.
Ahora que pude seleccionar un objeto y puedo capturar su id, voy a añadir la navegación de la página master hacia la página de details. En mi página de details tengo un label y un botón para navegar de regreso a la página master, algo muy simple.
Abajo hay imágenes que muestran como pase el id seleccionado dinámicamente del master hacia la página de details – muy bien hecho AppGyver.
Finalmente, quiero compartir la razón cual puse este botón. El bottom llamara un evento al ser presionado, y quería mostrar una alerta de confirmación para que el usuario tenga que seleccionar Ok o cancelar el evento de navegación. La lógica que use en este botón también fue construida con el #NoCode #LowCode y se ve como sigue.
El evento tap (presionar) llama el dialogo de confirmación y le pregunta al usuario algo que tenga que responder con su logic de tipo if. Hay un input en el flow y dos outputs dependiendo de la selección del dialogo de confirmación. El primer output se refiere cuando el usuario selecciona Yes/Ok/confirma el cual fue mi caso y así la aplicación puede navegar al usuario de regreso a la pagina Master. Otras opciones serian que la aplicación hiciera un post o que guardara datos en una base de datos en algún lado antes de navegar.
Ya que no tengo lógica en la segunda opción cuando el usuario cancela la ejecución, entonces no tuve que incluir nada en esa rama de ejecución.
Lo que me gusto de este ejemplo:
Lo que creo que necesita mejorar:
Para cerrar:
Durante este ejemplo, pude fácil y rápidamente crear paginas y navegación entre ellas. Me gusto poder instalar controles que no estaban disponibles por defaul. Pienso que fue facilísimo de entender la lógica del if que puse dentro del botón. La parte que se me dificulto durante este blog fue no poder rápidamente entender de donde venia el valor de undefined hasta que cambie todos los tipos de datos en el REST API a strings. Creo que la herramienta puede beneficiarse también del punto de vista de que ya había hecho el set up del schema dentro de la misma herramienta. Las propiedades del evento input/output cuando seleccionas en la lista no fueron tan malas como pensé inicialmente. Finalmente, pienso que la lógica que puse en el botón fue muy directa en el master list y también en el drilling down hacia la pagina de detalles. Intencionalmente no hize el request GET hacia los detalles ya que había obtenido el id durante la navegación así que se la dejo de tarea al lector de este blog. ¿Cual fue tu parte favorita de este ejemplo? Que otros ejemplos te gustaría explorar, compartir o recomendar para la comunidad de desarrolladores. Gracias por leer este blog y que distrutes tu fin de semana.
Hoy, voy a mostrar un ejemplo de una aplicación Master detail la cual se conecta a un servicio REST API en la nube de AWS. Asume que ya tienes acceso al servicio de AWS API gateway. Vamos a leer datos para una lista de Tickets para el ejemplo mencionado de Master Detail. En la nube de AWS, tuve que crear una función Lambda usando NodeJS, y el AWS API gateway llamando a la funcion Lambda. En una vista de 10,000 pies del backend, asume que el app de AppGyver va a llamar a mi servicio de la nuve REST API y obtendrá datos. Muy simple!
Abramos el app builder y creemos un Proyecto nuevo. Yo lo llame MasterDetail. Empeze por agregar una pagina de default para incluir una lista o una tabla. No encontre una table en la lista de controles disponibles del navegador izquierdo. Despues de ver el tutorial, me di cuenta que AppGyver permite instalar controles adicionales que no estan incluidos por default a la lista de controls para usar en la aplicación. Ve a la sección de Component Market (usa el campo para buscar bajo el tab de CORE) para buscar una table o un control de tipo listado y poder usarlo en el view Master. A primera vista pensaras que tienen el mismo comportamiento, pero si poner atención, verás porqué preferí usar el control de tipo Basic list; la razón fue poque al final de cada renglón hay un icono que da la impresión de que podemos darle click y hacer un drill down para ver más detalles en la siguiente página.
Una vez que selecciones el tipo de control que quieras usar, necesitaras que instalarlo usando el enlace Install. Si se instala propiamente, el control aparecerá en el tab del lado izquierdo bajo INSTALLED.
Ahora configuremos nuestro DATA así podemos usar el REST API de la nuve de AWS como fue mencionado anteriormente.
Selecciona la opción REST API direct integration del menú de abajo.
Provee los detalles para identificar el resource y el URL para acceder el servicio.
Ya que estaremos leyendo datos directamente, no necesitamos configurar el campo relative path abajo.
Una vez que hayas hecho el set up para el método GET dentro del GET COLLECTION, procede al tab TEST y vee como se leen los datos. BAAAM! Si obtuvimos los datos.
Trate de usar datos con su correspondiente tipo de datos, pero no pude mostrar el renglón seleccionado para las propiedades de mi array que no eran de tipo string. Tuve que regresar a la nuve de AWS y cambiar el tipo de datos a tipo string para mis tres propiedades. Idealmente, este tipo de control debería reconocer el tipo de datos y poder mostrarlos en la aplicación. Aun trate de hacer un parsing con la función STRING y ni así pude mostrar los valores en la aplicación.
Después de cambiar el tipo de datos y re-generar el schema, ya pude ver el valor de los textos en los campos que eran de tipo text de números como se muestran siguientemente en la lista.
Una vez que esta configurado el schema, regresa al canvas y estira el control de tipo Basic list dentro del canvas.
En el tab de PROPERTIES, selecciona la opción Configure para poner los datos que configuramos en el paso anterior.
Selecciona la X para ir dentro de la ventana Data Resource.
Selecciona Data resource
Selecciona una de las opciones disponibles.
Llena las propiedades de este control basado en las propiedades de tu data source. Debes de asignar data types que correspondan al tipo de datos del control, de otra forma, los valores no aparecerán en la pantalla. Mas abajo, tarte de pasar dos números con una función de STRING porque pensé que podría funcionar pero no. En este paso fue donde decidí regresar a AWS y cambiar el tipo de datos allá para poder usarlos en esta pantalla.
Hasta que complete este paso, no podía ver datos, pero ahora que los tipos de datos se cambiaron, ahora si puedo verlos.
Una vez que hize el set up del control, corrí la aplicación e hize el test. Nota que puse una función de tipo alerta para ver cuál fue el id del valor seleccionado y pues si lo fue.
Ahora que pude seleccionar un objeto y puedo capturar su id, voy a añadir la navegación de la página master hacia la página de details. En mi página de details tengo un label y un botón para navegar de regreso a la página master, algo muy simple.
Abajo hay imágenes que muestran como pase el id seleccionado dinámicamente del master hacia la página de details – muy bien hecho AppGyver.
Finalmente, quiero compartir la razón cual puse este botón. El bottom llamara un evento al ser presionado, y quería mostrar una alerta de confirmación para que el usuario tenga que seleccionar Ok o cancelar el evento de navegación. La lógica que use en este botón también fue construida con el #NoCode #LowCode y se ve como sigue.
El evento tap (presionar) llama el dialogo de confirmación y le pregunta al usuario algo que tenga que responder con su logic de tipo if. Hay un input en el flow y dos outputs dependiendo de la selección del dialogo de confirmación. El primer output se refiere cuando el usuario selecciona Yes/Ok/confirma el cual fue mi caso y así la aplicación puede navegar al usuario de regreso a la pagina Master. Otras opciones serian que la aplicación hiciera un post o que guardara datos en una base de datos en algún lado antes de navegar.
Ya que no tengo lógica en la segunda opción cuando el usuario cancela la ejecución, entonces no tuve que incluir nada en esa rama de ejecución.
Lo que me gusto de este ejemplo:
- Poder instalar controles del Marketplace
- Set up de navegacion fail y rapido
- Poder completer la ejecución de lógica sin tener que escribir una sola línea de código. Mi pensamiento inicial fue que tendría que hacer un poco de código pero estaba equivocado al respecto
Lo que creo que necesita mejorar:
- La herramienta necesita poder reconocer el tipo de datos que vienen de un source externo y no mostrar solamente undefined
- La forma de crear variables desde el set up de un control asi no tener que navegar hacia el enlace Variables
Para cerrar:
Durante este ejemplo, pude fácil y rápidamente crear paginas y navegación entre ellas. Me gusto poder instalar controles que no estaban disponibles por defaul. Pienso que fue facilísimo de entender la lógica del if que puse dentro del botón. La parte que se me dificulto durante este blog fue no poder rápidamente entender de donde venia el valor de undefined hasta que cambie todos los tipos de datos en el REST API a strings. Creo que la herramienta puede beneficiarse también del punto de vista de que ya había hecho el set up del schema dentro de la misma herramienta. Las propiedades del evento input/output cuando seleccionas en la lista no fueron tan malas como pensé inicialmente. Finalmente, pienso que la lógica que puse en el botón fue muy directa en el master list y también en el drilling down hacia la pagina de detalles. Intencionalmente no hize el request GET hacia los detalles ya que había obtenido el id durante la navegación así que se la dejo de tarea al lector de este blog. ¿Cual fue tu parte favorita de este ejemplo? Que otros ejemplos te gustaría explorar, compartir o recomendar para la comunidad de desarrolladores. Gracias por leer este blog y que distrutes tu fin de semana.
- SAP Managed Tags:
