Common component properties

some properties are common to all {{jigx}} 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 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 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 \# use the when property to set a condition in an expression \# when the checkbox is selected the text field displays \# if the condition evaluates to false the text field is hidden 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 datasource 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 applying colors based on specific conditions colors can be configured based on specific conditions for example, a payment amount exceeding a certain threshold can be displayed in red however, conditional color configurations are only available in areas that support conditions, such as list items in contrast, direct color options are more widely supported, for example, lists allow both conditional and direct setups, whereas interactive images only support direct options additionally, certain areas restrict the available color choices, while ui elements support the predefined set of fourteen colors when configuring the color property, select the color condition option under the when property, add an expression that defines the condition under which the specified color should be applied color condition color \ when =@ctx current item registered = true color color2 \ when =@ctx current item registered = false color color4 color (no condition) options color color2