Los flujos de trabajo de cliente son lógica visual que se ejecuta en el navegador del visitante: cuando alguien hace clic, escribe, envía un formulario o cuando carga la página, se ejecuta una lista de pasos. El resultado de cada paso está disponible para el siguiente como steps.<id>.
Disparadores
| Disparador | Se ejecuta cuando |
|---|---|
| Page load | la página terminó de cargar |
| Element event | un elemento emite click, submit, change, input, mouseenter, mouseleave, focus o blur |
| Variable changes | una variable recibe un valor nuevo |
| Query succeeds / Query fails | una consulta termina o falla |
| Interval | cada N milisegundos |
| Called by another workflow | solo cuando otro flujo de trabajo lo ejecuta |
La forma más rápida de empezar: selecciona un elemento, abre Events en el inspector y presiona Add workflow.
Construir un flujo de trabajo
Abre el espacio de trabajo Logic
Los flujos de trabajo de la página actual aparecen a la izquierda. Crea uno y elige su disparador.
Agrega pasos
Elige acciones de la biblioteca de pasos: definir variables, volver a obtener datos, navegar, mostrar un aviso, reproducir una interacción, iniciar la sesión de un visitante… Cada parámetro puede ser una expresión.
Agrega control de flujo
Ramifica según una condición, elige según un valor, recorre un arreglo, ejecuta carriles en paralelo o envuelve pasos en un try/catch.
Pruébalo
Presiona Run in preview. El registro de ejecución muestra cada paso, su resultado y su tiempo, usando los valores de vista previa de tus variables. El modo de vista previa también ejecuta los flujos de trabajo en el lienzo.
{
"name": "Add to cart",
"runtime": "client",
"trigger": { "type": "event", "node": "n_btn_add", "event": "click" },
"steps": [
{ "id": "guard", "action": "core.branch",
"params": { "if": { "$expr": "!user.isLoggedIn" } },
"branches": { "then": [
{ "id": "toLogin", "action": "core.navigate", "params": { "to": "/login" } },
{ "id": "end", "action": "core.stop" }
] } },
{ "id": "add", "action": "core.setVar",
"params": { "var": "cart", "value": { "$expr": "[...vars.cart, item]" } } },
{ "id": "done", "action": "core.toast", "params": { "message": "Added to cart" } }
],
"onError": [
{ "id": "oops", "action": "core.toast", "params": { "message": { "$expr": "error.message" }, "variant": "error" } }
]
}
Errores
Cuando un paso falla, se ejecutan los pasos de on error con error en el ámbito. Sin ellos, el error se registra y, en la vista previa, se muestra como un aviso.
Límites
Una ejecución de cliente tiene un máximo de 200 pasos, 8 niveles de anidación, 1,000 iteraciones de bucle y esperas de 60 segundos, así que un error nunca puede congelar la pestaña de un visitante.
Todas las acciones y sus parámetros están en la referencia de acciones de flujos de trabajo.