Improvements in OP-Forms (Release 6.0)

Available since Release 6.0.0

Introduction

We continue working to include new functionalities in the platform forms, as well as usability improvements and stabilities.

Let's see the features incorporated in this release:

Plantillas para creación de formularios

Ahora podemos crear formularios a partir de plantillas predefinidas, estas plantillas generan los formularios más habituales.

¿Cómo usarlas?

En el editor de formularios aparece un nuevo botón Use Template

image-20240410-111649.png

Al pulsarlo aparecen las distintas opciones, estas varían en función de si se selecciona una entidad o no.

image-20240410-111154.png

Dentro de estas opciones están:

  • Generar un formulario vació sólo con el botón de submit

  • Un formulario con botón submit y todos los campos de la entidad.

  • Un listado de registros donde las columnas son los campos de la entidad, con los botones para crear, editar y eliminar registros

  • Un formulario como el anterior pero con el listado paginado en servidor

  • Un formulario de creación de registros de la entidad seleccionada con el botón de crear, cancelar y resetear los datos.

  • Un formulario con los campos de sólo lectura para mostrar los registros sin poder editarlos.

Uso de varios datasources

En algunos casos puede que necesitemos mostrar más información en los formularios que sólo la que nos brinda la entidad asociada al formulario, por lo cual se ha creado la posibilidad de utilizar varios datasources al cargar el formulario y poder emplear esta información en el formulario.

¿Dónde encontramos los datasources?

Disponemos del switch Datasources al activarlo.

Aparece una zona donde podemos seleccionar los datasources que queremos que se carguen en la carga inicial del formulario.

Al añadir un datasource aparecen a la derecha todos los campos pudiendo copiar el path de estos para utilizarlos en los distintos componentes del formulario

Además permiten ser filtrados en servidor por los valores de la entidad en el caso de que estemos cargan un registro de esta.

O por el valor que asignemos

Para usarlos por ejemplo en un componente Text Field , en la pestaña Data, asignaríamos como valor por defecto el path del campo que queremos mostrar por ejemplo

value = ds.AEMET_ESTACIONES[0].provincia

donde AEMET_ESTACIONES sería el datasource, [0] sería el primer registro y provincia sería el path del campo que queremos mostrar.

Mejoras en componentes

En todos los componente se ha pasado el campo property name a la pestaña Display para mejorar la usabilidad.

Tabla paginada

Este componente ahora permite cargar los registros tanto a partir de un datasource

Como de una entidad

Además para facilitar la creación de estas se ha creado el botón Load Fields, el cual carga todos los campos de la entidad o del datasource seleccionado para crear las columnas de la tabla.

En el listado luego puede intercambiarse el orden de estos campos arrastrando.

Filtrado en la tabla

Se permite añadir filtros a los valores de la tabla, seleccionaremos un parámetro de los campos posibles de la entidad o datasource un operador y una condición que puede ser una constante o una variable donde se pueden utilizar los valores de otros componentes del formulario de esta forma {{data.propertyname}}

Con esto se pueden componente en el formulario que permitan filtrar la tabla por ejemplo.

Ocultar el search

Se da la opción de ocultar el componente search de la tabla

Opciones de cada fila

En la opciones ahora se permite al marcar una opción como eliminado o clonado, en cuyo caso se puede indicar el mensaje que mostrará la ventana modal al eliminar o clonar el registro del formulario.

También se pueden crear reglas para ocultar o deshabilitar la opción en función del valor de los campos de la fila

Tabla paginada en servidor

Este componente permite mostrar una tabla con las mismas propiedades que el componente anterior pero paginando los registros en servidor.

Tendremos la opción de decidir el número de registros por página que se mostrarán

Table Component

Se ha añadido la opción de convertir en tabla flotante, esto sirve para ajustar la tabla a la derecha o izquierda por si quiesieramos poner un grupo de botones.

como en este caso

Button

Se ha creado la opción de poder decidir que campos del formulario se envían al pulsar el botón por si en algún caso no es preciso enviarlos todos.

Para los casos en los que se precise que el valor del botón que es un boleano se envíe con el formulario para almacenarse, se marcaría to persist, sino se desea por defecto siempre estará marcado Do not persist

Text Area

Al crear un componente text area podemos indicar que se use un editor, tenemos estas tres opciones:

 

ACE

Ace es un editor de código integrable escrito en JavaScript. Coincide con las características y el rendimiento de editores nativos como Sublime, Vim y TextMate. Se puede integrar fácilmente en cualquier página web y aplicación JavaScript. Ace se mantiene como editor principal de Cloud9 IDE y es el sucesor del proyecto Mozilla Skywriter (Bespin).

Da la posibilidad de seleccionar un tema :

Este sería un ejemplo con el tema terminal

Otras opciones nuevas son el máximo y mínimo de líneas que se muestran en el editor y a partir de que línea se activa el scroll del componente, esto por ejemplo es útil si sabemos que vamos a necesitar un editor de un tamaño inicial más grande o más pequeño en función de los datos que se vayan a introducir.

CKEditor

El editor de texto enriquecido para cada caso de uso

Quill

Quill es un editor WYSIWYG de código abierto. Con su arquitectura modular y API expresiva, es completamente personalizable para adaptarse a cualquier necesidad.

File

El componente File permite almacenar y descargar fichero, en este componente se ha habilitado cuando el tipo de storage es por URL una url de descarga para el caso en el que las APIS no tenga la misma url de subida y de descarga de ficheros

Mejoras en los estilos del editor

Se han mejorado lo estilos del editor para que quede más claro cual es el componente que estamos editando

Â