WhatsApp Flow模板下拉框动态数据不生效问题排查与修复

我用模板创建了一个仅包含下拉框的WhatsApp Flows，用户需在下拉框中选择人员。使用Flow Builder生成的JSON时功能正常，但切换为动态数据后，预览界面仍显示模板创建时的静态值。以下是问题排查及修复方案：

原Flow Builder生成的静态JSON #

flow JSON

{
  "version": "3.1",
  "screens": [
    {
      "id": "QUESTION_ONE",
      "title": "Your form",
      "data": {},
      "terminal": true,
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "flow_path",
            "children": [
              {
                "type": "Dropdown",
                "label": "Person",
                "required": true,
                "name": "Dropdown_07042a",
                "data-source": [
                  {
                    "id": "0_Option_1",
                    "title": "Option 1"
                  },
                  {
                    "id": "1_Option_2",
                    "title": "Option 2"
                  }
                ]
              },
              {
                "type": "Footer",
                "label": "Continue",
                "on-click-action": {
                  "name": "complete",
                  "payload": {
                    "screen_0_Dropdown_0": "${form.Dropdown_07042a}"
                  }
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

修改后的动态数据请求JSON #

modified(dynamic value) JSON with API Request

{
  "messaging_product": "whatsapp",
  "recipient_type": "individual",
  "to": "{{Recipient-Phone-Number}}",
  "type": "template",
  "template": {
    "name": "dynamic_drop_down",
    "language": {
      "code": "en_US"
    },
    "components": [
      {
        "type": "button",
        "sub_type": "flow",
        "index": "0",
        "parameters": [
          {
            "type": "action",
            "action": {
              "flow_token": "FLOW_TOKEN",
              "flow_action_data": {
                "version": "3.1",
                "screens": [
                  {
                    "id": "QUESTION_ONE",
                    "title": "Your form",
                    "data": {
                      "all_burgers": {
                        "type": "array",
                        "items": {
                          "type": "object",
                          "properties": {
                            "id": {
                              "type": "string"
                            },
                            "title": {
                              "type": "string"
                            },
                            "description": {
                              "type": "string"
                            },
                            "metadata": {
                              "type": "string"
                            }
                          }
                        },
                        "__example__": [
                          {
                            "id": "1",
                            "title": "Beef burger",
                            "description": "Beef, red onion relish, lettuce",
                            "metadata": "$9.99"
                          },
                          {
                            "id": "2",
                            "title": "Chicken burger",
                            "description": "Grilled chicken breast, cheese, buffalo sause",
                            "metadata": "$10.99"
                          }
                        ]
                      }
                    },
                    "terminal": true,
                    "layout": {
                      "type": "SingleColumnLayout",
                      "children": [
                        {
                          "type": "Form",
                          "name": "flow_path",
                          "children": [
                            {
                              "type": "Dropdown",
                              "label": "Person",
                              "required": true,
                              "data-source": "${data.all_burgers}",
                              "on-select-action": {
                                "name": "data_exchange",
                                "payload": {
                                  "burger": "${form.burger}"
                                }
                              }
                            },
                            {
                              "type": "Footer",
                              "label": "Continue",
                              "on-click-action": {
                                "name": "complete",
                                "payload": {
                                  "screen_0_Dropdown_0": "${form.Dropdown_07042a}"
                                }
                              }
                            }
                          ]
                        }
                      ]
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

问题核心与修复方案 #

问题排查 #

1. 表单字段绑定缺失：动态版本中删除了下拉框的name属性（原静态JSON中为Dropdown_07042a），导致data-source的动态数据无法和表单字段关联，同时on-select-action里的${form.burger}没有对应字段。
2. 数据格式错误：使用了schema定义+__example__的格式，但动态数据需要直接传入真实数组，而非仅示例结构。
3. 逻辑不匹配：下拉框标签是"Person"，但动态数据定义的是汉堡列表，语义冲突；完成动作的字段引用${form.Dropdown_07042a}没有对应的表单字段支持。

修正后的动态JSON示例 #

{
  "messaging_product": "whatsapp",
  "recipient_type": "individual",
  "to": "{{Recipient-Phone-Number}}",
  "type": "template",
  "template": {
    "name": "dynamic_drop_down",
    "language": {
      "code": "en_US"
    },
    "components": [
      {
        "type": "button",
        "sub_type": "flow",
        "index": "0",
        "parameters": [
          {
            "type": "action",
            "action": {
              "flow_token": "FLOW_TOKEN",
              "flow_action_data": {
                "version": "3.1",
                "screens": [
                  {
                    "id": "QUESTION_ONE",
                    "title": "Your form",
                    "data": {
                      "person_list": [
                        {
                          "id": "1",
                          "title": "张三"
                        },
                        {
                          "id": "2",
                          "title": "李四"
                        },
                        {
                          "id": "3",
                          "title": "王五"
                        }
                      ]
                    },
                    "terminal": true,
                    "layout": {
                      "type": "SingleColumnLayout",
                      "children": [
                        {
                          "type": "Form",
                          "name": "flow_path",
                          "children": [
                            {
                              "type": "Dropdown",
                              "label": "Person",
                              "required": true,
                              "name": "Dropdown_07042a",
                              "data-source": "${data.person_list}"
                            },
                            {
                              "type": "Footer",
                              "label": "Continue",
                              "on-click-action": {
                                "name": "complete",
                                "payload": {
                                  "selected_person": "${form.Dropdown_07042a}"
                                }
                              }
                            }
                          ]
                        }
                      ]
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

关键修改说明 #

• 直接传入真实动态数据：在data中直接定义person_list数组，替换原有的schema+示例结构，这是用户实际看到的选项。
• 恢复下拉框name属性：保留原静态JSON中的Dropdown_07042a，确保表单字段与数据源绑定。
• 修正字段引用：完成动作的payload引用正确的表单字段${form.Dropdown_07042a}，保证提交时能获取选中的人员ID。
• 移除冗余动作：删除不必要的on-select-action，简化流程（若需实时交互可保留，但需确保字段匹配）。

内容的提问来源于stack exchange，提问作者Prasath S