Componente de página

Kissflow te permite crear componentes de interfaz para páginas e importarlos como componentes de página reutilizables en tu aplicación. Puedes usar HTML simple o frameworks de frontend como React para crear tu componente personalizado.

1. Crear un componente personalizado nuevo

Si empiezas un proyecto desde cero, puedes crear un paquete de componente personalizado de Kissflow con npm

npx create-kf-component@latest

Se te pedirá un nombre para el componente y que elijas entre HTML o React. Una vez instalado, ejecuta los siguientes comandos:

cd componentname
npm install
npm run dev

Cuando termines el desarrollo, puedes usar el comando npm run zip para compilar el proyecto y comprimirlo en un archivo zip. Después puedes importar este archivo zip directamente en Kissflow como componente personalizado.

2. Como módulo de npm

Si tienes un proyecto existente basado en un framework como React y quieres convertirlo en un componente personalizado de Kissflow, puedes instalar e importar el SDK de Kissflow como módulo de npm.

npm install @kissflow/lowcode-client-sdk

Uso:

Una vez instalado el paquete en tu módulo, se puede importar e inicializar así:

import KFSDK from "@kissflow/lowcode-client-sdk";
let kf;
(async function () {
  kf = await KFSDK.initialize();
})();

3. Como HTML/JS

Si creas tu componente personalizado con HTML y JS simples, puedes importar el paquete del SDK en tu archivo HTML. El paquete del SDK se importa como un archivo umd para facilitar su uso dentro de HTML y de JavaScript sin frameworks.

Importa el paquete en tu HTML:

<script src="https://unpkg.com/@kissflow/lowcode-client-sdk@latest/dist/kfsdk.umd.js"></script>

E inicialízalo en el archivo JavaScript:

let kf;
window.onload = async function () {
  kf = await window.kf.initialize();
};

Usar parámetros de entrada con un componente de página personalizado

Debes incluir la función Watch params en el código de tu componente de página personalizado para que los parámetros de entrada creados en la interfaz de Kissflow funcionen con tu componente. Esta es su sintaxis:

Watch Params

Escucha los cambios en los parámetros asignados a los componentes de página dentro de la página.

Ejemplo

function onParamsChange(data) {
  console.info("Mapped data changes", data);
  // Your logic goes here
}
kf.context.watchParams(onParamsChange);