Skip to main content

Redirect Component

The Redirect Component is a utility component in the CXTMS System that enables automatic navigation to specified paths with optional parameters. This component is particularly useful for creating landing pages, handling conditional routing, and implementing navigation flows without user interaction.

YAML Structure​

The Redirect Component is defined using YAML within the App Modules. Below is the standard structure for configuring a Redirect Component:

component: redirect
props:
  path: "/dashboard"
  params:
    dashboard_id: 1234
  delay: 0

Attribute Description​

Props​

  • path (string, required):

    The URL path to redirect to (template expressions allowed). By default, paths are within the current organization context.

    • Organization paths: Start with / or no prefix (e.g., "/dashboard", "orders/list") — resolved to /org/{organizationId}/v2/...
    • System paths: Start with ~ (e.g., "~/org/select") — the ~ is removed and the rest is used as-is, outside the organization context
    • External URLs: Start with http:// or https://
    note

    ~ has a different meaning here than in the navigate action, where ~/path is still an organization path.

    Internal redirect URLs do not include a locale segment, so the site resolves them to the en-US locale. The organizationId is read from the component's variables. To stay in the user's current locale and organization, prefer the navigate action.

  • params (object, optional):

    Key-value pairs representing query parameters to be passed to the target path. These parameters will be encoded and appended to the URL as query strings.

    Example:

    params:
      dashboard_id: 1234
      view_mode: "detailed"

  • delay (number, optional):

    The delay in milliseconds before the redirect occurs. Default is 0 (immediate redirect). Useful for displaying loading messages or completing animations before navigation.

  • replace (boolean, optional):

    When set to true, replaces the current history entry instead of pushing a new one. Default is false.

  • condition (string, optional):

    A template expression evaluated against the component variables and store. When it resolves to a falsy value, the redirect is skipped.

    condition: "{{ eval !orderId }}"

Examples​

Organization Redirect​

A redirect within the current organization to the dashboard path with a specific dashboard ID.

component: redirect
props:
  path: "/dashboard"
  params:
    dashboard_id: 1234

System Redirect​

A redirect to a system-level route outside the organization context.

component: redirect
props:
  path: "~/org/select"