Automation Builder

About this block

Automation Builder is the step editor for a single automation, three cards stacked in a vertical when/then flow: a Trigger card (When a deal is won, Pipeline: Enterprise Sales), a Filter card (Only if deal value is greater than $10,000), and an Action card (Send a Slack message to #sales-wins @channel). A dashed chevron connector runs between each card; a dashed Add step button sits below the last one. The panel opens in Draft state and saves with Discard / Save automation.

Each card is a const object; the shared StepCard component renders all three. The connector is a hairline vertical line with a ChevronDown so the direction of flow is never ambiguous.

When to use

Reach for this block on the automation edit page, wired to a step configuration API so each card expands into a real field picker when clicked.

A natural flow around it on an Application Pro page:

Before

• Trigger action row

After

• Condition branch card
• Run history table

What you can display

One strong use is the linear trigger-filter-action flow. Other builder configurations:

• Trigger only. A single card with a large Add step prompt below, for a brand-new automation.
• Multi-action sequence. Several action cards stacked after one trigger, no filter required.
• Published state. Remove the Draft badge and swap Discard for Pause automation.

Tip: keep the connector visible even when cards are collapsed so the sequence order stays readable at a glance.