Components
Common component properties

3min
Some properties are common to all ﻿ components. See the details below:
When
When - this property is used at two levels, in components to show/hide any component conditionally, and in actions to execute/not execute an action. 
Below are the settings to use with the when property: 
When: true
When: false
When: =@ctx set with an expression
Example and code snippet
The example below demonstrates how the when property is used at a component level to display a component.text-field (Note requirements) only when the component.checkbox (Special Diet) is selected. 
When-Display a field  
﻿
When.jigx
|
title: Lunch Order
description: Place your lunch order here
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80

datasources: 
  meals: 
    type: datasource.static 
    options: 
      data: 
          - id: 1 
            meal: Beef Lasagne 
          - id: 2
            meal: Chicken Wrap
          - id: 3
            meal: Tuna Pasta 
          - id: 4 
            meal: Toasted Ham Cheese and Tomato
          - id: 5 
            meal: Flapjacks with Fresh Berries

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Order Date
            value: =$now()
  - type: component.form
    instanceId: MealSelection
    options:
      children:
        - type: component.dropdown
          instanceId: Meal
          options:
            label: Select your meal
            data: =@ctx.datasources.meals
            item:
              type: component.dropdown-item
              options:
                title: =@ctx.current.item.meal
                value: =@ctx.current.item.meal
        - type: component.checkbox
          instanceId: SpecialDiet
          options:
            label: Special Diet
            helperText: Select if you have special diet requirments
            isRequired: false
        - type: component.text-field
          instanceId: SpecialDietDescp
          when: =@ctx.components.SpecialDiet.state.value = true ? 'true':'false'
          options:
            label: Note Requirements
            isMultiline: true
            isRequired: false
          
actions:
  - children:
      - type: action.submit-form
        options:
          formId: MealSelection
          provider: DATA_PROVIDER_DYNAMIC
          title: Book Meal
          entity: default/meal-selection
          method: create
          goBack: previous
title: Lunch Order
description: Place your lunch order here
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80

datasources: 
  meals: 
    type: datasource.static 
    options: 
      data: 
          - id: 1 
            meal: Beef Lasagne 
          - id: 2
            meal: Chicken Wrap
          - id: 3
            meal: Tuna Pasta 
          - id: 4 
            meal: Toasted Ham Cheese and Tomato
          - id: 5 
            meal: Flapjacks with Fresh Berries

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Order Date
            value: =$now()
  - type: component.form
    instanceId: MealSelection
    options:
      children:
        - type: component.dropdown
          instanceId: Meal
          options:
            label: Select your meal
            data: =@ctx.datasources.meals
            item:
              type: component.dropdown-item
              options:
                title: =@ctx.current.item.meal
                value: =@ctx.current.item.meal
        - type: component.checkbox
          instanceId: SpecialDiet
          options:
            label: Special Diet
            helperText: Select if you have special diet requirments
            isRequired: false
        - type: component.text-field
          instanceId: SpecialDietDescp
          when: =@ctx.components.SpecialDiet.state.value = true ? 'true':'false'
          options:
            label: Note Requirements
            isMultiline: true
            isRequired: false
          
actions:
  - children:
      - type: action.submit-form
        options:
          formId: MealSelection
          provider: DATA_PROVIDER_DYNAMIC
          title: Book Meal
          entity: default/meal-selection
          method: create
          goBack: previous
﻿
﻿
Updated 19 Sep 2023
Did this page help you?
TABLE OF CONTENTS
Example and code snippet