I can't get Checkbox Tree to be dynamically populated

💬 App Building
1

I don't know which version of Retool we have, but I don't understand how the properties are properly set to make a nested mapped/dynamic tree even when the data is a currently a static JSON structure. I dunno if my json structure fed to it needs to be something specific, but i copied the json structure of a manual/static tree's data property on inspection. And i have just hacked and tried to set the other properties, similar to the manual/static tree. And the properties form in the editor does not seem to set the other mapped/dynamic properties, but that doesn't really do anything since, i suppose at runtime it manages/updates all other properties. Anyway, here are the two stringified checkbox tree states:

Manual/static Checkbox Tree

{
  "pluginType": "CheckboxGroupWidget2",
  "heightType": "auto",
  "itemMode": "static",
  "data": [
    {
      "value": "Option 1",
      "label": "",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "e29a9",
      "parentKey": ""
    },
    {
      "value": "Option 2",
      "label": "",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "64e3a",
      "parentKey": "e29a9"
    },
    {
      "value": "Option 3",
      "label": "",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "",
      "parentKey": "64e3a"
    }
  ],
  "values": [
    "Option 1",
    "Option 2",
    "Option 3"
  ],
  "value": [
    "Option 1"
  ],
  "selectedIndexes": [
    0
  ],
  "selectedItems": [
    {
      "value": "Option 1",
      "label": "Option 1",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "e29a9",
      "parentKey": ""
    }
  ],
  "parentKeyByIndex": [
    "",
    "e29a9",
    "64e3a"
  ],
  "delimiter": "-",
  "groupLayout": "tree",
  "hidden": false,
  "customValidation": "",
  "maxCount": null,
  "margin": "4px 8px",
  "_desktopMargin": "4px 8px",
  "hideValidationMessage": false,
  "checkedPathArray": [
    [
      "Option 1"
    ]
  ],
  "_validate": false,
  "required": false,
  "disabled": false,
  "minCount": null,
  "validationMessage": "",
  "showInEditor": false,
  "_mobileMargin": "4px 8px",
  "tooltipText": "",
  "labelAlign": "left",
  "id": "connectorsConfigTree",
  "formDataKey": "connectorsConfigTree",
  "hiddenByIndex": [
    false,
    false,
    false
  ],
  "labelCaption": "",
  "labelWidth": 33,
  "deprecatedLabels": [],
  "label": "",
  "_hasMigratedNestedItems": true,
  "captionByIndex": [
    "",
    "",
    ""
  ],
  "checkedPathStrings": [
    "Option 1"
  ],
  "leafPathArray": [],
  "labelWidthUnit": "%",
  "invalid": false,
  "tooltipByIndex": [
    "",
    "",
    ""
  ],
  "labels": [
    "",
    "",
    ""
  ],
  "selectedLabels": [
    "Option 1"
  ],
  "overflowType": "scroll",
  "keyByIndex": [
    "e29a9",
    "64e3a",
    ""
  ],
  "labelPosition": "top",
  "labelWrap": false,
  "minColumnWidth": 0,
  "disabledValues": [],
  "checkStrictly": false,
  "leafPathStrings": [],
  "disabledByIndex": [
    false,
    false,
    false
  ],
  "maintainSpaceWhenHidden": false,
  "_disabledByIndex": [
    false,
    false,
    false
  ],
  "_values": [
    "Option 1",
    "Option 2",
    "Option 3"
  ],
  "_ids": [
    "2cc52",
    "f0bfc",
    "2c1f7"
  ],
  "_captionByIndex": [
    "",
    "",
    ""
  ],
  "_hiddenByIndex": [
    false,
    false,
    false
  ],
  "_keyByIndex": [
    "e29a9",
    "64e3a",
    ""
  ],
  "_labels": [
    "",
    "",
    ""
  ],
  "_parentKeyByIndex": [
    "",
    "e29a9",
    "64e3a"
  ],
  "_tooltipByIndex": [
    "",
    "",
    ""
  ]
}

Mapped/dynamic Checkbox Tree

