- ชุมชน
- คำถาม
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"
}
}
}
]
}
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 }
}
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/
