Can a flow have conditional terminal screens
1

Is there any way to define a conditional terminal screen logic. Please refer to below use-case for more information

Use Case:

I have a screen where user will be give a radioButton input field Yes/No. If the form value is Yes continue to next screen. In case of No terminate the flow.

Example Flow JSON:

{
  "version": "4.0",
  "routing_model": {
    "ADDRESS_CHANGE_SCREEN": [
      "CONFIRMATION_SCREEN"
    ]
  },
  "screens": [
    {
      "id": "ADDRESS_CHANGE_SCREEN",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "reschedule_form",
            "children": [
              {
                "type": "RadioButtonsGroup",
                "name": "address_change_option",
                "label": "Update Address",
                "required": true,
                "data-source": [
                  {
                    "id": "yes",
                    "title": "Yes",
                    "description": "I want to update address"
                  },
                  {
                    "id": "no",
                    "title": "No"
                  }
                ]
              },
              {
                "type": "If",
                "condition": "${form.address_change_option} == 'yes'",
                "then": [
                  {
                    "type": "TextInput",
                    "input-type": "text",
                    "label": "Floor,apt etc.,",
                    "name": "additional"
                  },
                  {
                    "type": "TextArea",
                    "name": "street_address",
                    "label": "street Address",
                    "required": true
                  },
                  {
                    "type": "TextInput",
                    "input-type": "text",
                    "label": "Nearby Landmark",
                    "name": "landmark"
                  },
                  {
                    "type": "TextInput",
                    "input-type": "text",
                    "label": "City",
                    "name": "city",
                    "required": true
                  },
                  {
                    "type": "TextInput",
                    "input-type": "text",
                    "label": "State",
                    "name": "state",
                    "required": true
                  },
                  {
                    "type": "TextInput",
                    "input-type": "number",
                    "label": "Pin Code",
                    "name": "pincode",
                    "required": true
                  },
                  {
                    "type": "Footer",
                    "label": "Submit",
                    "on-click-action": {
                      "name": "navigate",
                      "next": {
                        "type": "screen",
                        "name": "CONFIRMATION_SCREEN"
                      },
                      "payload": {
                        "address_change_option": "${form.address_change_option}",
                        "absolute_data_picker_input": "${data.absolute_data_picker_input}",
                        "time": "${data.time}",
                        "street_address": "${form.street_address}",
                        "floor_apt": "${form.additional}",
                        "landmark": "${form.landmark}",
                        "city": "${form.city}",
                        "state": "${form.state}",
                        "pincode": "${form.pincode}"
                      }
                    }
                  }
                ],
                "else": [
                  {
                    "type": "Footer",
                    "label": "Submit",
                    "on-click-action": {
                      "name": "complete",
                      "payload": {
                        "address_change_option": "${form.address_change_option}",
                        "absolute_data_picker_input": "${data.absolute_data_picker_input}",
                        "time": "${data.time}"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      "title": "Update Address",
      "terminal": true,
      "success": true,
      "data": {
        "absolute_data_picker_input": {
          "type": "string",
          "__example__": "11111111"
        },
        "time": {
          "type": "string",
          "__example__": "1111"
        }
      }
    }
  ]
}
Sai
Asked about 6 months ago
Sai

With the above JSON if I try to run the flow Meta is throwing error from graphql.

Please find the response below

{
    "data": { "xfb_wa_flows_validate_flow_json": [] },
    "errors": [
        {
            "message": "A server error field_exception occured. Check server logs for details.",
            "severity": "CRITICAL",
            "mids": ["xxxxxxxxxxxxxxxxxxxxx"],
            "code": [...],
            "api_error_code": null,
            "summary": "Something went wrong",
            "description": "Something went wrong. Please try again.",
            "description_raw": "Something went wrong. Please try again.",
            "is_silent": false,
            "is_transient": false,
            "is_not_critical": false,
            "requires_reauth": false,
            "allow_user_retry": false,
            "debug_info": null,
            "query_path": null,
            "fbtrace_id": "xxxxxxxxx",
            "www_request_id": "xxxxxxxxxxxxxxxxxxxx",
            "path": ["xfb_wa_flows_validate_flow_json"]
        }
    ],
    "extensions": { "is_final": true }
}
June 19 at 11:52 PM
Selected Answer
1

It is not possible to build conditional navigation within your Flow JSON. The "If" and "Switch" operators currently only support conditional rendering of components within a screen.

The only way to achieve conditional navigation is to add an Endpoint to your Flow, and then use a data_exchange action on the Footer of the screen, which will trigger a data_exchange request to your Endpoint. You can then define the next screen via your data_exchange response.

This does add complexity, as you will need to maintain a server to support the Flow.

Checkout this guide on how to set up an Endpoint: https://developers.facebook.com/docs/whatsapp/flows/guides/implementingyourflowendpoint

And here is an example of how to build a Flow using an Endpoint: https://developers.facebook.com/blog/post/2024/02/27/appointments-with-whatsapp-flows/

June 20 at 4:02 AM
Bar