C3 AI Documentation Home

Render components based on a condition

Learn how to render the different user interface views based on different conditions, limit certain user interactions, and extend permission to others. If you want to render different UI based on more than two different conditions, use switch renderer instead. See UI Demo, for a live example of conditional renderer. To set up UI Demo or start an application instance, see set up UI Demo.

This is not a replacement for security because it does not prevent users from executing certain server commands.

We go over the example of a cluster admin who has the option to select a button to create an EC2 cloud instance, but the button is disabled for others like a data analyst.

We use the UiSdlConditionalRenderer Type to do so.

Render the conditional renderer component

Under ui/c3/meta, create a JSON file that is a component of UiSdlConditionalRenderer Type.

The conditional component’s structure looks like this:

JSON
{
  "type" : "UiSdlConditionalRenderer",
  "condition" : {
    "type" : "<SomeCondition>",
  },
  "thenComponent" : {
    "id" : "<Component.To.Render.If.Condition.Is.Satisfied>"
  },
  "elseComponent" : {
    "id" : "<Component.To.Render.If.Condition.Is.NOT.Satisfied>"
  }
}

Add a condition

We can render different user interfaces based on the condition. Since we are conditionally rendering UI based on adminGroups, we have an out-of-box C3 AI Type to do this for us. The type is UiSdlPermissionRenderCondition.

Stemming from the previous code block, the condition would look like this:

JSON
{
  "type" : "UiSdlConditionalRenderer",
  "condition": {
    "type": "UiSdlPermissionRenderCondition",
    "adminGroup": {"id": "C3.Group.ClusterAdmin"}
  }
}

Add components

We create the components that render when the condition is satisfied and when it is not satisfied.

  • To render the component that shows when the condition is satisfied, create ExamplePackage.CreateInstanceButton.json file.
JSON
{
  "type": "UiSdlConnected<UiSdlButton>",
  "component": {
    "content": "Create a EC2 Instance"
  }
}
  • To render the component that shows when the condition is not satisfied, create ExamplePackage.DisabledButton.json file.
JSON
{
  "type": "UiSdlConnected<UiSdlButton>",
  "component": {
    "content": "Create a EC2 Instance"
    "disabled": true
  }
}
  • The final conditional renderer will look like this:
JSON
{
  "type" : "UiSdlConditionalRenderer",
  "condition" : {
    "type": "UiSdlPermissionRenderCondition",
    "adminGroup": {"id": "C3.Group.ClusterAdmin"}
  },
  "thenComponent" : {
    "id" : "ExamplePackage.CreateInstanceButton"
  },
  "elseComponent" : {
    "id" : "ExamplePackage.DisabledButton"
  }
}

Render based on a canary flag

Follow the previous directions, but replace the condition with UiSdlCanaryRenderCondition Type. The thenComponent component is rendered when the CanaryMode#enabled is true, otherwise, the elseComponent component is rendered.

Implement your own conditions

You can create your own custom conditions. In the next section, we showcase how to create your own custom conditions. The custom components are based on the winner of a lottery. Winners of the lottery should see a winning picture when they check the lottery result page. The others should see a try-again picture.

Define the type

Under the src folder:

  • Create a .c3typ file that mixes in the UiSdlConditionalRenderer and Value component Type.
  • Add a @typeScript annotation and field function useCondition

Here is a LotteryCondition Type example that showcases the previous examples:

Note: When creating a Type, make sure the filename is the same as the type created. In this example, the filename would be: LotteryCondition.c3typ.

Type
@typeScript
type LotteryCondition mixes UiSdlRenderCondition, Value {

  useCondition: ~
}

Implement the useCondition function

Under the same folder you created the LotteryCondition.c3typ, create the ts file to implement the function.

Note: Make sure the filename is the same as the .c3typ filename. In this example, the filename would be: LotteryCondition.ts.

Render the conditional renderer component based on the custom condition

Following the previous logic, we render the conditional render, but now we add our custom condition in the condition field.

NOTE: You must create the components that render WinPicture and TryNextTimePicture.

JSON
{
  "type" : "UiSdlConditionalRenderer",
  "condition" : {
    "type": "LotteryCondition"
  },
  "thenComponent" : {
    "id" : "ExamplePackage.WinPicture"
  },
  "elseComponent" : {
    "id" : "ExamplePackage.TryNextTimePicture"
  }
}

Example

You can see an example on uiDemo using the URL /c3/uidemo/sdl-demo/conditional-renderer/result-expected-from-condition.

Was this page helpful?