Uso de Formularios en diversas tecnologías Front
- Onesait Platform
Disponible desde Release 6.1
Introducción
En esta release hemos creado varias aplicaciones web de ejemplo donde se integran los OPForms de Plataforma utilizando diversas tecnologías como son Angular, Vite + React y Vue 2.
Esto nos permite podemos comprobar que se pueden embeber los formularios de plataforma con cualquier aplicación web.
¿Dónde descargar los ejemplos?
Podemos descargar estas aplicaciones web en el Github de Plataforma:
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, permitiéndonos pulsar 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 principalmente en el fichero Showform.jsx.
Aplicación Angular + Angular Material
La aplicación de ejemplo construida sobre Angular tiene la misma funcionalidad que la anterior.
Levantando la aplicación en local sería esta su url
El login 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, y tiene disponible la misma funcionalidad que las anteriores.
Al cargarla en local accederemos desde la url http://localhost:8080/
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.