Introducción
En este documento nos enfocaremos en la configuración común y los elementos disponibles en las diversas capas (Básica, Advanced, Layout, Data) que nos ofrece OP Forms. Veremos las diversas posibilidades, desde campos básicos hasta reglas de validación avanzadas y examinaremos los aspectos clave que aseguran potenciar las funcionalidades aportadas por la plataforma.
Creación de elementos.
En la creación de cada elemento que encontramos en los formularios contendrán diversas pestañas de configuración.
A continuación, veremos en detalle una a una las posibles configuraciones que podremos encontrar en la creación y edición de los componentes.:
Opciones de Display
La opción de Display, nos permitirá adaptar la visualización de nuestro componente, desde definir el label, posición, activar o desactivar la interacción, etc.
La mayoría de elementos disponen de opciones singulares en su edición del display, como puede ser el HTTP Element, aunque en este punto veremos las opciones de edición más comunes y compartidas por todos los elementos, estas opciones nos permiten:
Edición del label, pudiendo editar nombre, posición y tamaño.
Configuración de información visual de nuestro componente. Aquí, podremos definir un placeholder y/o una descripción bajo nuestro elemento o un tool tip para ayuda al usuario.
Comportamiento del componente, donde encontraremos opciones comunes entre elementos son las siguientes:
Autocomplete: permite al usuario obtener recomendaciones para autocompletar el campo.
Hidden: Si esta opción se encuentra habilitada, el elemento se encontrará en modo edición, permitiendo su visualización en la edición del formulario, pero no en su visualización
Hide Label: Ocultaremos o mostraremos el label de nuestro elemento.
Word and Character counter: Al seleccionarlos, podremos disponer de un contador debajo de nuestro elemento contando las palabras y caracteres utilizados
Hide input: nos facilitará un elemento de ocultación para la información que introduzcamos, con diversos objetivos, como introducir un token o contraseña
Initial Focus: Generará el campo resaltado en nuestro formulario
Allow Spellcheck: Permite la corrección automática, indicándonos si introducimos algún error ortográfico.
Disable: Desabilitará el input de información
Table view: por defecto estará activada, muestra el valor en el envío.
Modal edit: Nos genererará una opción de selección y abrirá un modal para introducir o visualizar el nuevo valor.
Otros parámetros de visualización, como prefijos, sufijos, condiciones de entrada del texto a nivel alfanumérico, utilización de wiget para añadir selectores o añadir nuestro propias características mediante custom CSS:
Opciones de Data
En esta sección de la edición de los elementos de los formularios es donde configuraremos la información de la que se enriquecerá nuestro elemento. Igual que con Display, encontramos varias opciones comunes para la edición de cada nuevo registro comunes entre varios elementos donde encontramos:
Multiple Values: permite mostrar o introducir información múltiple en el formulario, por ejemplo, una lista de contactos.
Defaul Value: valor por defecto antes de interacción humana.
Input format: formato de entrada, permitiendo formato Plano, HTML o Raw (no recomendado).
Input Cases: podremos cambiar el caso de tipo de escritura, entre mayúsculas, minúsculas o permitir ambas y a nivel de gestión de la información truncar y/o encriptar la información.
Custom Data: De manera general, la mayoría de componentes nos permitirá customizar nuestros valores por defecto y los calculados mediante javascript y JSON logic, potenciando así nuestro formulario:
Opciones de Validation
La gestión de la validación consiste en la definición de aquellos parámetros y características que tendrá que cumplir la información introducida. Cada componente dispone de estas opciones dependiendo su tipología, por ejemplo, en el componente number, ajusta esta validación a máximos, mensaje de error, etc.
Adicionalmente, en este y la mayoría de componentes de OP Forms, disponen de otras opciones de validaciones y errores, ya sean custom o mediante JSONLogic. Desplegando cada una de las opciones, encontraremos ejemplos para poder crear nuestra propia validación.
Opciones de Api
La opción de API, nos permitirá apificar nuestro componente añadiendo propiedades custom.
Proporcionando un mapa de atributos HTML para el elemento de entrada del componente.
Opciones de Conditional
Apartado de configuración donde definimos las condiciones que deben de ocurrir para que el componente se comporte de una u otra manera, permitiéndonos habilitar o deshabilitar un componente a partir del valor de otro:
En este caso, hasta que el componente Number no tenga un valor de 2, no nos aparecería la opción del checkbox:
Del mismo modo que en el apartado de validación, el sistema nos permite generar nuestras condiciones mediante javascript o JSON-Logic
Opciones de Logic
Esta opción, nos permite generar lógicas para potenciar los elementos añadidos a nuestro formulario.
Al añadir una logica avanzada, podremos generar nuestra logica con diversos tipos, como simples, javascript, JSON logic:
También permite enlazar como tigger con eventos:
Opciones de Layout
En el apartado de Layout, podremos genertar atributos HTML para su edición:
Del mismo modo, nos permite definir los atributos si el componente se renderiza en pdf.
