whatsapp-cloud-apiwhatsapp-flows

How to input dynamic value in whatsapp flow json?


I am trying to input dynamic value in whatsapp flow using json and gettin the following error.

{
  "version": "3.1",
  "screens": [
    {
      "id": "",
      "title": "Address",
      "data": {},
      "terminal": true,
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "flow_path",
            "children": [
              {
                "type": "TextInput",
                "name": "TextInput_23f9a3",
                "label": "Enter House Address",
                "required": true,
                "input-type": "text",
                "helper-text": "Please enter your house number, floor number and building number."
              },
              {
                "type": "TextBody",
                "text": "${data.area}",
                "visible": true
              },
              {
                "type": "TextBody",
                "text": "${data.pincode}",
                "visible": true
              },
              
              {
                "type": "Footer",
                "label": "Save Address",
                "on-click-action": {
                  "name": "complete",
                  "payload": {
                    "screen_0_TextInput_0": "${form.TextInput_23f9a3}"
                  }
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Error:

Missing dynamic data "${data.area}" in the data model for screen: screen_adtrrz, TextBody property: text.

Screenshot: Error Screenshot

I tried implementing the static flow and it worked fine but the dynamic flow is giving an error.


Solution

  • The issue is that data.area is not present. The area needs to come from a previous screen. Below is the example for this to help understand this

    For Screen 1: You have a form with two inputs "children": [ { "type": "TextInput", "required": true, "label": "First name", "name": "first_name" }, { "type": "TextInput", "required": true, "label": "Last name", "name": "Last_Name" } and the CTA is follows { "type": "Footer", "label": "Continue", "on-click-action": { "name": "navigate", "next": { "type": "screen", "name": "CONFIRMATION" }, "payload": { "name": "${form.first_name}", "second_name": "${form.Last_Name}" } } } Screen 2: "data": { "first_name": { "type": "string", "__example__": "Parth" }, "Last_Name": { "type": "string", "__example__": "Chawla" } } And now you can use this { "type": "TextBody", "text": "${data.first_name}" }