I’m trying to use WhatsApp Flows to show users multiple options (for example: countries), and based on their selection, I want to give them a new set of options to select from (for example: cities).
I found a very similar case in a sample code provided by meta link - Search for "update_data action"
I have used the same code without changes, and it did not return any error under the WhatsApp Manager, but once I tested the flow and sent it to my number, I got the error message:
The sample code that I have used:
"version": "6.0",
"screens": [
{
"id": "ADDRESS_SELECTION",
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "RadioButtonsGroup",
"name": "select_country",
"label": "Select country:",
"data-source": "${data.countries}"
},
{
"type": "RadioButtonsGroup",
"name": "select_states",
"label": "Select state:",
"visible": "${data.state_visibility}",
"data-source": "${data.states}"
},
{
"type": "Footer",
"label": "Complete",
"on-click-action": {
"name": "complete",
"payload": {}
}
}
]
},
"title": "Address selection",
"terminal": true,
"success": true,
"data": {
"countries": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"title": {
"type": "string"
}
}
},
"__example__": [
{
"id": "1",
"title": "USA",
"on-select-action": {
"name": "update_data",
"payload": {
"states": [
{
"id": "new_york",
"title": "New York",
"on-unselect-action": {
"name": "update_data",
"payload": {
"pincode_visibility": false
}
},
"on-select-action": {
"name": "update_data",
"payload": {
"pincode": [
{
"id": "10001",
"title": "10001"
},
{
"id": "10005",
"title": "10005"
}
]
}
}
},
{
"id": "california",
"title": "California",
"on-unselect-action": {
"name": "update_data",
"payload": {
}
},
"on-select-action": {
"name": "update_data",
"payload": {
"pincode": [
{
"id": "90019",
"title": "90019"
},
{
"id": "93504",
"title": "93504"
}
]
}
}
}
],
"state_visibility": true
}
},
"on-unselect-action": {
"name": "update_data",
"payload": {
"state_visibility": false
}
}
},
{
"id": "2",
"title": "Canada",
"on-select-action": {
"name": "update_data",
"payload": {
"states": [
{
"id": "ontario",
"title": "Ontario",
"on-unselect-action": {
"name": "update_data",
"payload": {
}
},
"on-select-action": {
"name": "update_data",
"payload": {
"pincode": [
{
"id": "L4K",
"title": "L4K"
},
{
"id": "M3C",
"title": "M3C"
}
]
}
}
},
{
"id": "quebec",
"title": "Quebec",
"on-unselect-action": {
"name": "update_data",
"payload": {
"pincode_visibility": false
}
},
"on-select-action": {
"name": "update_data",
"payload": {
"pincode": [
{
"id": "M6B2A9",
"title": "M6B2A9"
},
{
"id": "M5V",
"title": "M5V"
}
]
}
}
}
],
"state_visibility": true
}
},
"on-unselect-action": {
"name": "update_data",
"payload": {
"state_visibility": false
}
}
}
]
},
"states": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"title": {
"type": "string"
}
}
},
"__example__": []
},
"state_visibility": {
"type": "boolean",
"__example__": false
}
}
}
]
}```
Any suggestion to solve this issue?
I tried to add the "data-source" in multiple ways but none of them worked:
"data-source": "${data.countries}"
"data-source": "${countries}"
"data-source": "${screens.data.countries}"
"data-source": "countries"
That screen expects data to be passed to it. That data must be sent as part of the message in this case, inside flow_action_payload. See https://developers.facebook.com/docs/whatsapp/flows/guides/sendingaflow
It'll be something like:
...
flow_action_payload: {
screen: 'ADDRESS_SELECTION',
data: { countries: <the content of the __example__ field for countries>, ... }
}