Introduction

In these months we have continued working on the OP Forms, incorporating bug resolution, improvements and new functionalities.

Let's see the main functionalities incorporated in this release:

New Features

Forms integrated with Web Templates

Web Templates (read posts) offer us a Web template that integrates different cross-cutting aspects such as login, authorization, menus, dashboards,...

In this release we have integrated the forms with the Web Templates to speed up the development of web applications that use the forms and dashboards.

In the following images we see different forms in a Web application created from the Web Template:

Open

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 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

Tutorial de uso del Template Web con Formularios (Activo Ejemplo Aplicación Web usando Template Web)

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:

checkbox

Open

radio

Iconografía

selected boxes

tags

buttons

text fields

text Area

selects

Paneles

Pestañas

 

Responsive Design

También hemos mejorado el funcionamiento Responsive de los formularios, de modo que el formulario 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 representar los formularios en la mayoría de tecnologías web existentes.

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.

Tras seleccionarla requiere un nuevo identificador para clonar el formulario:

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.

• 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, indicamos el datasource en la pestaña Display y los atributos que se corresponden con cada una de las columnas que se mostrarán

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

Para cada nueva opción nos aparecerá este formulario que rellenaremos con la función asociada a ese botón:

• 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 aqui 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 aqui 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.

• El check box It is a delete Button, si está marcado indicará que al pulsar el botón se elimine el registro, hay que tener en cuenta que para pode eliminar registros el formulario debe tener una entidad asignada.

• On Click: en este area 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 label para poder mostrar botones sólo con un icono por ejemplo.

pudiendo utilizar la iconografía nueva como en el botón de la imagen anterior

Con respecto a la funcionalidad se ha añadido una acción nueva Only Redirect no Submit

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.

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:

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 creado 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

Tras seleccionar un formulario aparecerá a la derecha una vista previa

En el lienzo durante la edición se mostrará como un rectángulo Con la palabra form

En el modo vista si se mostrará el subformulario en el formulario padre.

email

En esta release se ha incorporado un nuevo tipo de dato a las entidades de 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.

Durante la creación del formulario si pulsamos el botón Build form from entity y la entidad que seleccionamos tiene un campo email, automáticamente creará el campo con el componente email de los formularios .

Date/Time

Hemos visto que si utilizamos en una entidad el campo email al pulsar el botón Build form from entity 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 Build form from entity 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 asi por ejemplo:

Si definimos una entidad con tres atributos cada uno de estos tres tipos

Veremos que en el formulario se han creado también los componentes

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