Trabajar con componentes de campos de formulario personalizados

Crear un componente de campo de formulario personalizado 

Puedes crear tus propios campos de formulario personalizados como componentes personalizados para usarlos en todos los formularios de tu aplicación. Para hacerlo, sigue las instrucciones de instalación y creación proporcionadas en esta documentación para desarrolladores.

Directrices para crear un campo de formulario personalizado

Los pasos de instalación proporcionarán una estructura inicial para tu campo de formulario personalizado. Sin embargo, tendrás que escribir la configuración de la interfaz de usuario para tu campo de formulario personalizado. Puedes usar estas API para crear tu campo personalizado.

Tu campo de formulario personalizado debe incluir la configuración del diseño web para la vista de formulario y tres vistas: Tabla de datos, Hoja y Tarjeta. Obtén más información sobre las vistas aquí.

También puedes incluir opcionalmente la configuración del diseño móvil para la vista de formulario y la vista de Tabla de datos.

¿Qué sucede si el campo de formulario personalizado no tiene configuración de la interfaz de usuario?

Lo ideal es que tu campo de formulario personalizado esté diseñado para admitir las cuatro vistas en los diseños web y móviles. Sin embargo, si falta la configuración del diseño web para la vista de Tabla de datos o Tarjeta, se mostrará una interfaz de usuario de marcador de posición generada por el sistema. Ten en cuenta que esto se aplica únicamente al diseño web. Es posible que los campos personalizados que no incluyan configuraciones para otras vistas no se representen correctamente dentro de un formulario.

Crear un componente personalizado

1. Crea un componente de campo personalizado siguiendo estos pasos.

Importar y previsualizar un componente personalizado

En la página Importar componente, haz clic en la opción Cargar archivo para cargar un archivo .zip de tu campo de formulario personalizado.Antes de cargar tu componente, elige el tipo de datos de tu componente en el panel derecho. De forma predeterminada, se seleccionará el tipo de datos Texto. Asegúrate de que el tipo de datos seleccionado corresponda al tipo de datos de tu campo de formulario personalizado.

Tipos de datos para campos de formulario personalizados

Kissflow permite crear campos de formulario personalizados para determinados tipos de datos. Al crear un campo de formulario personalizado, asegúrate de que corresponda a uno de los seis tipos siguientes. Cada tipo de datos tiene un propósito específico según el tipo de datos que el campo deba gestionar:

• Texto – Una secuencia de caracteres o palabras, como nombres o descripciones.

• Número – Cualquier valor numérico, incluidos los números enteros y decimales.

• Booleano – Un valor verdadero/falso, que suele usarse para interruptores o casillas de verificación.

• Objeto – Una colección estructurada de pares clave-valor, útil para almacenar datos relacionados.

• Matriz de cadenas – Una lista de valores de texto, ideal para entradas de selección múltiple.

• Matriz de objetos – Una lista de elementos de datos estructurados, que se suele usar para conjuntos de datos complejos.

Texto

El tipo de datos de texto representa una cadena de caracteres, equivalente al tipo String de JavaScript. Úsalo para cualquier campo que acepte entradas de texto, como nombres, direcciones o comentarios. Los campos de texto también pueden admitir reglas de validación, como límites de caracteres o formatos obligatorios (por ejemplo, direcciones de correo electrónico).

Número

El tipo de datos de número almacena valores numéricos, incluidos números enteros y decimales. A diferencia de algunos lenguajes de programación, JavaScript usa un único tipo Number para todos los valores numéricos. Este tipo de datos resulta útil para cantidades, precios, porcentajes y cualquier campo que requiera una entrada numérica. La validación puede garantizar que los números estén dentro de un intervalo específico o cumplan requisitos de precisión.

Booleano

Booleano es un tipo de datos lógico con solo dos valores posibles: verdadero o falso. Es ideal para elecciones binarias, como activar o desactivar una función, confirmar una preferencia o responder preguntas de Sí/No.

Matriz de cadenas

Una matriz de cadenas es una lista de varios valores de cadena. Resulta útil cuando un campo debe aceptar varias entradas de texto, como seleccionar varias categorías, introducir etiquetas o enumerar aptitudes. Las matrices de cadenas pueden mostrarse como listas de verificación, listas desplegables de selección múltiple o campos de entrada separados por comas.

