Skip to content

Instantly share code, notes, and snippets.

@panchicore
Created April 14, 2026 21:48
Show Gist options
  • Select an option

  • Save panchicore/7763960204c53e7a588c08569550ce6a to your computer and use it in GitHub Desktop.

Select an option

Save panchicore/7763960204c53e7a588c08569550ce6a to your computer and use it in GitHub Desktop.
Set Field Node — UI Starter Kit for UX designer

Set Field Node — UI Starter Kit

Panel for the field_set workflow node. One grouped dropdown for field selection, one dynamic value control based on field type. No conditions UI — node always runs.


Empty State

┌──────────────────────────────────────────┐
│  Set Field                          [x]  │
│──────────────────────────────────────────│
│                                          │
│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Select a field...               ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │ (disabled — select a field first)  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  ℹ This node always runs when reached.   │
│  Use a Condition Branch for conditional  │
│  execution.                              │
│                                          │
│  [Delete]                      [Save]    │
└──────────────────────────────────────────┘

Field Dropdown (InventoryModel Workflow)

Groups come from entity type. No source selector needed.

┌────────────────────────────────────┐
│ ── Model Information ──────────── │  ← core fields
│    Tiering                        │
│    Business Unit                  │
│    Use Case                       │
│    Vendor Model                   │
│    Vendor Name                    │
│ ── Model Inventory Fields ─────── │  ← custom fields
│    Risk Level                     │
│    Is Automated                   │
│    Reviewers                      │
│    Target Completion Date         │
│    Applicable Regulations         │
│    Executive Summary              │
│    Compliance Rating              │
└────────────────────────────────────┘

Field Dropdown (Finding Workflow)

┌────────────────────────────────────┐
│ ── Artifact Information ────────── │  ← core fields
│    Severity                       │
│ ── Artifact Fields ───────────── │  ← custom fields
│    Remediation Plan               │
│    Impact Assessment              │
│    Is Escalated                   │
└────────────────────────────────────┘

Value Controls by Field Type

Tiering (core, string:tiering)

Badge picker — org-defined tiers.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Tiering                         ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │ ○ Tier 1  ○ Tier 2  ● Tier 3     │  │
│  │ ○ Tier 4  ○ Clear                 │  │
│  └────────────────────────────────────┘  │

Stores: "Tier 3" (string)


Business Unit (core, string:business-unit)

Org-scoped dropdown.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Business Unit                   ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │ Select business unit...         ▼  │  │
│  └────────────────────────────────────┘  │
│  ┌────────────────────────────────────┐  │
│  │  Retail Banking                   │  │
│  │  Capital Markets                  │  │
│  │  Wealth Management                │  │
│  │  ── Clear ──                      │  │
│  └────────────────────────────────────┘  │

Stores: "cuid_retail_banking_xxx" (CUID)


Severity (core, Finding workflow)

Org-defined severity levels.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Severity                        ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │  ● ■ Critical                     │  │
│  │  ○ ■ High                         │  │
│  │  ○ ■ Medium                       │  │
│  │  ○ ■ Low                          │  │
│  │  ○   Clear                        │  │
│  └────────────────────────────────────┘  │

■ = color swatch from severity config. Stores: "cuid_severity_critical_xxx" (CUID)


Single Select (custom, string:single-select)

Radio list from field's values[] config.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Risk Level                      ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │  ○ Low                            │  │
│  │  ○ Medium                         │  │
│  │  ● High                           │  │
│  │  ○ Critical                       │  │
│  │  ○ Clear                          │  │
│  └────────────────────────────────────┘  │

Stores: "High" (string)


Multiple Select (custom, array:multiple)

Checkbox list from field's values[] config.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Applicable Regulations          ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │  ☑ SOX                            │  │
│  │  ☐ GDPR                           │  │
│  │  ☑ BCBS                           │  │
│  │  ☐ Clear all                      │  │
│  └────────────────────────────────────┘  │

Stores: ["SOX", "BCBS"] (string[])


Checkbox (custom, boolean:checkbox)

Yes/No toggle.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Is Automated                    ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │  ☑ Yes   ☐ No   ☐ Clear          │  │
│  └────────────────────────────────────┘  │

Stores: true (boolean)


User Multi-Select (custom, array:model-user)

Searchable user picker with chips.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Reviewers                       ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │ Search users...                    │  │
│  │ ┌──────────┐ ┌──────────────────┐  │  │
│  │ │ × J.Park │ │ × M.Rodriguez   │  │  │
│  │ └──────────┘ └──────────────────┘  │  │
│  │ ┌────────────────────────────────┐ │  │
│  │ │  Ana Torres                   │ │  │
│  │ │  David Chen                   │ │  │
│  │ │  Lisa Kumar                   │ │  │
│  │ └────────────────────────────────┘ │  │
│  └────────────────────────────────────┘  │

Stores: ["cuid_jpark_xxx", "cuid_mrodriguez_xxx"] (CUID[])


Date (custom, string:date)

Date picker.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Target Completion Date          ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │ 📅  2026-06-30                  ▼  │  │
│  │            Clear                   │  │
│  └────────────────────────────────────┘  │

Stores: "2026-06-30" (ISO string)


Text (custom, string:single-line)

Free text input.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Vendor Name                     ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │ Acme Analytics Inc.                │  │
│  │                          Clear ×   │  │
│  └────────────────────────────────────┘  │

Stores: "Acme Analytics Inc." (string)


Number (custom, number)

Number input.

│  Target Field                            │
│  ┌────────────────────────────────────┐  │
│  │ Compliance Rating               ▼  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  Value                                   │
│  ┌────────────────────────────────────┐  │
│  │ 85                          Clear  │  │
│  └────────────────────────────────────┘  │

Stores: 85 (number)


Canvas Node Preview

Shows field name and value summary. Adapts to content:

┌─────────────────────────────┐
│  ✎ Set Field                │    ← unconfigured
│  Configure                  │
└─────────────────────────────┘

┌─────────────────────────────┐
│  ✎ Set Field                │    ← single value
│  Tiering → Tier 3           │
└─────────────────────────────┘

┌─────────────────────────────┐
│  ✎ Set Field                │    ← boolean
│  Is Automated → Yes         │
└─────────────────────────────┘

┌──────────────────────────────┐
│  ✎ Set Field                 │    ← multi value, truncated
│  Reviewers → J.Park +1 more │
└──────────────────────────────┘

┌──────────────────────────────┐
│  ✎ Set Field                 │    ← clear action
│  Risk Level → (clear)        │
└──────────────────────────────┘

Design Notes

  • One field per node (MVP). Schema supports multiple assignments for future.
  • Clear is always an option — sets the field to null.
  • No condition UI in the panel. Conditional execution is done by placing a Condition Branch node before this one on the canvas.
  • Field dropdown groups match the existing field grouping pattern used elsewhere in the app (Model Information, Model Inventory Fields, Artifact Information, Artifact Fields).
  • Value controls should reuse existing field edit components wherever possible (TierLevelBadgePicker, BusinessUnitsSelect, etc.).
  • Core fields that already have dedicated nodes (status/stage) are excluded from the dropdown.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment