How to manage dynamic fields on Whatsapp flow JSON

Question

{
      "id": "SCREEN_ONE",
      "terminal": true,
      "title": "Choose product",
      "data": {
        "init_values" : {
          "type": "object",
          "__example__": {
            "selectproducts": []
          }
        }
      },
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "form",
            "init-values": {
              "SelectProducts": "${data.init_values.selectproducts}"
            },
            "children": [
              {
                "type": "TextHeading",
                "text": "Choose the product you would like to buy"
              },
              {
                "type": "CheckboxGroup",
                "label": "Choose all that apply:",
                "required": true,
                "name": "SelectProducts",
                "data-source": [
                  {
                    "id": "553",
                    "title": "1pc Combo",
                    "metadata": "$650"
                  },
                  {
                      "id": "545",
                      "title": "2 PC COMBO",
                      "metadata": "$990"
                  }
                ],
                "on-select-action": {
                  "name": "data_exchange",
                  "payload": {
                      "products": "${form.SelectProducts}",
                      "component_action":"product_selection"
                  }
                }
              },
              {
                "type": "Footer",
                "label": "Continue",
                "on-click-action": {
                  "name": "data_exchange",
                  "payload": {
                    "products": "${form.SelectProducts}",
                    "component_action":"product_submission"
                  }
                }
              }
            ]
          }
        ]
      }
    }

I need to handle when a user selects any product then show related information and the user can choose or select. Like I have 10 products in the data array. If the user chooses to order 5 products. On the next page, I need to show those 5 products and some relevant attributes for each product.

{
      "id": "SCREEN_TWO",
      "title": "Customize your order",
      "terminal": true,
      "refresh_on_back": true,
      "data": {
        "choose_type": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "id": {
                "type": "string"
              },
              "title": {
                "type": "string"
              }
            }
          },
          "__example__": [
            {
              "id": "Rib & Leg",
              "title": "Rib & Leg"
            }
          ]
        },
        "select_flavour": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "id": {
                "type": "string"
              },
              "title": {
                "type": "string"
              }
            }
          },
          "__example__": [
            {
              "id": "Homestyle",
              "title": "Homestyle"
            }
          ]
        },
        "select_drink_flavour": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "id": {
                "type": "string"
              },
              "title": {
                "type": "string"
              }
            }
          },
          "__example__": [
            {
              "id": "Coke",
              "title": "Coke"
            }
          ]
        },
        "products" : {
          "type": "array",
          "items": {
              "type": "object",
              "properties": {
                  "id": {
                      "type": "string"
                  },
                  "title": {
                      "type": "string"
                  },
                  "metadata": {
                      "type": "string"
                  }
              }
          },
          "__example__": [
              {
                  "id": "553",
                  "title": "Test",
                  "metadata": "$650"
              }
          ]
        },
        "product553_is_visible": {
          "type": "boolean",
          "__example__": false
        },
        "product545_is_visible": {
          "type": "boolean",
          "__example__": false
        }
      },
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "form",
            "children": [
              {
                "type": "TextHeading",
                "text": "Order Customization"
              },
              {
                "type": "TextSubheading",
                "text": "Name : 1 PC COMBO",
                "visible": "${data.product553_is_visible}"
              },
              {
                "type": "TextBody",
                "text": "Choose Option",
                "visible": "${data.product553_is_visible}"
              },
              {
                "type": "RadioButtonsGroup",
                "name": "choose_type",
                "data-source": "${data.choose_type}",
                "required": "${data.product553_is_visible}",
                "visible": "${data.product553_is_visible}"
              },
              {
                "type": "TextBody",
                "text": "Select Flavour",
                "visible": "${data.product553_is_visible}"
              },
              {
                "type": "RadioButtonsGroup",
                "name": "select_flavour",
                "data-source": "${data.select_flavour}",
                "visible": "${data.product553_is_visible}",
                "required": "${data.product553_is_visible}"
              },
              {
                "type": "TextBody",
                "text": "Select Drink Flavour",
                "visible": "${data.product553_is_visible}"
              },
              {
                "type": "RadioButtonsGroup",
                "name": "select_drink_flavour",
                "data-source": "${data.select_drink_flavour}",
                "visible": "${data.product553_is_visible}",
                "required": "${data.product553_is_visible}"
              },


              {
                "type": "TextSubheading",
                "text": "Name : 2 PC COMBO",
                "visible": "${data.product545_is_visible}"
              },
              {
                "type": "TextBody",
                "text": "Choose Option",
                "visible": "${data.product545_is_visible}"
              },
              {
                "type": "RadioButtonsGroup",
                "name": "choose_type_2",
                "data-source": "${data.choose_type}",
                "required": "${data.product545_is_visible}",
                "visible": "${data.product545_is_visible}"
              },
              {
                "type": "TextBody",
                "text": "Select Flavour",
                "visible": "${data.product545_is_visible}"
              },
              {
                "type": "RadioButtonsGroup",
                "name": "select_flavour_2",
                "data-source": "${data.select_flavour}",
                "visible": "${data.product545_is_visible}",
                "required": "${data.product545_is_visible}"
              },
              {
                "type": "TextBody",
                "text": "Select Drink Flavour",
                "visible": "${data.product545_is_visible}"
              },
              {
                "type": "RadioButtonsGroup",
                "name": "select_drink_flavour_2",
                "data-source": "${data.select_drink_flavour}",
                "visible": "${data.product545_is_visible}",
                "required": "${data.product545_is_visible}"
              },

              {
                "type": "Footer",
                "label": "Continue",
                "on-click-action": {
                  "name": "data_exchange",
                  "payload": {
                    "component_action":"customization_submission",
                    "choose_type": "${form.choose_type}",
                    "select_flavour": "${form.select_flavour}",
                    "select_drink_flavour": "${form.select_drink_flavour}",
                    "choose_type_2": "${form.choose_type_2}",
                    "select_flavour_2": "${form.select_flavour_2}",
                    "select_drink_flavour_2": "${form.select_drink_flavour_2}",
                    "products": "${data.products}"
                  }
                }
              }
            ]
          }
        ]
      }
    }

currently, in screen 2 I handle data manually but I want to do it dynamically. How can I do that?

I can't find anything

Answer 1

There is currently no way to have a proper "for loop" in Flow JSON. However, you can do one of two:

1. Decide on a limit of how many products you allow to be selected (anyway it won't be good UX to show 100 product details on a single screen). Then, let's say you allow up to 5 products, you will have product1, product2, product3 etc. as the input for screen 2. You will then need to copy the same component structure 5 times. And your endpoint will provide the 5 products (some of them can be "null"). So then for example if the user selects the products of "Ball" and "Table", the endpoint will set product1 to be "Ball" and product2 to be "Table" and product3 to have "visibility=false". So the names of the products will also be dynamic.
2. Alternatively, you can change the UX to something which I think it more common and will probably provide a better experience, which is: Whenever the user selects a single product, they can customize just that one, and only then it is added to the cart. So basically they can add one product at a time to the cart, then they are redirected to the screen for customizing the details of this product (and the endpoint provides the inputs for this screen based on the chosen product -- no need to copy the same layout 5 times, and I think it is simpler for a user because users do not like to scroll as much). Then after customizing the details, the user is redirected back to the product selection screen to choose one more product or they can say that they are done.