WhatsApp Flow Endpoint: Error with RadioButtonsGroup missing 'data-source' on screen navigation

Question

I’m trying to use WhatsApp Flows with an Endpoint.

I’m generating a JSON in the Flow Manager, and the screens display correctly in the preview view.

My issue arises in the interactive view.

This setup is for support purposes, so each screen has options and input fields.

The first screen has three options, and when I select one, the result is sent to the webhook.

Here’s where I encounter the problem: the response I'm sending doesn’t seem to be correct.

I already have the private and public keys set up, sent them to the Graph API, and I’m able to decrypt and encrypt messages successfully.

Here’s the request (sent by WhatsApp to the webhook when I select an option and click Next):

{
  "version": "3.0",
  "action": "data_exchange",
  "data": {
    "product_selection": "ini_opc_1"
  },
  "flowToken": "flows-builder-5aeaa687"
}

The webhook response:

{
  "screen": "screen_2",
  "data": {
    "extension_message_response": {
      "params": {
        "flow_token": "flows-builder-5aeaa687"
      }
    }
  }
}

The error:

RadioButtonsGroup 'product_selection' is missing required property "data-source".

My question is: why is it asking for products if screen_2 already exists?

In other words, I just want to instruct WhatsApp on which screen to navigate to.

Here’s the JSON for the first two screens.

{
   "version": "5.1",
    "data_api_version": "3.0",
    "routing_model": {
        "screen_1": [
            "screen_2"
        ],
        "screen_2": [
            "..."
        ]
    },
    "screens": [
        {
            "id": "screen_1",
            "title": "This is the screen 1",
            "data": {
                "products": {
                    "type": "array",
                    "items": {
                        "type": "object",
                        "properties": {
                            "id": {
                                "type": "string"
                            },
                            "title": {
                                "type": "string"
                            }
                        }
                    },
                    "__example__": [
                        {
                            "id": "ini_opc_1",
                            "title": "Opt 1"
                        },
                        {
                            "id": "ini_opc_2",
                            "title": "Opt 2"
                        },
                        {
                            "id": "ini_opc_3",
                            "title": "Opt 3"
                        }
                    ]
                }
            },
            "layout": {
                "type": "SingleColumnLayout",
                "children": [
                    {
                        "type": "Form",
                        "name": "selector_form",
                        "children": [
                            {
                                "type": "RadioButtonsGroup",
                                "label": "Some welcome msg",
                                "name": "product_selection",
                                "data-source": "${data.products}",
                                "required": true
                            },
                            {
                                "type": "Footer",
                                "label": "Continuar",
                                "on-click-action": {
                                    "name": "data_exchange",
                                    "payload": {
                                        "product_selection": "${form.product_selection}"
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        },
        {
            "id": "screen_2",
            "title": "This is the screen 2",
            "data": {
                "products": {
                    "type": "array",
                    "items": {
                        "type": "object",
                        "properties": {
                            "id": {
                                "type": "string"
                            },
                            "title": {
                                "type": "string"
                            }
                        }
                    },
                    "__example__": [
                        {
                            "id": "susc_opc_1",
                            "title": "Some opt 1"
                        },
                        {
                            "id": "susc_opc_2",
                            "title": "Some opt 2"
                        },
                        {
                            "id": "susc_opc_3",
                            "title": "Some opt 3"
                        }
                    ]
                }
            },
            "layout": {
                "type": "SingleColumnLayout",
                "children": [
                    {
                        "type": "Form",
                        "name": "selector_form",
                        "children": [
                            {
                                "type": "RadioButtonsGroup",
                                "label": "Screen 2 msg",
                                "name": "product_selection",
                                "data-source": "${data.products}",
                                "required": true
                            },
                            {
                                "type": "Footer",
                                "label": "Continuar",
                                "on-click-action": {
                                    "name": "data_exchange",
                                    "payload": {
                                        "product_selection": "${form.product_selection}"
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        }
    ]
}

Answer 1

It seems your endpoint response is incorrect. If you are trying to navigate to screen_two, you need to return the screen name and dynamic data products needed for the radio button, like this

{
    "screen": "screen_two",
    "data": {
        "products": [
            {
                "id": "susc_opc_1",
                "title": "Some opt 1"
            },
            {
                "id": "susc_opc_2",
                "title": "Some opt 2"
            },
            {
                "id": "susc_opc_3",
                "title": "Some opt 3"
            }
        ]
    }
}

If you want to make the radio button option static (not returned from endpoint), then you can put the list under the data-source property in flow JSON, like below. You will also need to remove the data property under this screen as it's only used for dynamic data.

{
    "type": "RadioButtonsGroup",
    "label": "Screen 2 msg",
    "name": "product_selection",
    "data-source": [
        {
            "id": "susc_opc_1",
            "title": "Some opt 23"
        },
        {
            "id": "susc_opc_2",
            "title": "Some opt 2"
        },
        {
            "id": "susc_opc_3",
            "title": "Some opt 3"
        }
    ],
    "required": true
},

Finally, the "Endpoint" at the bottom of Flows Manager page provides example endpoint request and response under "Endpoint snippets" (right side of screenshot) to help with the setup.