Render components based on switch cases

The UiSdlSwitchRenderer component allows you to render different user interface views based on switch cases, limit certain user interactions, and extend permission to others. See the UI Demo, for a live example of switch renderer. To set up a 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.

Copy link to this section

Render the switch renderer component

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

The structure of a switch renderer component is shown in the following code block. Enter the conditions that can lead to different outcomes or "cases" that are displayed. This condition is created in the next few sections. Enter the components to render based on the conditions in the "caseOne", "caseTwo", and "caseThree" fields.

{
  "type" : "UiSdlSwitchRenderer",
  "condition": {
    "type" : "<SomeSwitchCondition>",
  },
  "componentsToRender": {
    "caseOne": {
      "id": "<Component.To.Render.For.Case.One>"
    },
    "caseTwo": {
      "id": "<Component.To.Render.For.Case.Two>"
    },
    "caseThree": {
      "id": "<Component.To.Render.For.Case.Three>"
    }
  }
}

Copy link to this section

Define the Type

The Type that is defined or created will be used as a reference in the UiSdlSwitchRenderer component. This reference serves as a condition that can lead to different cases.

Under the src folder:

• Create a .c3typ file that mixes in the UiSdlSwitchRenderer component Type.
• Add a @typeScript annotation and field function useSwitchCondition

The following code block is a LotterySwitchCondition Type:

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

@typeScript
type LotterySwitchCondition mixes UiSdlRenderCondition {

  useSwitchCondition: ~
}

Copy link to this section

Implement the useSwitchCondition function

Under the same (src) folder, create a LotterySwitchCondition.ts file to implement the useSwitchCondition function and return a switch case.

Note: Make sure the filename is the same as the .c3typ filename.

import { LotterySwitchCondition } from '@c3/types';

export const useSwitchCondition = (condition: LotterySwitchCondition): any => {
  // Some logic to determine if the user wins any prize
  switch(lotteryCase) {
    case 1:
      return 'firstPrize';
    case 2:
      return 'secondPrize';
    case 3:
      return 'thirdPrize';
    default:
      return 'noPrize';
  }
}; 

Copy link to this section

Render the switch renderer component based on the custom switch condition

Following the previous logic, you render the switch render, but now you add a custom condition in the condition field. From the previous section, the return values, 'firstPrize', 'secondPrize', 'thirdPrize', and 'noPrize' match the key nested under componentsToRender.

Note: You must create the components that render ExamplePackage.FirstPrizePicture, ExamplePackage.SecondPrizePicture, ExamplePackage.ThirdPrizePicture and ExamplePackage.TryNextTimePicture.

{
  "type" : "UiSdlSwitchRenderer",
  "condition": {
    "type" : "LotterySwitchCondition",
  },
  "componentsToRender": {
    "firstPrize": {
      "id": "ExamplePackage.FirstPrizePicture"
    },
    "secondPrize": {
      "id": "ExamplePackage.SecondPrizePicture"
    },
    "thirdPrize": {
      "id": "ExamplePackage.ThirdPrizePicture"
    },
    "noPrize": {
      "id": "ExamplePackage.TryNextTimePicture"
    }
  }
}

You can see examples on uiDemo in this path /c3/uidemo/switch-renderer/random.