Generate Authorable FIelds in Loop Based on Chosen Amount of Columns

[jimiayler]

I'm trying to create a difficult (for me) module with authorable fields based on a author-chosen amount of columns. Getting the loop and fields.json syntax correct so that I will have a group that has gives an author the correct amount and kind of field options is proving challenging. 

Scenario: an author can choose a row to have two, three or four columns, each of which has an indicator <div>, header text and regular text. One chosen, the loop should make x amount of authorable elements of these three elements per column, with some indication for the author of which column is authoring which elements. Here's what I'm trying to accomplish in the loop, with an index being added to the indicator <div>'s ID based on the amount of loops generated: 

{% for column in module.columns %}-
<div class="col col-md-{{ module.columns }}">
<div id="indicatorContainer{{column.index}}"></div>
{{ module.testhead }}
{{ module.testtext }}
</div>
{% endfor %}

And my shot in the dark for the the elements should display as a group in fields.json:

{
	"id": "section.column",
	"type": "group",
	"name": "columns",
	"label": "How many columns should the cards be in? 2, 3, or 4?",
	"sortable": false,
	"required": false,
	"locked": false,
	"display": "select",
	"choices": [
		["6", "Two Columns"],
		["4", "Three Columns"],
		["3", "Four Columns"]
	],
	"default": "4",
	"occurrence": {
		"min": 1,
		"max": null,
		"sorting_label_field": "title",
		"default": 1
	},
	"children": [{
			"id": "column.circhead",
			"name": "circhead",
			"label": "Donut Title",
			"locked": false,
			"required": false,
			"type": "richtext",
			"validation_regex": "",
			"default": "<h3>Title Goes Here</h3>"
		},
		{
			"id": "column.circtext",
			"name": "circtext",
			"label": "Donut Text",
			"locked": false,
			"required": false,
			"type": "richtext",
			"validation_regex": "",
			"default": "<p>Plura mihi bona sunt, inclinet, amari petere vellent. At nos hinc posthac, sitientis piros afros quae vero auctorem tractata.</p>"
		}
	]
}

No dice — I greatly welcome any assistance to accomplish this task. Thanks in advance.

[alyssamwilie · Accepted solution]

Hi @jimiayler ,

For your json you'll actually want the Choice field outside of the group :

[
  {
    "name": "number_of_columns",
    "label": "How many columns should the cards be in? 2, 3, or 4?",
    "required": true,
    "locked": false,
    "type": "choice",
    "display": "select",
    "choices": [
      ["6", "Two Columns"],
      ["4", "Three Columns"],
      ["3", "Four Columns"]
    ],
    "default": "4"
  },
  {
    "name": "columns",
    "label": "Columns",
    "required": false,
    "locked": true,
    "tab": "CONTENT",
    "type": "group",
    "occurrence": {
      "min": 1,
      "max": null,
      "sorting_label_field": "title",
      "default": 1
    },
    "children": [
      {
        "id": "column.circhead",
        "name": "circhead",
        "label": "Donut Title",
        "locked": false,
        "required": false,
        "type": "richtext",
        "validation_regex": "",
        "default": "<h3>Title Goes Here</h3>"
      },
      {
        "id": "column.circtext",
        "name": "circtext",
        "label": "Donut Text",
        "locked": false,
        "required": false,
        "type": "richtext",
        "validation_regex": "",
        "default": "<p>Plura mihi bona sunt, inclinet, amari petere vellent. At nos hinc posthac, sitientis piros afros quae vero auctorem tractata.</p>"
      }
    ]
  }
]

Then continue to loop by module.columns but change the col-md- to use {{ module.number_of_columns }}, column.index should be loop.index, and I don't see a testhead or texttest in your json so I've switched them with your circhead and circtext.

{% for column in module.columns %}-
  <div class="col col-md-{{ module.number-of-columns }}">
  <div id="indicatorContainer{{ loop.index }}"></div>
    {{ column.circhead }}
    {{ column.circtext }}
  </div>
{% endfor %}

[jimiayler]

Excellent, this totally works -- thanks for your thorough reply.