Dynamically populate a choice list form field
When creating a choice list form field, the options in the list can be populated dynamically with markup.
Form data keys
In the simplest case, you can simply reference form data keys directly. For example, if the keys color1
, color2
, and color3
are set to "Red", "Blue", and "Green", then the options can be set to the following:
{{color1}}
{{color2}}
{{color3}}
They will then display to the user as "Red", "Blue", and "Green".
Iterator
In some cases, you may not know exactly how many values are available ahead of time. In these cases, you can use iterators.
For example, suppose you want to allow users to view information about recent ordered items. You've collected their email address or other account identifier and then used an Actions node to retrieve information about their recent orders which is now stored as a JSON object under the form data key recent-orders
. The data looks something like this:
[
{
"id": 12064,
"name": "Fulfillment order",
"date": "2022-02-01",
"items": [
{ "id": 34221, "name": "Item 1" },
{ "id": 34222, "name": "Item 2" }
]
},
{
"id": 12025,
"name": "Fulfillment order",
"date": "2022-01-01",
"items": [
{ "id": 34201, "name": "Item 3" }
]
}
]
You could then write the following markup to reference each item from each order:
{{#each $order in recent-orders}}
{{#each $item in $order["items"]}}
{{$item["id"]}}[{{$item["name"]}}]
{{#end}}
{{#end}}
With the above value, this would evaluate to the following list of options:
34221[Item 1]
34222[Item 2]
34201[Item 3]
These would then be displayed to the user as "Item 1", "Item 2", or "Item 3", but the value stored by the choice list would be "34221", "34222", or "34201" respectively.