How to define Input-Type Dynamically in WhatsApp Flow?

Question

See Below Example -

{ "type": "TextInput", "name": "textInput", "input-type": "${data.textInputType}", "label": "Your Name" }

I just want to define that input-type in data example, Thank you in Advance!

I have done complete research with facebook/whatsapp documentation and all, Yes Whatsapp flow supporting dynamic input-type but that example not mentioned in their documentation.

Answer 1

This is not currently supported, input-type cannot be dynamic. Can you explain your use case so maybe I can suggest an alternative?

Maybe you can have multiple TextInput components with different types and decide which one to show based on the visible property? Check the section "Step 5 - Control Visibility of the Component" in component docs

Here's a flow JSON sample with dynamic input-type, but which shows an error when you try it in the flows playground https://developers.facebook.com/docs/whatsapp/flows/playground

{
  "version": "2.1",
  "data_api_version": "3.0",
  "routing_model": {},
  "screens": [
    {
      "id": "DEMO_SCREEN",
      "title": "Demo Screen",
      "terminal": true,
      "data": {
        "input_type": {
          "type": "string",
          "__example__": "email"
        }
      },
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "text_input_form",
            "init-values": {
              "text input": "This is text input",
              "text area": "This is text area"
            },
            "children": [
              {
                "type": "TextInput",
                "required": true,
                "label": "${data.input_type}",
                "input-type": "${data.input_type}",
                "name": "text input"
              },
              {
                "type": "Footer",
                "label": "Continue",
                "on-click-action": {
                  "name": "complete",
                  "payload": {}
                }
              }
            ]
          }
        ]
      }
    }
  ]
}