Dynamic list form

Initially, it is important for you to know that you can configure the Interactive List Node to create an interactive list. While both solutions serve the same purpose, they vary in the aesthetic and user experience of the complement:

• The "Interactive List" Node displays a drop-down menu.
• The dynamic list form displays a numbered list.

Here you will see the flow that will allow you to generate a form with a dynamic selection list applicable to all channels, ensuring optimal integration and functionality, depending on the channel where it is implemented.

Download the flow by clicking on this link.

Below, you will find the key steps and the role of each node in the process:

1. Function Node: Set Initial Parameters
   1. Goal: create the basic objects needed for the dynamic list. 
   2. Objects: 
      1. msg.count: Counter required to number the options in the list.
      2. msg.dynamicCallbackLabel: Stores the "callback_label" for asynchronous channels. 
      3. msg.dynamicSelectOptions: Stores the list of options for synchronous channels. 
2. Function Node: Data Mockup - Users List 
   1. Goal: Set an object (msg.data) that simulates the response of an endpoint.
3. Loop Node: Users Loop 
   1.  Goal: Iterate over msg.data containing the data mockup, to process each item in the dynamic list. 
4. Function Node: Build The List 
   1. Goal: Dynamically build the selection list based on the data.
   2. Configuration Details: 
      1. lineBreak: Contains the line break for asynchronous channel options.
      2. getNumberEmoji: Converts numbers to numeric emojis for visual experience and later selection. The counter is incremental.
      3.  msg.dynamicCallbackLabel and msg.dynamicSelectOptions: Each generated option is dynamically saved in these objects. 
5. Form Node
   1. Goal: Set the basic structure of the form within the complements object. 
6. Function Node: Set Form Options 
   1. Goal: Replace the static parameters "callback_label" and "options" with the dynamic objects configured in the "Build The List" node.

Testing the Flow: run the Inject Node and observe the result in the "debug" console.

Real Implementation:

1. The configuration of the "Set Initial Params" function node must not be modified.
2. The "Data mockup - User list" function node must be replaced by the data obtained through a Request (http request node).
3. The data obtained by the http request node will be in the "payload" object.
4. This data must be stored in a different object than the "payload" (for example, msg.data), since this object will be replaced in each iteration of the Loop node. 
5. Within the "Build The List" node, the option will be stored dynamically in each iteration of the loop (for example, msg.payload.name). 
6. In this way, the objects that will contain the selection lists will be created (for example, msg.dynamicCallbackLabel and msg.dynamicSelectOptions).
7. Finally, these objects will replace the form parameters, respectively: 
   1. msg.payload.complements[0].param[0].callback_label = msg.dynamicCallbackLabel
   2. msg.payload.complements[0].param[0].options = msg.dynamicSelectOptions