Components
Common component properties

2min
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: [email protected]
            item:
              type: component.dropdown-item
              options:
                title: [email protected]
                value: [email protected]
        - 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: [email protected] = 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
          onSuccess: 
            type: action.go-back
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
          onSuccess: 
            type: action.go-back
﻿
﻿
Updated 05 Nov 2024
Did this page help you?
Components
jig-header