Objeto

Un objeto es una colección de pares clave-valor que almacena datos estructurados. Los objetos permiten agrupar varias propiedades relacionadas dentro de un solo campo. Por ejemplo, un objeto de perfil de usuario puede incluir campos como firstName, lastName, email y role. Los objetos resultan útiles cuando una sola entrada debe contener varios atributos.

Matriz de objetos

Una matriz de objetos es una matriz que contiene varios objetos, cada uno con su propio conjunto de propiedades. Resulta útil para gestionar conjuntos de datos estructurados, como una lista de productos, envíos de formularios o perfiles de usuario. Por ejemplo, una matriz de artículos de pedido podría contener objetos con los campos productName, price y quantity.

Para los tipos de datos Objeto y Matriz de objetos, debes proporcionar un esquema JSON válido. Sin un esquema JSON válido, el campo de formulario personalizado no podrá aceptar entradas correctamente.Para realizar pruebas, puedes usar un esquema JSON de ejemplo. Haz clic en la opción Rellenar ejemplo para completar el campo.

Crear parámetros de entrada

En la página Importar componente, puedes definir parámetros de entrada para tu campo personalizado. Puedes crear tres tipos de parámetros de entrada:

• Cadena – Acepta valores de texto.

• Número – Acepta valores numéricos.

• Lista desplegable estática – Una lista predefinida de opciones seleccionables.

Añadir un parámetro de entrada

1. Haz clic en Parámetros de entrada en el panel derecho y selecciona Añadir un parámetro.

2. Introduce un Nombre del parámetro y un ID.

3. Elige un Tipo de parámetro: Cadena, Número o Lista desplegable estática.

4. Establece un valor predeterminado. Es obligatorio para la Lista desplegable estática, pero opcional para los parámetros de Cadena y Número.
    

   

Previsualizar el componente personalizado

En Desktop hay cuatro tipos de vistas previas disponibles, dos de las cuales se aplican a PWA/Mobile.

1. Vista de formulario (aplicable a la vista móvil)

Muestra cómo aparece el campo personalizado en un formulario, como los formularios de dataform, Process o Board.

2. Vista de hoja

Muestra el campo personalizado dentro de una tabla editable, lo que permite actualizar directamente las entradas (por ejemplo, tablas de formularios o la vista de hoja en dataform).

3. Vista de tabla de datos (aplicable a la vista móvil)

Muestra el campo personalizado en una tabla de solo lectura, donde no se pueden actualizar las entradas (por ejemplo, la tabla Mis elementos o los informes tabulares).

4. Vista de tarjeta

Muestra el campo personalizado dentro de un diseño de tarjeta, como en informes de tarjetas o en la vista Galería de dataform.Nota: Puedes previsualizar tu componente en los modos Editable y Solo lectura ajustando los estados de permisos en el menú desplegable.

Vista previa en tiempo real

Puedes previsualizar tu componente antes de cargarlo mediante la opción Vista previa en tiempo real. Esto te permite ver los cambios en tiempo real mientras lo creas.

Configurar la vista previa en tiempo real

1. Usa la opción haz clic aquí para abrir la ventana de Vista previa en tiempo real.

2. Introduce la URL de tu servidor de desarrollo (por ejemplo, http://127.0.0.1:9000) y pulsa Intro.

Publicar un campo de formulario personalizado

Una vez que hayas creado los parámetros de entrada necesarios y estés satisfecho con la vista previa, tu campo de formulario personalizado estará listo para publicarse. Solo tienes que hacer clic en Publicar y el campo de formulario personalizado estará disponible para usarse en cualquier formulario de la aplicación en el que se publique.

Usar el campo de formulario personalizado en un formulario

1. Abre un formulario de dataform, de proceso o de Board y desplázate hacia abajo en el menú Todos los campos del panel izquierdo.

2. En Personalizado encontrarás todos los campos de formulario personalizados que hayas publicado.

3. Arrastra y suelta un campo personalizado en el formulario y configúralo como un campo de formulario predeterminado.

4. Tu campo de formulario personalizado estará listo para usarse en todos los formularios de tu aplicación.