Componente de campo de formulario

Kissflow te permite crear tus propios campos de formulario personalizados como componentes personalizados para usarlos en todos los formularios de tu aplicación. Un campo de formulario personalizado debe escribirse en JavaScript y crearse con el framework React. Sigue las instrucciones de instalación y creación que se indican a continuación.

Requisitos previos

• Node.js
• Un gestor de versiones para Node.js

Para crear un proyecto de campo de formulario personalizado,

npx create-kf-component@latest

Introduce el nombre del proyecto y elige form field.

Cambia al directorio de tu proyecto y ábrelo con tu editor de código preferido,

cd <your-project-name>
code . # To open the project using VS Code.

Para instalar las dependencias,

npm install

Para ejecutar una compilación de desarrollo,

npm run dev

El proyecto contendrá los siguientes archivos para el diseño web: FormField.jsx, DataTable.jsx, Sheet.jsx y Card.jsx.

Y para el diseño móvil o PWA, los archivos FormField.jsx y DataTable.jsx. De todos ellos, es obligatorio escribir el código del archivo FormField.jsx de la versión web. Puedes omitir el código de las demás vistas. Sin embargo, esto afectará a cómo se muestra tu campo de formulario en la interfaz.

Cuando termines el desarrollo, puedes usar el comando npm run zip para generar un archivo .zip de tu campo de formulario. Después puedes importar este archivo .zip directamente en Kissflow como campo de formulario personalizado.

Crear un campo de formulario personalizado

Las propiedades del campo que configuraste en el formulario de Kissflow, el valor actual del campo y una función para actualizar ese valor se pasan a tu componente de React como props.

Value

La propiedad Value es el valor actual del campo.

Ejemplo:

El ejemplo muestra cómo se presenta el valor actual del campo en un cuadro de texto HTML nativo. Cuando se introduce un valor nuevo, el campo se actualiza y el cambio se comunica al formulario de Kissflow con el método updateValue.

import React from "react";

export function FormField(props) {
    const { value, actions } = props;
    const { updateValue } = actions;
    return (
        <input
            type="text"
            value={value}
            placeholder="User's name"
            onChange={(e) => updateValue(e.target.value)}
        />
    );
}

Actions

Contiene todos los métodos asociados a la realización de una acción, como actualizar un campo.

const api = {
    actions: {
        updateValue
    }
};

updateValue

Esta función actualiza el valor actual del campo de formulario personalizado.

Parámetro

Ejemplo

const { value } = props;
onClick = () => {
    updateValue(value + 1);
};

En el ejemplo anterior, si el tipo del campo es número, su valor aumentaría en 1.

Propiedades del campo

El objeto Field toma las propiedades que configuras para tu campo personalizado en la configuración del formulario de la interfaz de Kissflow. Estas propiedades incluyen el nombre, el ID y el tipo del campo. Definir estas propiedades permite que tu campo personalizado se comporte como los campos de formulario predeterminados.

Muestra

{
    "field": {
        "id": "untitled_field",
        "name": "Custom email field",
        "type": "Text",
        "isRequired": false,
        "hint": "Enter a valid email (e.g., user@example.com)"
    }
}

Definiciones

• id: el ID del campo. Es un identificador único del campo del formulario.
• name: el nombre del campo.
• type: el tipo de datos del campo, como Text, Number, Boolean, Object, Array of objects o Array of strings.
• isRequired: indica si el campo es obligatorio.
• hint: el texto de ayuda del campo.

Readonly

Si esta propiedad se marca como true, el campo personalizado queda bloqueado y no se puede editar.

Muestra

{ "readonly": true }

Errors

En la interfaz de formularios de Kissflow, puedes definir reglas de validación para tu campo personalizado o marcarlo como obligatorio. Si lo que introduce un usuario no supera la validación, los mensajes de error que configuraste se pasan a tu componente de React como props, para que puedas mostrarlos en tu interfaz.

Muestra

{
    "errors": ["Value is required", "Value must more than 50."]
}

Parameters

Esta propiedad muestra todos los parámetros de entrada que configuraste al crear un componente de campo de formulario personalizado en la interfaz de Kissflow.

Se pueden crear tres tipos de parámetros de entrada:

• String.
• Number.
• Un desplegable estático.

Muestra

{
    "max_length": 100,
    "gender": {
        "Label 1": "Male",
        "Label 2": "Female"
    },
    "username": "Name"
}

Cell

Este objeto representa las propiedades de una celda en la vista de hoja.

Focused

Cuando la propiedad focused es true, la celda se resalta con un contorno azul, que indica que está lista para recibir un valor introducido por el usuario. Cuando es false, la celda está en modo de solo visualización.

Muestra

{
    "cell": {
        "focused": true
    }
}