Skip to content

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"
}

{
    "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"
        }
    }
}