| Table of Contents | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Introducción
En este documento nos enfocaremos en la configuración común y los elementos disponibles en las diversas capas (BásicaBasic, 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 plataformaPlataforma.
Creación de elementos
...
En la creación de cada elemento que encontramos en los formularios contendrán 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 de «Display, » nos permitirá adaptar la visualización de nuestro componente, desde definir el labella 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«Display», como puede ser el HTTP «HTML Element», aunque en este punto veremos las opciones de edición más comunes y compartidas por todos los elementos, estas . Estas opciones nos permiten:
Edición del labelde la etiqueta, pudiendo editar nombre, posición y tamaño.:
...
Configuración de información visual de nuestro componente. Aquí, podremos definir un placeholder «Placeholder» y/o una descripción bajo nuestro elemento o un tool tip «Tooltip» para ayuda al usuario.:
...
Comportamiento del componente, donde encontraremos opciones comunes entre elementos son . Son las siguientes:
...
Autocomplete: permite al usuario obtener recomendaciones para autocompletar el campo.
Hidden: Si si esta opción se encuentra habilitada, el elemento se encontrará en modo edición, permitiendo su visualización en la edición del formularioFormulario, pero no en su visualización.
Hide Label: Ocultaremos ocultaremos o mostraremos el label la etiqueta de nuestro elemento.
...
Show Word and Character counterCounter: Al al seleccionarlos, podremos disponer de un contador debajo de nuestro elemento contando las palabras y caracteres utilizados.
...
Hide inputInput: 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á generará el campo resaltado en nuestro formularioFormulario.
...
Allow Spellcheck: Permite permite la corrección automática, indicándonos si introducimos algún error ortográfico.
DisableDisabled: Desabilitará deshabilitará el input de información.
...
Table viewView: por defecto estará activada, muestra el valor en el envío.
Modal editEdit: Nos genererará nos generará una opción de selección y abrirá un 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 wiget «Widget» para añadir selectores o añadir nuestro propias características mediante custom «Custom CSS»:
...
Opciones de
...
Data
En esta sección de la edición de los elementos de los formularios 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. Son las siguientes:
Multiple Values: permite mostrar o introducir información múltiple en el formularioFormulario, por ejemplo, una lista de contactos.
Defaul Value: valor por defecto antes de interacción humana.
...
Input formatFormat: formato formato de entrada, permitiendo formato Plano«Plain», HTML «HTML» o «Raw (no recomendadoInsecure)».
...
Input 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 DataDefault Value: De de manera general, la mayoría de componentes nos permitirá customizar nuestros valores por defecto y los calculados mediante javascript JavaScript y JSON logicJsonLogic, potenciando así nuestro formulario: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«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 JSONLogicJsonLogic. Desplegando cada una de las opciones, encontraremos ejemplos para poder crear nuestra propia validación.
...
Opciones de
...
API
La opción de API, «API» nos permitirá apificar nuestro componente añadiendo propiedades custom.Proporcionando , 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«Checkbox»:
...
Del mismo modo que en el apartado de validación, el sistema nos permite generar nuestras condiciones mediante javascript o JSON-Logic
...
JavaScript o JsonLogic.
...
Opciones de Logic
Esta opción , nos permite generar lógicas para potenciar los elementos añadidos a nuestro formularioFormulario.
...
Al añadir una logica lógica avanzada, podremos generar nuestra logica lógica con diversos tipos, como simples, javascript, JSON logic:
JavaScript, JsonLogic.
...
También permite enlazar como tigger «Trigger» con eventos:.
...
Opciones de Layout
En el apartado de «Layout, » podremos genertar generar atributos HTML para su edición:.
...
Del mismo modo, nos permite definir los atributos si el componente se renderiza en pdf.
...