Formulario con lista dinámica

Inicialmente, es importante que sepas que puedes configurar el Nodo Interactive List para crear una lista interactiva. Si bien, ambas soluciones cumplen el mismo propósito, varían en la estética del complemento y en la experiencia del usuario:

• El Nodo "Interactive List" muestra un menú desplegable.
• El formulario con lista dinámica presenta una lista numerada.

Aquí verás el flujo que te permitirá generar un formulario con una lista de selección dinámica aplicable a todos los canales, garantizando integración y funcionalidad óptimas, según el canal donde se implemente.

Descarga el flujo ejemplo en este link. 

Debajo encuentra los pasos clave y el rol de cada nodo en el proceso: 

1. Nodo Function: Set Initial Params 
   1. Objetivo: crear los objetos básicos necesarios para la lista dinámica. 
   2. Objetos: 
      1. msg.count: contador requerido para numerar las opciones de la lista. 
      2. msg.dynamicCallbackLabel: almacena el "callback_label" para canales asincrónicos. 
      3. msg.dynamicSelectOptions: almacena las opciones de la lista para canales síncronos. 
2. Nodo Function: Data Mockup - Users List 
   1. Objetivo: establecer un objeto (msg.data) que simule la respuesta de un endpoint. 
3. Nodo de Bucle: Users Loop 
   1.  Objetivo: iterar sobre msg.data que contiene la maqueta de datos, para procesar cada elemento de la lista dinámica. 
4. Nodo Function: Build The List
   1. Objetivo: construir dinámicamente la lista de selección basándonos en los datos. 
   2. Detalles de Configuración: 
      1. lineBreak: contiene el salto de línea para las opciones de canales asincrónicos. 
      2. getNumberEmoji: convierte números a emojis numéricos para experiencia visual y posterior selección. El contador es incremental. 
      3. msg.dynamicCallbackLabel y msg.dynamicSelectOptions: cada opción generada se guarda de manera dinámica en estos objetos.
5. Nodo Form
   1. Objetivo: establecer la estructura básica del formulario dentro del objeto complementos. 
6. Nodo Function: Set Form Options 
   1. Objetivo: reemplazar los parámetros estáticos "callback_label" y "options" por los objetos dinámicos configurados en el nodo "Build The List". 

Prueba del Flujo: ejecuta el Nodo Inject y observa el resultado en la consola de "debug". 

Implementación:

1. La configuración del nodo de función "Set Initial Params" no debe modificarse.
2. El nodo de función "Data mockup - User list" debe ser reemplazado por los datos obtenidos a través de un Request (nodo de http request).
3. Los datos obtenidos por el nodo http request estarán en el objeto "payload".
4. Estos datos deberán ser almacenados en un objeto diferente al "payload" (por ejemplo, msg.data), ya que dicho objeto será reemplazado en cada iteración del nodo Loop.
5. Dentro del nodo "Build The List", se almacenará, en cada iteración del bucle, la opción de forma dinámica (por ejemplo, msg.payload.name).
6. De esta forma, se crearán los objetos que contendrán los listados de selección (por ejemplo, msg.dynamicCallbackLabel y msg.dynamicSelectOptions).
7. Finalmente, estos objetos reemplazarán a los parámetros del formulario, respectivamente:
   1. msg.payload.complements[0].param[0].callback_label = msg.dynamicCallbackLabel
   2. msg.payload.complements[0].param[0].options = msg.dynamicSelectOptions