Activity Form Builder
The Activity Form Builder is a visual editor for designing the configuration panel that users see when they place a custom activity in a workflow. It lets you control which fields appear, how they are laid out, what type of input each field provides, and how fields map to the activity's input and output schemas.
You access the Activity Form Builder during the Configuration step of the Creating a Custom Activity wizard — and again whenever you edit an existing custom activity.
Key Concepts
Property Groups
A custom activity form is divided into property groups — named tabs or sections that organise related fields. Every activity has three built-in groups that cannot be removed:
| Group | Purpose |
|---|---|
Configuration (config) | Fields the user fills in to configure the activity (URLs, options, toggles, etc.). |
Input Mapping (inputMapping) | Defines how incoming workflow data is mapped to the activity's input schema. |
Output Mapping (outputMapping) | Defines how the activity's output is mapped back into the workflow context. |
You can add custom groups to the Configuration section to organise complex activities into logical sections.
Grid Layout
Inside each group the layout uses a 12-column grid. Every field occupies a number of columns (span) between 1 and 12:
span: 12— field takes the full row width.span: 6— two fields sit side-by-side.span: 4— three fields in a row.
Rows stack vertically. You can reorder rows and columns by dragging fields in the editor canvas.
Field Configuration
Each field on the canvas has a set of common properties that you configure in the right-hand Property Panel:
| Property | Description |
|---|---|
| Title | The label shown above the field. |
| Key | The internal identifier used in the activity's schema (must be unique within the group). |
| Required | Whether the field must be filled before the activity can be saved. |
| Placeholder | Ghost text shown inside empty inputs. |
| Info Message | Tooltip text shown next to the label (ℹ icon). |
| Hidden condition | A JavaScript expression; when true the field is hidden from the user. |
| Disabled condition | A JavaScript expression; when true the field is read-only. |
| Default Value | Pre-filled value shown when the activity is first placed in a workflow. |
The Editor Interface
Canvas (Centre Panel)
The canvas shows a live preview of the form as the user will see it. You can:
- Drag fields from the left toolbar onto the canvas to add them.
- Drag fields already on the canvas to reorder them within a row or move them to a different row.
- Click a field to select it and open its properties in the right panel.
- Delete a field using the trash icon that appears on hover.
Left Toolbar — Field Palette
The left toolbar lists every available field type. Drag any type onto the canvas to insert it at that position.
Field types are grouped by category:
- Basic Inputs — text, number, password, checkbox/toggle, radio button
- Selection — select (single), multi-select, remote select (lazy-loaded from API)
- Mapping & Binding — mappable field, DnD field
- Advanced — code editor, condition expression, filter groups, table
- Schema — upload schema, mapping input/output
- Display — alert message, display component
See Field Type Reference for the full list with configuration options.
Right Panel — Property Panel
When you click a field on the canvas, its properties appear in the right panel. The available options depend on the field type — for example, a remote select has a fetchCode property while a mappable field has a mappedTo property.
Common properties are always shown at the top; field-specific properties appear below.
Building a Form: Step-by-Step
- Open the Configuration step of the Create Custom Activity or Edit Custom Activity wizard.
- Select a group from the tab bar (Configuration, Input Mapping, Output Mapping, or a custom group).
- Drag a field type from the left toolbar onto the canvas.
- Click the new field to open the Property Panel on the right.
- Fill in the Title, Key, and any other required properties.
- Repeat for additional fields.
- Reorder or resize fields by dragging them on the canvas.
- Click Next to proceed to the Review step.
Conditions: Hiding and Disabling Fields
The Hidden and Disabled properties accept JavaScript expressions evaluated against the current form values. This lets you build dynamic forms where fields appear or lock based on other fields.
Example — hide a field unless another is set to a specific value:
formValues.authType !== "oauth"
When authType is not "oauth", this field is hidden. When authType equals "oauth", the field becomes visible.
Example — disable a field when a toggle is off:
!formValues.enableAdvanced
What's Next
- Field Type Reference — every field type with its configuration options, including Mappable Field and Remote Select
- Importing from an OpenAPI Spec — auto-generate activities from a Swagger/OpenAPI document