All components (244)

Workflow editor

Management · WorkflowBuilder

What it is and when to use it

A node and connection workflow editor: add steps, move them, connect an output with an input and see the workflow's problems.

When to use it

Automations ("when an order comes in, check the stock and issue the invoice"), approval processes, integrations.
types are the step types, each with its inputs and outputs. A port with kind only connects to another of the same type; a required input must have something connected; a multiple input accepts several connections.
Nodes are moved by dragging the header or with the arrows (Shift for big jumps), renamed with F2 or their button and deleted with Delete. You connect by pressing an output and then an input.
The canvas pans by dragging the background and zooms with the buttons or with Control and the wheel; "Arrange" places them in layers following the arrows.
acyclic (by default) does not allow closing loops. runState paints the state of each node in a run.

When not to

A linear process of a few steps: Steps or Wizard.
The editor runs nothing: it hands out the workflow through onChange and running it is the server's job.

Keyboard: everything on the canvas can also be done from the right-hand panel: the list of connections (with its remove button) and the form to connect with two dropdowns.

Accessibility: each node is a named group, each port a button that says which node it belongs to, the workflow's problems are written out and each change is announced.

Fine appearance: variables --amset-flow-line (the connections) and --amset-flow-dot (the dot grid of the background).

What it looks like

Node type

Drag a node or move it with the arrows. Press an output and then an input to connect them. Delete removes the chosen node.

<WorkflowBuilder
  label="What happens when an order comes in"
  types={tipos}
  value={flujo}
  onChange={setFlujo}
  acyclic
  height="22rem"
  runState={{ n1: "done", n2: "running" }}
/>

Props

Import it with import { WorkflowBuilder } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which workflow it is («Customer onboarding»). Required.
`onChange`required	`(value: Workflow) => void`	—
`types`required	`readonly WorkflowNodeType[]`	The node types that can be placed, with their inputs and outputs.
`value`required	`Workflow`	—
`acyclic`	`boolean`	Do not allow closing loops. On by default.
`className`	`string`	Merged with the library classes; it does not replace them.
`height`	`string`	The height of the canvas. 32 rem by default.
`readOnly`	`boolean`	It can be seen and moved through, but it does not change.
`runState`	`Readonly<Record<string, NodeRunState>>`	The state of each node in a run (running, done, with an error), to follow it on the canvas.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: