C3 AI Documentation Home

Render components based on switch cases

Use UiSdlSwitchRenderer when you need to show one UI component out of many possible options. This pattern works well for rendering different dashboards, displaying status messages, or controlling multi-step flows. UiSdlSwitchRenderer is a UI component that evaluates a condition, and decides which component to render based on the result of that condition. It uses a UiSdlSwitchRenderer#condition block that runs logic through a UiSdlRenderSwitchCondition#useSwitchCondition function and selects a component from a map of possibilities.

Use this pattern when:

  • You have three or more variations to display
  • The decision logic depends on user input, system status, or external data
  • You want a clean, declarative structure for handling complex UI flows

If you need only two outcomes (true/false), use UiSdlConditionalRenderer instead.

Show different dashboards based on turbine health status

WindTurbines have different health levels. Create a dynamic dashboard that adapts to show:

  • A green healthy dashboard
  • A maintenance warning dashboard
  • A critical alert dashboard

This approach ensures that each turbine's current health state determines what the user sees.

Create the components to render

Create a separate JSON UI component for each health category. Each one defines the visible content for a different turbine status.

Component for healthy turbines

JSON
// ${package}/c3/ui/meta/examplePackage.WindTurbineDashboardHealthy.json
{
  "type": "UiSdlConnected<UiSdlInlineNotification>",
  "component": {
    "title": "All systems operational.",
    "status": "SUCCESS"
  }
}

This component displays when the turbine's health score is excellent.

Component for turbines that need maintenance

JSON
// ${package}/c3/ui/meta/examplePackage.WindTurbineDashboardNeedsMaintenance.json
{
  "type": "UiSdlConnected<UiSdlInlineNotification>",
  "component": {
    "title": "Schedule routine maintenance.",
    "status": "WARNING"
  }
}

This component displays when the turbine's health score shows it needs service soon.

Component for critical turbines

JSON
// ${package}/c3/ui/meta/examplePackage.WindTurbineDashboardCritical.json
{
  "type": "UiSdlConnected<UiSdlInlineNotification>",
  "component": {
    "title": "Alert: Critical failure detected!",
    "status": "ERROR"
  }
}

This component displays when the turbine's health score is dangerously low.

Create the switch condition type

Define a *.c3typ file that declares your custom condition type. This Type will drive the logic for determining which dashboard to display.

Type
/* ${package}/src/renderer/WindTurbineHealthCondition.c3typ */

@typeScript
type WindTurbineHealthCondition mixes UiSdlRenderSwitchCondition { 
  useSwitchCondition: ~ ts-client
  healthScore: int 
}

This Type tells the platform that the condition will evaluate dynamically and return a switch value.

Implement the switch condition logic in TypeScript

Implement the logic that reads a turbine’s health score and maps it to one of the categories: "healthy", "needsMaintenance", or "critical".

TypeScript
// ${package}/src/rendererWindTurbineHealthCondition.ts

export function useSwitchCondition(condition: WindTurbineHealthCondition): string {
  const { healthScore } = condition;

  if (healthScore > 90) return "healthy";
  if (healthScore > 50) return "needsMaintenance";
  return "critical";
}

The useSwitchCondition function runs at runtime. It analyzes the input and returns a simple keyword string that the UiSdlSwitchRenderer matches against the available components.

Render the switch renderer with health categories

This JSON configuration links your WindTurbineHealthCondition to the dashboards you created.

JSON
// ${package}/c3/ui/meta/
{
  "type": "UiSdlSwitchRenderer",
  "condition": {
    "type": "WindTurbineHealthCondition",
    "healthScore": 45
  },
  "componentsToRender": {
    "healthy": {
      "id": "WindTurbine.DashboardHealthy"
    },
    "needsMaintenance": {
      "id": "WindTurbine.DashboardNeedsMaintenance"
    },
    "critical": {
      "id": "WindTurbine.DashboardCritical"
    }
  }
}

Here’s how it works:

  • If the health score is greater than 90, show the "healthy" dashboard.
  • If the health score is greater than 50 but less than 90, show the "needs maintenance" dashboard.
  • Otherwise, show the "critical" dashboard.

The platform automatically evaluates the condition, looks up the matching case in UiSdlSwitchRenderer#componentsToRender, and displays the appropriate UI component.

Use UiSdlSwitchRenderer when you want the UI to adapt dynamically based on runtime values. Define a custom condition type, write the evaluation logic in TypeScript, and map each possible result to a visual component. This structure keeps your UI flexible, context-sensitive, and easy to maintain as your application grows.

Use UiSdlConditionalRenderer for binary (yes/no) decisions. Use UiSdlSwitchRenderer for multi-path decisions.

Was this page helpful?