--- title: "Nuevas características de los Formularios (OP Forms)" canonical: "https://onesaitplatform-es.refined.site/space/ruta/3917217810/Nuevas%20caracter%C3%ADsticas%20de%20los%20Formularios%20(OP%20Forms)" format: markdown --- > Macro (toc) > ℹ️ Disponible a partir de la versión 5.3.0 # Introducción En estos meses hemos seguimos trabajando en los Formularios de la Plataforma (OP Forms) incorporando resolución de bug, mejoras y nuevas funcionalidades. Veamos las principales funcionalidades incorporadas en esta versión. # Nuevas Funcionalidades ## Formularios integrados con Templates Web Los **Templates Web** ([ver entrada](https://onesaitplatform.atlassian.net/wiki/spaces/DOC/pages/2216834949/C+mo+usar+el+Template+Web+para+WebProjects+Onesait+Platform+Web+Template)) nos ofrecen una plantilla web que integra diferentes aspectos transversales como el login, la autorización, menús, Dashboards, etc. En esta versión hemos integrado los Formularios con los **Templates Web**, consiguiendo así agilizar el desarrollo de aplicaciones web que utilicen los Formularios y Dashboards. En las siguientes imágenes vemos diferentes Formularios en una aplicación web creada a partir del Template Web: ![image-20240109-154621.png](media://fbc9bdf6-88f2-4071-a218-cfefaf83f5ba) ## Tutorial uso Templates Web con Formularios Además, hemos creado un tutorial que ejemplifica el uso de los Templates para crear una aplicación web que tenga: - Login integrado con la Plataforma. - Uso de Realms para gestión de usuarios y roles. - Uso de configuración centralizada para internacionalización. - Integración de Dashboards en la aplicación web. - Integración de Formularios. [https://onesaitplatform.atlassian.net/wiki/spaces/DOC/pages/3974529025](https://onesaitplatform.atlassian.net/wiki/spaces/DOC/pages/3974529025) ## Revisión completa del estilado de los Formularios En estos meses hemos hecho una revisión completa del estilado de los Formularios, adaptando los estilos de los distintos componentes al sistema de diseño ODS. A continuación se muestra la visualización de los componentes: ## Diseño *Responsive* También hemos mejorado el funcionamiento «***responsive***» de los Formularios, de modo que se redimensione para que tenga en cuenta el tamaño de la pantalla. ## Nuevas APIs de gestión de Formularios Se han actualizado las APIs para poder gestionar tanto las **plantillas de Formularios** permitiendo su creación, clonado, eliminación… así como la **información o registros** que se almacena o muestra recogida en la Entidad que asignamos a la plantilla de Formulario. Con esto podemos trabajar con Formularios en los distintos tipos de proyectos web, pudiendo representarlos en la mayoría de tecnologías web existentes. ![image-20240109-115310.png](media://5d36e6bf-f9a7-4845-8d67-7f3dd6f07eda) ## Clonado de Formularios Hemos añadido la posibilidad de **clonar** un Formulario existente para poder desarrollar de una forma más ágil. Para usarlo pulsaremos el icono de las opciones sobre el listado de Formularios y nos aparece la opción de clonado. ![image-20240722-125359.png](media://8fc1d7c3-3d9b-4fac-82eb-0911a208fc50) Tras seleccionarla requiere un nuevo identificador para clonar el Formulario: ![image-20240722-125549.png](media://deb0d0c0-abd6-430e-b9a7-195641aab79f) # Nuevos Componentes ## *Paginated Table* La **tabla paginada** es un componente que **permite crear un componente tabla a partir de un Datasource del que tomará los datos**. ![image-20240723-093711.png](media://d17a74d9-e3cc-4eab-8ef2-dbf01a744343) - La tabla permite realizar búsquedas usando el componente lupa de la esquina superior izquierda. - Como el resto de componentes puede **internacionalizarse**, mostrando por ejemplo los literales de las cabeceras de las columnas en el idioma seleccionado. Tras arrastrarlo al lienzo, en la pestaña «***Display***» indicamos el **Datasource** y los atributos que se corresponden con cada una de las columnas que se mostrarán. ![image-20240723-095301.png](media://66ba6def-d008-495e-bfca-4d02ef9d35cd) A continuación, en la pestaña «***Display***»** **podremos crear las distintas opciones para cada registro de la tabla. Vemos una opción para editar el registro y otra para eliminarlo: ![image-20240109-121237.png](media://090aa6f6-c29b-46bf-9f20-8c0f0bd4ec6f) Para cada nueva opción nos aparecerá este formulario que rellenaremos con la función asociada a ese botón: ![image-20240109-121147.png](media://f531d216-0f84-456e-a481-2f5cce85d41e) - ***Icon*****:** nombre del icono que queremos mostrar como «pencil» o «delete». - ***Icon color*****:** el color del icono. - ***Path*****:** si queremos redirigirnos a otra url la pondríamos aquí (por ejemplo: «https://…»). - ***FormCode*****:** si lo que queremos es que al pulsar en el icono nos dirijamos a otro Formulario para mostrar los datos del registro por ejemplo, pondríamos aquí el código del siguiente Formulario. - ***Path ID*****:** este campo se rellena con el atributo del Datasource que se corresponde con el identificador del registro para así poder saber sobre que registro estamos realizando la acción. - ***«It is a delete Button»*****:** si se marca esta casilla de verificación, se indicará que al pulsar el botón se elimine el registro. Hay que tener en cuenta que para poder eliminar registros, el Formulario debe tener una Entidad asignada. - ***On Click*****:** en este área podríamos añadir código JavaScript que se ejecutaría al pulsar el botón. ## *Button* Además de mejorar su estilo, ahora podemos crear botones sin etiqueta para poder mostrarlos sólo con un icono. Por ejemplo: ![image-20240109-122614.png](media://f4c5636d-0a47-4de0-90b4-9ed71b0d0108) Se puede utilizar la iconografía nueva como en el botón de la imagen anterior. ![image-20240109-122713.png](media://fbdba694-d33d-49c8-8920-39d4091420f4) Con respecto a la funcionalidad, se ha añadido una acción nueva:** **«***Only Redirect no Submit***». ![image-20240109-122949.png](media://1a6a4488-595f-4c00-8bef-e92572bacbd0) Con esta acción conseguimos poder hacer redirecciones entre Formularios o a otras páginas sin almacenar ningún dato. Esta funcionalidad es importante por ejemplo si queremos **cancelar** y volver al Formulario anterior. En el siguiente campo pondríamos el código del Formulario al que se pretende volver: ![image-20240109-123558.png](media://299d6c61-6681-4829-aefa-5a2430414546) ## *Nested Form* En la opción «***Advanced***»** **del menú de edición tenemos el componente ***Nested Form*****, Formulario anidado o subFormulario**. Este componente permite utilizar en el Formulario actual Formularios creados previamente, de modo que estos se aniden. ![image-20240109-124852.png](media://da03ea2b-6594-41dc-b55d-d7df89aa0227) Por ejemplo, podríamos usar el componente ***Tabs*** con varias pestañas y que cada pestaña contenga un **subFormulario** creado previamente. Con esto se consigue la **reutilización** de componentes creados previamente y se **agiliza el desarrollo**. Para trabajar con este componente, lo arrastraremos a la parte del lienzo que queramos y luego en la pestaña «*Form*» seleccionaremos el Formulario a reutilizar. ![image-20240723-103338.png](media://6a8032fd-acf3-49d1-8268-f89ec4ff7657) Tras seleccionar un Formulario, aparecerá a la derecha una vista previa: ![image-20240723-103930.png](media://b9ea3750-04b1-471d-a565-5d5e481f2dc5) En el lienzo, durante la **edición** se mostrará como un rectángulo con la palabra «*Form».* ![image-20240109-125534.png](media://e129c6a5-765d-4cff-9296-6505682523f7) En el **modo vista**, si se mostrará el subFormulario en el Formulario padre. ![image-20240109-125719.png](media://4c78b31e-0dc0-47d2-90d9-fc54f3ccedbc) ## *Email* En esta versión se ha incorporado un nuevo tipo de dato a las Entidades de la Plataforma, el tipo «***email***», y también se ha creado el componente visual ***Email*** que lo representa. Si creamos una Entidad y le asociamos este tipo, automáticamente se validará al hacer inserciones, actualizaciones…, que el valor contenido en este campo tiene un patrón de email valido. ![image-20240723-113830.png](media://984b985d-40af-46a5-ab0d-c4fc31c8e985) Durante la creación del Formulario, si pulsamos el **botón **«**Usar Plantilla**» y la Entidad que seleccionamos tiene un campo «*email*», automáticamente creará el campo con el componente *Email* de los Formularios. ![image-20240723-114558.png](media://0a601322-9461-4f70-a061-e3010073f99f) ![image-20240723-114807.png](media://2d9b7734-b69d-41b5-bcf6-37fdf12cd4bd) ![image-20240723-115738.png](media://b4fd2b9a-3d95-4620-b158-d1da54490e79) ## *Date/Time* Hemos visto que si utilizamos en una Entidad el campo «*email*» al pulsar el **botón **«**Usar Plantilla**» creaba un campo en el Formulario con el componente *Email*. Esto se ha implementado también para los tipos de fecha, así si definimos un atributo de la Entidad con los tipos «***date***»**, **«***timestamp-mongo***»** o **«***timestamp***», al pulsar el **botón **«**Usar Plantilla**»** **en la edición de Formularios, también se creara un componente del tipo ***Date/Time*** con la configuración especifica para cada uno de estos tipos. Por ejemplo: Si definimos una Entidad con tres atributos cada uno de estos tres tipos. ![image-20240109-151502.png](media://7540acac-7e07-44d5-b384-e6520874303b) Veremos que en el Formulario se han creado también los componentes. ![image-20240109-151552.png](media://33bc3673-8aeb-43aa-b57c-70c7a5e9c310) Si clicamos sobre el tipo «*date*» vemos que no aparece la **hora/minutos** en la parte inferior, como si ocurre para los tipos «*timestamp-mongo*» o «*timestamp*». ![image-20240109-151710.png](media://5562abe2-86b4-4d65-b6b4-677742aa2f5b) ![image-20240109-151730.png](media://af12fcfa-94fb-4735-9ce7-c626089ffd55)