Navigate Action — Action System

Navigate Action Config

// TypeScript — NavigateActionConfig
interface NavigateActionConfig {
  type: "navigate";
  target: string;          // AppPage route or external URL. Supports {{ tokens }}.
  params?: Record<string, string>; // URL parameters to pass (become route.* variables)
  replace?: boolean;       // true = replace history (no back button), false = push (default)
  external?: boolean;      // true = open in new tab (for external URLs)
}

Internal Navigation Examples

// Navigate to a static route
{ "type": "navigate", "target": "/leads" }

// Navigate with a dynamic route parameter (from row context)
{ "type": "navigate", "target": "/leads/{{ row.id }}" }

// Navigate with query parameters
{
  "type": "navigate",
  "target": "/reports",
  "params": {
    "year": "{{ variables.selectedYear }}",
    "status": "active"
  }
}
// Result URL: /reports?year=2026&status=active
// In the target page: {{ route.year }} resolves to "2026"

// Navigate back to previous page
{ "type": "navigate", "target": -1 }
// -1 = browser history back (like pressing the Back button)

External Navigation

// Open external URL in new tab
{
  "type": "navigate",
  "target": "https://docs.example.com/leads/{{ route.id }}",
  "external": true
}

Replace vs. Push History

Mode	`replace`	Back Button Behavior	Use Case
Push (default)	false	Goes back to the previous page	Normal navigation — list → detail
Replace	true	Skips the replaced page in history	Redirect after form submit — don't go back to the form

Navigate with Row Context

When triggered from a DataGrid onRowSelect, the {{ row.* }} context is available in the target and params:

// DataGrid actions config
"actions": {
  "onRowSelect": {
    "type": "navigate",
    "target": "/leads/{{ row.id }}",
    "params": {
      "status": "{{ row.status }}"
    }
  }
}
// User clicks a row where id="lead-123", status="active"
// → navigates to /leads/lead-123?status=active

← Overview Next: Submit Form Action →