{
  "pluginType": "CheckboxGroupWidget2",
  "heightType": "auto",
  "itemMode": "dynamic",
  "data": [
    {
      "value": "Option 1",
      "label": "",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "e29a9",
      "parentKey": ""
    },
    {
      "value": "Option 2",
      "label": "",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "64e3a",
      "parentKey": "e29a9"
    },
    {
      "value": "Option 3",
      "label": "",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "",
      "parentKey": "64e3a"
    }
  ],
  "values": [
    "Option 1",
    "Option 2",
    "Option 3"
  ],
  "value": [
    "Option 1",
    "Option 2"
  ],
  "selectedIndexes": [
    0,
    1
  ],
  "selectedItems": [
    {
      "value": "Option 1",
      "label": "Option 1",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "e29a9",
      "parentKey": ""
    },
    {
      "value": "Option 2",
      "label": "Option 2",
      "caption": "",
      "tooltip": "",
      "hidden": false,
      "disabled": false,
      "key": "64e3a",
      "parentKey": "e29a9"
    }
  ],
  "parentKeyByIndex": [
    "",
    "",
    ""
  ],
  "delimiter": "-",
  "groupLayout": "multiColumn",
  "hidden": false,
  "customValidation": "",
  "maxCount": null,
  "margin": "4px 8px",
  "_desktopMargin": "4px 8px",
  "hideValidationMessage": false,
  "checkedPathArray": [
    [
      "Option 1"
    ],
    [
      "Option 2"
    ]
  ],
  "_validate": true,
  "required": false,
  "disabled": false,
  "minCount": null,
  "validationMessage": "",
  "showInEditor": false,
  "_mobileMargin": "4px 8px",
  "tooltipText": "",
  "labelAlign": "left",
  "id": "connectorsConfigTree",
  "formDataKey": "connectorsConfigTree",
  "hiddenByIndex": [
    false,
    false,
    false
  ],
  "labelCaption": "",
  "labelWidth": 33,
  "deprecatedLabels": [],
  "label": "",
  "_hasMigratedNestedItems": true,
  "captionByIndex": [
    "",
    "",
    ""
  ],
  "checkedPathStrings": [
    "Option 1",
    "Option 2"
  ],
  "leafPathArray": [
    [
      "Option 1"
    ],
    [
      "Option 2"
    ]
  ],
  "labelWidthUnit": "%",
  "invalid": false,
  "tooltipByIndex": [
    "",
    "",
    ""
  ],
  "labels": [
    "",
    "",
    ""
  ],
  "selectedLabels": [
    "Option 1",
    "Option 2"
  ],
  "overflowType": "scroll",
  "keyByIndex": [
    "",
    "",
    ""
  ],
  "labelPosition": "top",
  "labelWrap": false,
  "minColumnWidth": 0,
  "disabledValues": [],
  "checkStrictly": false,
  "leafPathStrings": [
    "Option 1",
    "Option 2"
  ],
  "disabledByIndex": [
    false,
    false,
    false
  ],
  "maintainSpaceWhenHidden": false,
  "_disabledByIndex": [
    false,
    false,
    false
  ],
  "_values": [
    "Option 1",
    "Option 2",
    "Option 3"
  ],
  "_ids": [
    "2cc52",
    "f0bfc",
    "2c1f7"
  ],
  "_captionByIndex": [
    "",
    "",
    ""
  ],
  "_hiddenByIndex": [
    false,
    false,
    false
  ],
  "_keyByIndex": [
    "e29a9",
    "64e3a",
    ""
  ],
  "_labels": [
    "",
    "",
    ""
  ],
  "_parentKeyByIndex": [
    "",
    "e29a9",
    "64e3a"
  ],
  "_tooltipByIndex": [
    "",
    "",
    ""
  ]
}
2

Nevermind, i figured it out. The JSON needs to be flat, each item with references to other items such that Parent Label expression can find generate the parent labels based on the reference on each item. Only issue is that the Parent Label adds the child to multiple nodes that have the same Label! So if i try to build something structured like this:

services:
  system1:
    tables:
      - foo1.bar1
      - foo1.bar2
  system2:
    tables:
      - foo2.bar1
      - foo2.bar2

The the 4 tables mentioned get added as children of BOTH "tables" labeled nodes!

1 Like
3

Just to add, it does not matter if they key of each item is unique and the Parent Label is coded as: {{ self.data.find(n => n.key === item.parentKey).label }}

1 Like