Update 07. Interactive Messages.md (#262)

docs/3. Product Features/07. Interactive Messages.md

@@ -198,6 +198,68 @@ ___
 
 ![image](https://user-images.githubusercontent.com/32592458/219548906-a675eab0-67d2-427a-98bc-838fb800b415.png)
 
+## Dynamic Vaiables in Interactive Messages using G-Sheets
+
+Guide to Dynamically Populating Interactive Messages in Glific Using Google Sheets
+
+This guide explains how to dynamically populate interactive messages in Glific using Google Sheets. This method is particularly useful when handling nested options (e.g., District → Blocks → Schools) or when the number of options exceeds the supported limit, requiring a "More" option to paginate through the list.
+
+**Step 1:** Set Up Your Google Sheet (as depicted in the images below)
+
+<img width="925" alt="F4" src="https://github.com/user-attachments/assets/ceaf3098-eb0c-40f7-b1cb-f937a4c89da2" />
+<img width="918" alt="F5" src="https://github.com/user-attachments/assets/775634b7-dcdd-47ee-a229-7c03cc090e1c" />
+<img width="925" alt="F6" src="https://github.com/user-attachments/assets/2268f0e7-321c-45b4-a584-47e46ddc4b14" />
+
+Organize data across multiple sheets. Refer: [Sample Sheet](https://docs.google.com/spreadsheets/d/113zX2CM_O93rbI2m-NptI9BzhGbswg7DZVbUlcECDpQ/edit?gid=0#gid=0)
+Each column should represent a different option.
+Each sheet should correspond to a specific selection level. (e.g., District, Block, School)
+The options from the first sheet should serve as keys for fetching corresponding rows in subsequent sheets.
+Add a column eg: "Column 10" in "district" sheet, to manage pagination when listing options exceeds the interactive message limit.
+
+**Step 2:** Integrate Google Sheet with Glific
+Connect the Google Sheet to Glific. Refer: [Using G-Sheet](https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Actions/Link%20Google%20Sheets/)
+
+**Step 3:** Create Interactive Messages with List Options (as depicted in the image)
+Use interactive messages to present options dynamically fetched from the sheet.
+
+<img width="187" alt="F12" src="https://github.com/user-attachments/assets/67c6febd-c3b7-40c0-9bd0-933d77ceb721" />
+
+**Step 4:** Create a Flow & Initialize the Counter (as shown in the image)
+Initialize the counter value to 1.
+Fetch data from the Google Sheet and store it in variables. Refer [Sample Flow](https://prod.glific.com/flow/configure/33f97514-146f-4f87-a4cf-01803ec3c4d8) with keyword: sampledyn
+l)
+
+<img width="842" alt="F2" src="https://github.com/user-attachments/assets/1106d5d8-bf0e-4951-b2a3-3f67ec7b0469" />
+
+<img width="364" alt="F14" src="https://github.com/user-attachments/assets/04b3c994-1e86-4887-87fe-9e8e00b40619" />
+
+**Step 5:** Configure the Interactive Message with Dynamic Fields
+Enable the checkbox for "Use dynamic fields" in the interactive message setup.
+Map the list limit by setting a number or variable using sheets.column_name as shown in the image.
+
+<img width="365" alt="F13" src="https://github.com/user-attachments/assets/9355251e-a660-482b-8c92-82665eb5bf18" />
+
+**Step 6:** Initialize IDs & Variables
+Assign values from each column of the Google Sheet to corresponding variables in Glific (as depicted in the above image).
+
+**Step 7:** Handle User Selection & Pagination (Refer Output section below for more understanding)
+User selects an option from the interactive message:
+If a regular option is selected, the flow moves ahead.
+If the selected option is a key in the next sheet, it fetches the next level of options dynamically.
+Handling the "More" option for large lists:
+If the user selects "More", the counter is updated.
+The updated counter fetches the next batch of options, excluding previously displayed items.
+This bypasses the 10-item limit in Glific’s list and allows users to view all options.
+Keep repeating the steps for all the sheets. 
+
+**Output:**
+
+<img width="630" alt="F8" src="https://github.com/user-attachments/assets/d61aa678-d7f5-4dde-aef0-4216af0fa8cb" />
+<img width="629" alt="F9" src="https://github.com/user-attachments/assets/2b56bf5e-e7bc-4dad-9bd1-e833ecac7c02" />
+<img width="625" alt="F10" src="https://github.com/user-attachments/assets/f8dbe71d-e01f-4d85-b9b3-53a79952aad9" />
+<img width="626" alt="F11" src="https://github.com/user-attachments/assets/c2d4dcb6-330f-4deb-bac9-958df4c3c601" />
+
+