How can I reset input fields in a WhatsApp Flow when reusing a form
In a WhatsApp Flow, I have multiple screens. One of the screens is for adding product information. After filling in the product details, the user moves to a summary screen and continues through two or three more screens. If they decide to add another product, they return to the product screen. However, when they revisit this screen, the inputs still contain the previous product's information. How can I reset the input fields so that they appear empty, just like the first time the user visits the screen?
Hi Quim,
It would be helpful, if you can share the flow id with us. This would help us understand the problem you are facing
From the limited information, it looks like you can take advantage of the refresh_on_back. This property is optional and only applicable for Flows with a Data Endpoint. Here's an example of how to use it:
"screen": {
"id": "product_screen",
"title": "Product Information",
"data": {
// your data schema here
}
}
In the screen definition where you want to trigger the refresh (in this case, the summary screen), add the refresh_on_back property and set it to true:
"screen": {
"id": "summary_screen",
"title": "Summary",
"refresh_on_back": true,
"data": {
// your data schema here
},
"layout": {
// your layout components here
}
}
By setting refresh_on_back to true, when the user navigates back from the summary screen to the product screen, the Flow will send a request to the Flow Data Endpoint and display the screen with the data from the response, effectively resetting the input fields.
Remember: The component you want to use should have init-value attached to a data binding object.
{
"type": "Form",
"name": "text_input_form",
"init-values": {
"text input": "${data.text_input}",
"text area": "${data.text_area}",
},
"children": [
{
"type": "TextInput",
"required": true,
"label": "Text Input",
"name": "text input"
},
{
"type": "TextArea",
"required": true,
"label": "Text Area",
"name": "text area"
},
{
"type": "Footer",
"label": "Continue",
"on-click-action": {
"name": "complete",
"payload": {}
}
}
]
}
The input
Let me know if you need more help here.
hi my flow ide is /980234624069929/ Regarding sharing my flow IDE, I would like to know if I should share it here directly or in a private way.
My problem is that I have a screen product where the customer enters the characteristics. Then, we move to a screen where we verify the customer's data. After that, we proceed to another screen where they choose whether to add another product or finish the flow.
If the customer wants to add another product, we go back two screens to the product details .However, when returning to this screen, the form appears pre-filled with the data from the first product.
I have tested my configuration with refresh_on_back: true, but it doesn’t clear the data. The form still appears with the previous information. I'm not sure if I need to configure this on my server or directly in the JSON metadata within the Flow Builder application.
thanks