VBCS Action Chains: Building UI Logic

What action chains are

Action chains are sequences of actions that execute in response to UI events (button clicks, page loads, data changes). They are VBCS’s alternative to writing JavaScript event handlers.

flowchart TD
    EVT[User clicks Submit button] --> AC[Action Chain: submitForm]
    AC --> A1[1. Validate Form]
    A1 --> CHK{Valid?}
    CHK -->|No| A2[Show validation errors]
    CHK -->|Yes| A3[2. Set loading = true]
    A3 --> A4[3. Call REST Action
POST /orders]
    A4 --> RES{Response?}
    RES -->|Success 201| A5[4. Set loading = false]
    A5 --> A6[5. Show success toast]
    A6 --> A7[6. Navigate to Order Detail page]
    RES -->|Error 4xx/5xx| A8[4. Set loading = false]
    A8 --> A9[5. Show error message]

    style EVT fill:#1e3a5f,stroke:#3B82F6,color:#e2e8f0
    style A7 fill:#0f2d1f,stroke:#22C55E,color:#e2e8f0
    style A9 fill:#2d0f0f,stroke:#EF4444,color:#e2e8f0

Common action chain patterns

Pattern 1: Page load data fetch

// vbEnter lifecycle action chain — runs when page opens
// Action: Call REST → GET /employees/{id}
// Map: 
//   Input:  page variable employeeId → path param {id}
//   Output: response.body → page variable employeeRecord

// Then: assign variable
$page.variables.pageTitle = 
  $page.variables.employeeRecord.firstName + 
  ' ' + 
  $page.variables.employeeRecord.lastName;

Pattern 2: Conditional navigation with parameters

// Navigate action configuration:
{
  "page": "employee-detail",
  "params": {
    "employeeId": "{{ $page.variables.selectedRow.employeeId }}",
    "mode": "{{ $page.variables.isManager ? 'edit' : 'view' }}"
  }
}

Pattern 3: Loop with REST call

For processing a list of records via multiple API calls:

flowchart TD
    A1[Get list of employee IDs] --> A2[For Each: employeeIds]
    A2 --> A3[Call REST: GET /timesheets/{id}/pending]
    A3 --> A4{Has pending
timesheets?}
    A4 -->|Yes| A5[Add to pendingList array]
    A4 -->|No| A6[Skip]
    A5 --> A7{More items?}
    A6 --> A7
    A7 -->|Yes| A2
    A7 -->|No| A8[Show pendingList in table]

    style A8 fill:#0f2d1f,stroke:#22C55E,color:#e2e8f0

Action types reference

Action	When to use
Call REST Action	Invoke a service connection endpoint
Assign Variables	Set page/app variable values
Navigate	Go to another page or flow
Fire Notification	Show toast message
If	Branch based on condition
For Each	Loop over an array
Call Function	Execute a page function (JavaScript)
Reset Variables	Clear form fields
Fire Custom Event	Communicate between components

Debugging action chains

Add $application.variables.debug = true and use the Audit panel in the VBCS designer to see each action’s input/output at design time. At runtime, use the browser DevTools Network tab — every REST call appears as an XHR request with the exact payload sent and response received.