WhatsApp / WhatsApp-Flows-Tools

Tools and examples to help you create WhatsApp Flows https://developers.facebook.com/docs/whatsapp/flows
MIT License
56 stars 25 forks source link

How to create dynamic fields on json based on my data. #1

Closed mahiuddin-dev closed 8 months ago

mahiuddin-dev commented 9 months ago

This is SCREEN_ONE

      {
        "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"
                    }
                  }
                }
              ]
            }
          ]
        }
      }

Here i put 2 products on CheckboxGroup. But i want to add more products here. I can pass product when API call. But my problem is next screen. In the first screen user can select 1 or more then one products. I'm creating this flow for a restaurant so my products list must be food. Now i want if user select any food like chicken next screen i want user can choose or select what part of chicken they need. For now i add this manual but i want to add this dynamic. Here is my SCREEN_TWO

      {
        "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
          },
          "quantity_init_value": {
            "type" : "object",
            "__example__": {
              "product553_init_value": "1",
              "product545_init_value": "1"
            }
          }
        },
        "layout": {
          "type": "SingleColumnLayout",
          "children": [
            {
              "type": "Form",
              "name": "form",
              "init-values": {
                "product553_quantity": "${data.quantity_init_value.product553_init_value}",
                "product545_quantity": "${data.quantity_init_value.product545_init_value}"
              },
              "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": "TextInput",
                  "label": "Number of quantity",
                  "input-type": "number",
                  "name": "product553_quantity",
                  "required": "${data.product553_is_visible}",
                  "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": "TextInput",
                  "label": "Number of quantity",
                  "input-type": "number",
                  "name": "product545_quantity",
                  "required": "${data.product545_is_visible}",
                  "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",
                      "product553_quantity": "${form.product553_quantity}",
                      "choose_type": "${form.choose_type}",
                      "select_flavour": "${form.select_flavour}",
                      "select_drink_flavour": "${form.select_drink_flavour}",
                      "product545_quantity": "${form.product545_quantity}",
                      "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}"
                    }
                  }
                }
              ]
            }
          ]
        }
      }
ankurmalik04 commented 9 months ago

I think this is duplicate of com

mahiuddin-dev commented 9 months ago

I think this is duplicate of com

yes i also ask same question on stackoverfollow

ankurmalik04 commented 9 months ago

Hi @mahiuddin-dev There is currently no way to have a proper "for loop" in Flow JSON.

I think the the stated link has the detailed answer for your question.