shadcn.io is not affiliated with official shadcn/ui
Workflow Builder Onboarding Block for Vue
A framed window with an if-then rule drawn as connected nodes (a trigger, a condition and up to three actions), a sentence that reads the rule back, an Active switch and a Run a test that lights the nodes in turn.
Installation
Overview
Let a new user build the first rule of an automation and see it read back in plain words, with this window for Vue with Ark UI. It is Cogmoor, an automation tool, in a framed window with a top bar (the rule's name and Save rule, the one Shine Button) and a bar with an Active Switch and Run a test. The canvas is a vertical flow of nodes joined by connectors: a Trigger (a select of events), a Condition (a field, an operator and a value as three labelled Native Selects, the values following the field) and one to three Actions (what to do and where), each with Remove, and an Add action node after them. Under the canvas the rule reads as a sentence, for example “When a form is submitted and Priority is High, notify #support.” Run a test lights the nodes in turn and says “Test run: 3 steps in this demo.”
FAQ
How is the sentence made?
It is a pure function of the controls (sentenceOf): the trigger's words, the condition's field, operator and value, then each action as a verb and its target, joined with commas and “and”. Nothing in it is typed twice, so it can never disagree with the canvas.
Why does the value change when I change the field?
Each field has its own values (Priority has Low to Urgent, Channel has Email, Chat and Web form, Plan has Free, Pro and Enterprise), so changing the field resets the value to the first of the new field's values and the status line says so. The operator is “is” or “is not”.
What does Run a test do?
It lights the nodes one after another for 400 milliseconds each, the trigger, the condition and then each action, marks each as Ran and finishes with “Test run: N steps in this demo.” With reduced motion every node is marked at once. Changing the rule while it runs stops it. It never executes anything; the nodes just show the order.
How many actions can a rule have?
One to three. Add action appends a Notify node and focuses it; at three the button is quiet and says “Three actions is the most”. Remove takes an action out and moves focus to Add action; the last one cannot be removed.
What stays local in the demo, and how do I wire it?
Everything. Save rule says the rule was saved in this demo and Active only changes a line under the sentence. In your app save the Rule object where save says so, run your own dry run for the test, and replace TRIGGERS, FIELDS and KINDS with the events, fields and actions your product has.