Introducción
Este trimestre hemos creado tres aplicaciones web de ejemplo donde se integran los OPForms.
Utilizando diversas tecnologías como són Angular, Vite + React y Vue 2.
Con esto podemos comprobar que se pueden embeber los formularios de plataforma con cualquier aplicación web.
¿Dónde están los fuentes de estos ejemplos?
Estan a github en la comunidad de Onesaitplatform
https://github.com/onesaitplatform/OPForms-embedded-examples-different-frameworks
¿Qué hacen estos ejemplos?
Podremos logarnos con un usuario de plataforma acceder al listado de formularios de ese usuario y cargarlos, también podremos crear nuevos registros y visualizarlos a partir del identificador del registro.
¿Cómo puedo probarlos?
Podemos descargarnos las fuentes desde github bien con un zip o clonando el repositorio en nuestra computadora.
Tras esto seguiremos las indicaciones de los distintos ficheros README.md, donde se indican la versión de node.js necesaria y los distintos comandos en función de la tecnología de la aplicación de ejemplo.
Aplicación VITE + REACT
Se ha integrado los OPForms con Vite + REACT, en este ejemplo la aplicación se loga contra la seguridad de plataforma a partir de un usuario contraseña de plataforma, la navegación entre componentes se realiza con react router.
Si lo levantamos en local sería esta su url http://localhost:5173/
y muestra un listado de formularios, permitiendonos hacer logaout o pulsar en el botón Show Form para cargar el formulario de esa fila de la tabla.
Tras esto se muestra el formulario
donde podremos cargar un identificador para mostrar los datos de ese registro
La librería de formularios se integra pricipalmente en el fichero Showform.jsx.
Aplicación Angular + Angular Material
En este caso la aplicación de ejemplo esta construidad sobre angular tiene la misma funcionalidad que la anterior.
Levantando la aplicación en local sería esta su url
El lógin contra la seguridad de plataforma
El listado de formularios del usuario
La carga del formulario vacío para poder insertar nuevos registros o si rellenamos el campo identificador podemos cargar los valores de un registro de la entidad asociada al formulario.
Para esta aplicación los formularios se embeben con el componente showform :
Aplicación Vue 2
En esta aplicación el framework es Vue 2
Tiene disponible la misma funcionalidad que las anteriores.
Al cargarla en local accederemos desde la url
Para logarnos clicaremos sobre el icono de usuario
Pulsaremos Reload form list para recargar la lista de formularios
Clicando en cualquiera de los botones Use del listado de formularios cargará el seleccionado y podremos crear nuevos registros en el caso de que sea un formulario de inserción.
Como en los casos anteriores se puede escribir el identificador de un registro creado previamente para recuperar sus datos.
En este caso es el componente ShowForm el que se encarga de embeber los formularios en la aplicación.
