Conditional parameters inside group[] parameter type

Support
#1

Hi,

The below code was working until I changed from using the “group” parameter type to group[]. I can choose an option but nothing after that works anymore.

"gridSquare": {
"type": "group[]",
"label": "Squares",
"itemLabel": "{{index}}. {{blockType}}",
"params": {
  "blockType": {
    "type": "choose",
    "label": "Block Type",
    "options": [
      { "value": "image", "label": "Image" },
      { "value": "stat", "label": "Stat" },
      { "value": "icon", "label": "Icon" }
    ]
  },
  "image": {
    "type": "image",
    "when": "eq(blockType, 'image')"
  },
  "background": {
    "type": "color",
    "label": "Background Colour",
    "initial": "#4A6DFF",
    "when": "eq(blockType, 'stat')"
  },
  "textColour": {
    "type": "color",
    "label": "Text Colour",
    "initial": "#ffffff",
    "when": "eq(blockType, 'stat')"
  },
  "statistic": {
  	"type": "text",
    "label": "Statistic",
    "initial": "19%",
    "when": "eq(blockType, 'stat')"
  },
  "description": {
  	"type": "text",
    "label": "Statistic Description",
    "initial": "Staff in 'earn  and learn' roles",
    "when": "eq(blockType, 'stat')"
  }
},
"icon": {
  "type": "image",
  "label": "Icon",
  "initital": "/wp-content/themes/pro-child/assets/img/Icon_marque.svg",
  "when": "eq(blockType, 'icon')"
}
}

Thanks

#2

Hey @SANDBOX,

The issue is caused by two errors in your JSON structure:

1. The "icon" parameter is outside of "params"

In Themeco’s Cornerstone/Pro parameter schema, when you use a group[] (repeater) control, all individual inputs that belong to each repeated item must reside inside the "params" object.

Currently, the "icon" field is placed outside of the "params" block (as a sibling to "params"). Because of this:

  • The builder does not recognize "icon" as a field of the items in the list.
  • The "when": "eq(blockType, 'icon')" condition fails to evaluate because "icon" is outside the scope of the repeated item where blockType is defined.

2. Spelling typo in "initial"

Inside the "icon" block, "initial" is misspelled as "initital".

Sample Corrected Code Structure

To fix this, move the "icon" block inside the "params" object (before the closing brace of "params") and correct the spelling of "initial":

"gridSquare": {
  "type": "group[]",
  "label": "Squares",
  "itemLabel": "{{index}}. {{blockType}}",
  "params": {
    "blockType": {
      "type": "choose",
      "label": "Block Type",
      "options": [
        { "value": "image", "label": "Image" },
        { "value": "stat", "label": "Stat" },
        { "value": "icon", "label": "Icon" }
      ]
    },
    "image": {
      "type": "image",
      "when": "eq(blockType, 'image')"
    },
    "background": {
      "type": "color",
      "label": "Background Colour",
      "initial": "#4A6DFF",
      "when": "eq(blockType, 'stat')"
    },
    "textColour": {
      "type": "color",
      "label": "Text Colour",
      "initial": "#ffffff",
      "when": "eq(blockType, 'stat')"
    },
    "statistic": {
      "type": "text",
      "label": "Statistic",
      "initial": "19%",
      "when": "eq(blockType, 'stat')"
    },
    "description": {
      "type": "text",
      "label": "Statistic Description",
      "initial": "Staff in 'earn  and learn' roles",
      "when": "eq(blockType, 'stat')"
    },
    "icon": {
      "type": "image",
      "label": "Icon",
      "initial": "/wp-content/themes/pro-child/assets/img/Icon_marque.svg",
      "when": "eq(blockType, 'icon')"
    }
  } // <--- "params" closing brace is now here, enclosing "icon"
}
#3

Thanks very much @christian but it’s still not working, this is my completed JSON:

{
  "background": {
    "type": "color",
    "label": "Background Colour",
    "initial": "#F4F0DE"
  },
  "gridSquare": {
    "type": "group[]",
    "label": "Squares",
    "itemLabel": "{{index}}. {{blockType}}",
  	"params": {
      "blockType": {
        "type": "choose",
        "label": "Block Type",
        "options": [
          { "value": "image", "label": "Image" },
          { "value": "stat", "label": "Stat" },
          { "value": "icon", "label": "Icon" }
        ]
      },
      "image": {
        "type": "image",
        "when": "eq(blockType, 'image')"
      },
      "background": {
        "type": "color",
        "label": "Background Colour",
        "initial": "#4A6DFF",
        "when": "eq(blockType, 'stat')"
      },
      "textColour": {
        "type": "color",
        "label": "Text Colour",
        "initial": "#ffffff",
        "when": "eq(blockType, 'stat')"
      },
      "statistic": {
        "type": "text",
        "label": "Statistic",
        "initial": "19%",
        "when": "eq(blockType, 'stat')"
      },
      "description": {
        "type": "text",
        "label": "Statistic Description",
        "initial": "Staff in 'earn  and learn' roles",
        "when": "eq(blockType, 'stat')"
      },
      "icon": {
        "type": "image",
        "label": "Icon",
        "initial": "/wp-content/themes/pro-child/assets/img/Icon_marque.svg",
        "when": "eq(blockType, 'icon')"
      }
  	}
	}
}
#4

Hey @SANDBOX,

When controls are nested inside a list-like type such as group[], they are evaluated within the context of each repeated item, rather than at the element’s root level.

By default, the condition engine evaluates bare keys (like blockType) against the element’s root properties. Because blockType is nested inside each individual item of the gridSquare array, the root level does not have a blockType key, and the expression evaluates to undefined.

The Solution

To reference a sibling parameter within the current group item, you must prefix the parameter key with $. (e.g., $.blockType). This tells the expression engine to check the local scope of the current item.

Try the following JSON with the conditions updated to use $.blockType:

{
  "background": {
    "type": "color",
    "label": "Background Colour",
    "initial": "#F4F0DE"
  },
  "gridSquare": {
    "type": "group[]",
    "label": "Squares",
    "itemLabel": "{{index}}. {{blockType}}",
    "params": {
      "blockType": {
        "type": "choose",
        "label": "Block Type",
        "options": [
          { "value": "image", "label": "Image" },
          { "value": "stat", "label": "Stat" },
          { "value": "icon", "label": "Icon" }
        ]
      },
      "image": {
        "type": "image",
        "when": "eq($.blockType, 'image')"
      },
      "background": {
        "type": "color",
        "label": "Background Colour",
        "initial": "#4A6DFF",
        "when": "eq($.blockType, 'stat')"
      },
      "textColour": {
        "type": "color",
        "label": "Text Colour",
        "initial": "#ffffff",
        "when": "eq($.blockType, 'stat')"
      },
      "statistic": {
        "type": "text",
        "label": "Statistic",
        "initial": "19%",
        "when": "eq($.blockType, 'stat')"
      },
      "description": {
        "type": "text",
        "label": "Statistic Description",
        "initial": "Staff in 'earn  and learn' roles",
        "when": "eq($.blockType, 'stat')"
      },
      "icon": {
        "type": "image",
        "label": "Icon",
        "initial": "/wp-content/themes/pro-child/assets/img/Icon_marque.svg",
        "when": "eq($.blockType, 'icon')"
      }
    }
  }
}
#5

Perfect! Thanks Christian.

#6

You’re welcome, @SANDBOX

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.