MallaDocs
HomeQuickstartOpen Malla

Client workflows

Visual logic that runs in the browser on clicks, submits, page load and variable changes.

User guide

Client workflows are visual logic that runs in the visitor’s browser: when someone clicks, types, submits, or when the page loads, run a list of steps. Every step’s result is available to the next as steps.<id>.

Triggers

TriggerRuns when
Page loadthe page has loaded
Element eventan element fires click, submit, change, input, mouseenter, mouseleave, focus or blur
Variable changesa variable gets a new value
Query succeeds / Query failsa query finishes or fails
Intervalevery N milliseconds
Called by another workflowonly when another workflow runs it

The quickest way to start: select an element, open Events in the inspector and press Add workflow.

Build a workflow

  1. Open the Logic workspace

    Workflows of the current page are listed on the left. Create one and choose its trigger.

  2. Add steps

    Pick actions from the step library: set variables, refetch data, navigate, show a toast, play an interaction, sign a visitor in… Every parameter can be an expression.

  3. Add control flow

    Branch on a condition, switch on a value, loop over an array, run lanes in parallel, or wrap steps in try/catch.

  4. Test it

    Press Run in preview. The run log shows each step, its result and its timing, using the preview values of your variables. Preview mode runs workflows on the canvas too.

json
{
  "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" } }
  ]
}

Errors

When a step fails, the on error steps run with error in scope. Without them the error is logged and, in preview, shown as a toast.

Limits

A client run is capped at 200 steps, 8 levels of nesting, 1,000 loop iterations and 60-second delays, so a mistake can never freeze a visitor’s tab.

Every action and its parameters are listed in the workflow actions reference.