Introducción

Seguimos trabajando para incluir nuevas funcionalidades en los Formularios de la Plataforma, así como mejoras de usabilidad y estabilidades.

Veamos las funcionalidades incorporadas en esta versión:

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 «Usar Plantilla».

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

Dentro de estas opciones están:

• Generar un Formulario vació sólo con el botón «Submit».

• Generar un Formulario con el botón «Submit» y todos los campos de la Entidad.

• Generar un listado de registros donde las columnas son los campos de la Entidad, con los botones para crear, editar y eliminar registros.

• Generar un Formulario como el anterior pero con el listado paginado en servidor.

• Generar 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 para 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 cargando un registro de esta.

También permiten ser filtrados 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. Un 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.

Paginated Table

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

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 crear componentes en el Formulario que permitan filtrar la tabla. Por ejemplo.

Ocultar el Search en Paginated Table

Se da la opción de ocultar el componente «Search» de la tabla

Opciones de cada fila en Paginated Table

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.

Paginated Table from Server

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

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 quisiéramos 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 «booleano», 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 tengan 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.