Configuración común de componentes OP Forms
- Onesait Platform
Introducción
En este documento nos enfocaremos en la configuración común y los elementos disponibles en las diversas capas (Basic, Advanced, Layout y 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 existen 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 «Display» nos permitirá adaptar la visualización de nuestro componente, desde definir la etiqueta, 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 «HTML 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 de la etiqueta, 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 «Tooltip» 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 la etiqueta de nuestro elemento.
Show 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.
Disabled: deshabilitará el input de información.
Table View: por defecto estará activada, muestra el valor en el envío.
Modal Edit: nos generará una opción de selección y abrirá una ventana 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 «Widget» 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. Son las siguientes:
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 «Plain», «HTML» o «Raw (Insecure)».
Text 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 Default Value: de manera general, la mayoría de componentes nos permitirá customizar nuestros valores por defecto y los calculados mediante JavaScript y JsonLogic, 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, 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 JsonLogic.
Opciones de Logic
Esta opción nos permite generar lógicas para potenciar los elementos añadidos a nuestro Formulario.
Al añadir una lógica avanzada, podremos generar nuestra lógica con diversos tipos, como simples, JavaScript, JsonLogic.
También permite enlazar como «Trigger» con eventos.
Opciones de Layout
En el apartado de «Layout» podremos generar atributos HTML para su edición.
Del mismo modo, nos permite definir los atributos si el componente se renderiza en pdf.