Render components based on a binary condition

Use UiSdlConditionalRenderer to decide which UI to display based on user type, page parameters, feature flags, or custom logic. UiSdlConditionalRenderer is a UI component. It evaluates a UiSdlConditionalRenderConfig#condition, which acts as a mini-component that executes a UiSdlRenderCondition#useCondition function. Based on the result, the system displays either the UiSdlConditionalRenderConfig#thenComponent or the UiSdlConditionalRenderConfig#elseComponent.

Use this component when you want to:

• Enable admin-only actions
• Hide buttons or views based on configuration flags
• Display alternate content based on dynamic rules

Use UiSdlSwitchRenderer when you want to map more than two results to different components.

Copy link to this section

Render different views for a WindTurbine administrator

Show an "Edit WindTurbine" button for users in the WindTurbineAdmin group. Show a read-only notice for everyone else.

Copy link to this section

Define the admin-only and fallback components

These two JSON components define the visible UI for each case: editing if allowed, or a documentation message if not.

// ${package}/c3/ui/meta/ExamplePackage.WindTurbineEditButton.json
{
  "type": "UiSdlConnected<UiSdlButton>",
  "component": {
    "content": "Edit Wind Turbine"
  }
}

// ${package}/c3/ui/meta/ExamplePackage.WindTurbineReadOnlyNotice.json
{
  "type": "UiSdlConnected<UiSdlInlineNotification>",
  "component": {
    "title": "You do not have access.",
    "status": "ERROR"
  }
}

Copy link to this section

Create the conditional renderer

Use UiSdlConditionalRenderer to check the user's group membership and show the appropriate component.

// ${package}/c3/ui/meta/ExamplePackage.WindTurbineConditionalRenderer.json
{
  "type": "UiSdlConditionalRenderer",
  "condition": {
    "type": "UiSdlPermissionRenderCondition",
    "adminGroup": { "id": "C3.Group.WindTurbineAdmin" }
  },
  "thenComponent": {
    "id": "ExamplePackage.WindTurbineEditButton"
  },
  "elseComponent": {
    "id": "ExamplePackage.WindTurbineReadOnlyNotice"
  }
}

The condition field accepts any Type that mixes UiSdlRenderCondition and implements the UiSdlRenderCondition#useCondition method. The platform evaluates the useCondition function at runtime to decide which component to show. You can explore the base UiSdlRenderCondition Type to discover all out-of-box condition Types.

C3 AI provides several common condition types:

• UiSdlPermissionRenderCondition: Controls access based on admin group membership
• UiSdlCanaryRenderCondition: Displays components based on canary flags
• UiSdlPageParamRenderCondition: Renders views based on page parameter values

Copy link to this section

Show a feature based on a canary rollout

Display different components depending on whether a user participates in a feature rollout. Use the UiSdlCanaryRenderCondition Type to check whether the canary flag is enabled. If it is, the platform renders the thenComponent. If not, it renders the elseComponent.

You do not need to define a custom condition or implement a TypeScript function. The platform evaluates CanaryMode#enabled at runtime.

Copy link to this section

Use a conditional renderer with UiSdlCanaryRenderCondition

This configuration renders different edit buttons depending on whether the canary flag is on.

// ${package}/c3/ui/meta/ExamplePackage.WindTurbineConditionalRenderer.json
{
  "type": "UiSdlConditionalRenderer",
  "condition": {
    "type": "UiSdlCanaryRenderCondition"
  },
  "thenComponent": {
    "id": "ExamplePackage.WindTurbineEditButtonExperimental"
  },
  "elseComponent": {
    "id": "ExamplePackage.WindTurbineEditButtonLegacy"
  }
}

Use the CanaryMode utility in your the C3 AI console to control the flag.

CanaryMode.enable();   // Turn the flag ON
CanaryMode.disable();  // Turn the flag OFF
CanaryMode.enabled();  // Check current status

When the canary flag is enabled, the experimental edit button renders. Otherwise, the legacy version renders.

You can also clear the platform-side cache with:

CanaryModeConfig.clearCache();

Copy link to this section

Render different views based on page parameter presence

Use a URL parameter to determine which component to render. The UiSdlPageParamRenderCondition Type checks for a specific value in a page parameter and renders the correct component based on that match.

Copy link to this section

Set up the route first

Before using a page parameter in a conditional renderer, define the route that includes the parameter. In this example, the route captures the value of myUrlParam directly from the URL.

Add the following entry to your route file:

// ${package}/metadata/UiSdlRoute/UiRoute.csv

targetModuleName,targetPageName,name,urlPath
examplePacakge,PageLayout,/,/
examplePacakge,PageLayout,/home,/home
examplePacakge,PageLayout,/{{myUrlParam}},/{{myUrlParam}}

This enables the application to extract the value of myUrlParam from the URL and make it available to components.

Copy link to this section

Use a conditional renderer with page param and value match

This configuration checks the URL for a parameter named myUrlParam. If the value equals "something", the renderer displays the edit button. If it doesn’t match, it shows the read-only notice.

// ${package}/c3/ui/meta/ExamplePackage.WindTurbineConditionalRenderer.json
{
  "type": "UiSdlConditionalRenderer",
  "condition": {
    "type": "UiSdlPageParamRenderCondition",
    "pageParamId": "myUrlParam",
    "value": "something",
    "operator": "EQUAL"
  },
  "thenComponent": {
    "id": "ExamplePackage.WindTurbineEditButton"
  },
  "elseComponent": {
    "id": "ExamplePackage.WindTurbineReadOnlyNotice"
  }
}

When the user visits a URL such as:

http://my-app/windturbine-page?myUrlParam=something

the thenComponent renders. If the value is anything else or missing, the elseComponent renders instead. This approach is useful when you need to control the UI based on route context or deep links into the application. For example, you might use a URL parameter to control edit vs. view mode.

Copy link to this section

Create your own custom threshold-based condition

Sometimes you need more custom logic than what built-in conditions allow.

Copy link to this section

Define a custom threshold condition Type

Create a new .c3typ Type to check turbine output levels.

/* ${package}/src/entity/WindTurbineThresholdCondition.c3typ */
@typeScript
type WindTurbineThresholdCondition mixes UiSdlRenderCondition {
  useCondition: ~
}

Copy link to this section

Implement the threshold check logic

Write a TypeScript function that returns true if turbine output exceeds a set threshold.

// ${package}/src/entity/WindTurbineThresholdCondition.ts
export function useCondition(condition: any): boolean {
  const { turbineOutput } = condition;
  return turbineOutput > 5000;
}

Copy link to this section

Use the custom condition in a conditional renderer

Configure the conditional renderer to check turbine output and show different components.

// ${package}/c3/ui/meta/ExamplePackage.WindTurbineConditionalRenderer.json
{
  "type": "UiSdlConditionalRenderer",
  "condition": {
    "type": "WindTurbineThresholdCondition",
    "turbineOutput": 6000
  },
  "thenComponent": {
    "id": "WindTurbine.OverThreshold"
  },
  "elseComponent": {
    "id": "WindTurbine.UnderThreshold"
  }
}

Copy link to this section

Use switch renderer when you need multiple outcomes

Use UiSdlSwitchRenderer when you need to handle more than two possible results.

• UiSdlConditionalRenderer supports only true/false (then/else) outcomes.
• UiSdlSwitchRenderer supports many possible values mapped to many different components.

See Render components based on switch cases for detailed examples.