Repeating Flow Forms with Default Values in WhatsApp Based on API Responses
1

Hello Developers Community, I am working on a WhatsApp flow where I need to repeat a form multiple times.

Questions 1. Form Repetition: Is it possible to repeat flow forms in WhatsApp? Is there a built-in way to repeat the form in the WhatsApp flow? If so, how can I implement this?

Use Case I have a form to collect traveler details as shown below: * Passenger Name (text input) * Nationality (dropdown) * Relation (dropdown) * Date of Birth (date picker) * Gender (dropdown) * Passport No (text input)

The form needs to be repeated for multiple travelers.

Anoud
Asked about 3 months ago
Selected Answer
1

Here are a few ways to achieve this, ordered by level of complexity to build. Note that there are probably other creative solutions as well.

  1. Send multiple Flow messages. The downside obviously is needing to open/close multiple forms, and additional back-and-forth i the chat.

  2. Publish multiple Flows, one each for a different number of passengers. In each Flow duplicate the screens as many times as needed. Send the one you need in each case. The downside is the need to maintain multiple Flows.

  3. Leverage the "if" logical component, which was introduced earlier this month in the latest Flow JSON v4.0 release a. For example, add components for the first traveler, then use an "if" to potentially display components for other travellers if needed. Example:

    {
    "type": "If",
    "condition": "(${data.num_travelers} > 1)",
    "then": [
    {
      "type": "TextHeading",
       "text": "Traveller 2"
    }
    ]
    },
    {
    "type": "If",
    "condition": "(${data.num_travelers} > 1)",
    "then": [
    {
      "type": "TextInput",
      "name": "traveller_2_name",
       "label": "Passenger Name"
    }
    ]
    }
    ...
    

    b. There are a couple of downsides to this approach: 1) it will potentially result in many components on a single screen, which is not ideal; 2) you will be restricted to roughly 6-7 passengers, as the limit for number of components in a single screen is 50)

4). Add an Endpoint to your Flow. This will allow you to control navigation between screens data_exchange actions. You have two options here: * Create a Flow with multiple identical screens (i.e. one for each possible passenger), and use your Endpoint to determine when to finish the Flow (i.e. depending on how many Passengers there are). * Create a Flow with a single screen for passenger input. Use your Endpoint to redirect users to the same screen for additional passengers and make sure to clear the inputs (using init-values) each time. The downside of this approach is you'll lose the screen transition animation, as well as the ability for users to conveniently leverage the "back" navigation.

June 26 at 3:41 AM
Bar