list
- List#
List properties allow you to create list of other properties that can be added or removed by the end user. An example would be a list of images used for a hero slider.
Available Parameters#
Parameter |
Type | Description |
---|---|---|
code |
String | |
group_prompt |
String | |
item_prompt_property |
String | |
list_type |
String | Predefined value for type of list to display. |
min_count |
Number | |
prompt |
String | |
properties |
Object | |
collapsed |
Number | 1 = Collapsed 0 = Open (default) |
template |
Object |
list_type
#
Lists are supported with the following list_type
values:
Property | Definition |
---|---|
text |
List of Text Boxes |
image |
List of Images |
product |
List of Products |
category |
Lists of Categories |
color |
List of Color Pickers |
date |
List of Date Pickers |
datetime |
List of Date/Time Picker |
link |
List of Links |
group |
List of groups |
You can also add new text boxes or delete them. The template object defines the default value the the “Add New” link is clicked.
Min/Max Modifiers#
All lists also support min_count and max_count to limit how many of a list a user can add or remove. The following example allows a min of 3 and a max of 5
Example#
Min/Max Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "text",
"min_count": 3,
"max_count": 5,
"template": {
"value": "Default Value"
}
}
List Text Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "text",
"template": {
"value": "Yellow Dog"
}
}
List of Images Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "image",
"width": "1600px",
"height": "580px",
"responsive_images": [
{
"code": "mobile",
"prompt": "Mobile",
"width": "344px",
"height": "320px"
},
{
"code": "tablet",
"prompt": "Tablet",
"width": "720px",
"height": "320px"
}
],
"template": {
"image": "",
"alt": "Alt Text",
"responsive_images": {
"mobile": "",
"tablet": ""
}
}
}
List of Products Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "product"
}
List of Categories Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "category"
}
List of Colors Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "color"
}
List of Date Picker Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "date"
}
List of Date/Time Picker Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "datetime"
}
List of Links#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "list",
"list_type": "link"
}
List of Colors Example#
Note
Lists of Groups have a item_prompt_property
property which is used to tell the outer list what property to use for the display (ie, you change this field in the inner group, set the title of the list entry to that value)
{
"code": "list_product",
"prompt": "List Product",
"type": "list",
"list_type": "group",
"group_prompt": "Button",
"item_prompt_property": "button_text:value",
"properties": [
{
"code": "button_style",
"prompt": "Button Style",
"type": "select",
"options": [
{
"text": "Primary",
"value": "primary"
},
{
"text": "Secondary",
"value": "secondary"
}
]
},
{
"code": "button_text",
"prompt": "Button Text",
"type": "text",
"required": true
},
{
"code": "button_link",
"default_type": "c",
"prompt": "Button Link",
"type": "link"
}
],
"template": {
"button_style": {
"value": "secondary"
},
"button_text": {
"value": "Shop Later"
},
"button_link": {
"type": "p",
"value": "featured-categories"
}
}
}