jw-list
The schema defines the following properties:
Property | Type | Required | Description |
type | widget.list | true | |
instanceId | InstanceId | Expression | false | |
options | List Widget Options | true | |
Properties of the options object:
Property | Type | Required | Description |
footer | string | Expression | TextWithFormat | TextLocale | false | Footer text of widget |
footerAlign | enum<string> | false | Footer text align |
placeholders | object[] | false | Widget specific placeholders config |
data | string | false | |
item | JWListItemConfig | jc-product-item | jc-stage | true | |
top | jc-trend | false | Top part of widget |
bottom | jc-trend | false | Bottom part of widget |
Footer text of widget
Footer text align
This element must be one of the following enum values:
- left
- right
- center
Widget specific placeholders config
The object is an array with all elements of the type object.
The array object has the following properties:
item (JWListItemConfig | jc-product-item | jc-stage, required)
The object must be any of the following types:
Top part of widget
Bottom part of widget
The schema defines the following additional types:
Properties of the JWListItemConfig object:
Property | Type | Required | Description |
type | component.list-item | true | |
instanceId | InstanceId | Expression | false | |
when | Expression | boolean | false | |
options | List Item Options | true | |
Properties of the options object:
Property | Type | Required | Description |
title | string | Expression | TextWithFormat | TextLocale | true | First line of text - text won't wrap. |
subtitle | string | Expression | TextWithFormat | TextLocale | false | Second line of text - text won't wrap. |
style | List Item Style | false | More of them can be true. It will be evaluated based on priority. |
color | object[] | false | Changing color of list item based on conditions. First evaluated to true will be used. |
divider | enum<string> | false | Space between two items in list. Transparent divider will make 1pt "margin" between two items. Solid displays colored line. |
leftElement | icon | AvatarElement | ImageElement | progress | checkbox | false | |
rightElement | AmountControl | badge | button | icon | switch | value | checkbox | false | |
onPress | false | Action Keg component that will be triggered by pressing on this list item. | |
value | string | string | false | Value of list item. It is used when selection for example |
progress | number | string | false | Value between 0 and 1 to show progress as background of list item |
label | Label | false | Display label on list-item |
horizontalItemSize | HorizontalListItemSize | false | Define variations of horizontal item |
avatars | string | false | |
description | string | Expression | TextWithFormat | TextLocale | false | Third line of text - text won't wrap. |
swipeable | object | false | Right and left actions that are displayed when list item is swiped to the left/right |
First line of text - text won't wrap.
Second line of text - text won't wrap.
More of them can be true. It will be evaluated based on priority.
Properties of the style object:
Property | Type | Required | Description |
isDisabled | boolean | string | false | Change style to disabled. |
isError | boolean | string | false | Change style to error. |
isWarning | boolean | string | false | Change style to error. |
isPositive | boolean | string | false | Change style to error. |
isStrikeThrough | boolean | string | false | If the text is crossed out |
isHighlighted | boolean | string | false | Change background to highlight item |
isWaitingSync | boolean | string | false | Will display "Waiting sync" indicator |
Change style to disabled.
The object must be any of the following types:
Change style to error.
The object must be any of the following types:
Change style to error.
The object must be any of the following types:
Change style to error.
The object must be any of the following types:
If the text is crossed out
The object must be any of the following types:
Change background to highlight item
The object must be any of the following types:
Will display "Waiting sync" indicator
The object must be any of the following types:
Changing color of list item based on conditions. First evaluated to true will be used.
The object is an array with all elements of the type object.
The array object has the following properties:
Space between two items in list. Transparent divider will make 1pt "margin" between two items. Solid displays colored line.
This element must be one of the following enum values:
- none
- transparent
- solid
Default: "none"
The object must be any of the following types:
Properties of the leftElement object:
Property | Type | Required | Description |
element | progress | true | Type of component |
value | number | string | true | Value between 0 and 1 |
title | string | Expression | TextWithFormat | TextLocale | false | Title displayed in the middle of circle progress |
Value between 0 and 1
The object must be any of the following types:
Title displayed in the middle of circle progress
Properties of the leftElement object:
Property | Type | Required | Description |
element | checkbox | true | Type of component |
value | string | boolean | string | false | Controlled value of checkbox |
initialValue | string | boolean | string | false | Uncontrolled value of checkbox |
onChange | false | Action Keg component that will be triggered when value is changed |
Controlled value of checkbox
The object must be any of the following types:
Uncontrolled value of checkbox
The object must be any of the following types:
Action Keg component that will be triggered when value is changed
The object must be any of the following types:
Properties of the rightElement object:
Property | Type | Required | Description |
element | badge | true | Type of component |
isHidden | boolean | string | false | When you want to hide this component |
When you want to hide this component
The object must be any of the following types:
Properties of the rightElement object:
Property | Type | Required | Description |
element | button | true | Type of component |
title | string | Expression | TextWithFormat | TextLocale | true | Text displayed on button |
onPress | true | Action Keg component that will be triggered by pressing on this button. |
Text displayed on button
Action Keg component that will be triggered by pressing on this button.
Properties of the rightElement object:
Property | Type | Required | Description |
element | switch | true | Type of component |
value | string | boolean | string | false | Initial value of switch |
initialValue | string | boolean | string | false | Uncontrolled value of switch |
onChange | false | Action Keg component that will be triggered when value is changed |
Initial value of switch
The object must be any of the following types:
Uncontrolled value of switch
The object must be any of the following types:
Action Keg component that will be triggered when value is changed
Properties of the rightElement object:
Property | Type | Required | Description |
element | value | true | Type of component |
text | string | Expression | TextWithFormat | TextLocale | true | Displayed value - text. |
Displayed value - text.
Properties of the rightElement object:
Property | Type | Required | Description |
element | checkbox | true | Type of component |
value | string | boolean | string | false | Controlled value of checkbox |
initialValue | string | boolean | string | false | Uncontrolled value of checkbox |
onChange | false | Action Keg component that will be triggered when value is changed |
Controlled value of checkbox
The object must be any of the following types:
Uncontrolled value of checkbox
The object must be any of the following types:
Action Keg component that will be triggered when value is changed
Action Keg component that will be triggered by pressing on this list item.
Value of list item. It is used when selection for example
The object must be any of the following types:
Value between 0 and 1 to show progress as background of list item
The object must be any of the following types:
Display label on list-item
Properties of the label object:
Property | Type | Required | Description |
title | string | Expression | TextWithFormat | TextLocale | true | Title of label |
color | object[] | false | Changing color of label based on conditions. First evaluated to true will be used. |
isHidden | boolean | string | false | Hide label |
Title of label
Changing color of label based on conditions. First evaluated to true will be used.
The object is an array with all elements of the type object.
The array object has the following properties:
Hide label
The object must be any of the following types:
Define variations of horizontal item
Default: "regular"
The object must be any of the following types:
Third line of text - text won't wrap.
Right and left actions that are displayed when list item is swiped to the left/right
Properties of the swipeable object:
Property | Type | Required | Description |
left | object[] | false | |
right | object[] | false | |
The object is an array with all elements of the type object.
The array object has the following properties:
The object is an array with all elements of the type object.
The array object has the following properties:
Avatar
Properties of the AvatarElement object:
Property | Type | Required | Description |
element | avatar | true | Type of element |
text | string | Expression | TextWithFormat | TextLocale | true | Text displayed when uri is empty. |
uri | string | string | false | Source of image displayed as avatar |
onPress | false | Action Keg component that will be triggered by pressing on this button. |
Text displayed when uri is empty.
Source of image displayed as avatar
The object must be any of the following types:
Action Keg component that will be triggered by pressing on this button.
Properties of the ImageElement object:
Property | Type | Required | Description |
element | image | true | Type of element |
text | string | Expression | TextWithFormat | TextLocale | true | Text displayed when uri is empty. |
uri | string | string | false | Source of image displayed as avatar |
onPress | false | Action Keg component that will be triggered by pressing on this button. | |
resizeMode | ResizeMode | false | Image resize mode |
Text displayed when uri is empty.
Source of image displayed as avatar
The object must be any of the following types:
Action Keg component that will be triggered by pressing on this button.
Image resize mode
This element must be one of the following enum values:
- contain
- cover
- stretch
- center
Properties of the AmountControl object:
Property | Type | Required | Description |
value | number | string | false | Value of amount control |
initialValue | number | string | false | Initial value of amount control |
onChange | false | Action Keg component that will be triggered when value is changed | |
onDelete | ja-execute-entity | ja-execute-entities | false | If this property is set, trash symbol is displayed when the value is 1 or (min + 1). |
minimum | number | string | false | Limits the minimum number. Default is 0. |
maximum | number | string | false | Limits the maximum number. |
step | number | string | false | Step for increment/decrement. Default is 1. |
element | amount-control | true | Type of component |
Value of amount control
The object must be any of the following types:
Initial value of amount control
The object must be any of the following types:
Action Keg component that will be triggered when value is changed
If this property is set, trash symbol is displayed when the value is 1 or (min + 1).
The object must be any of the following types:
Limits the minimum number. Default is 0.
The object must be any of the following types:
Limits the maximum number.
The object must be any of the following types:
Step for increment/decrement. Default is 1.
The object must be any of the following types:
Size variants of horizontal list-item
This element must be one of the following enum values:
- small
- regular
- large
Properties of the AvatarItemConfig object:
Property | Type | Required | Description |
text | string | Expression | TextWithFormat | TextLocale | true | Text as placeholder in case of missing image |
uri | string | string | false | Source of image displayed as avatar |
Text as placeholder in case of missing image
Source of image displayed as avatar
The object must be any of the following types: