- Comunidad
- Pregunta
Is it possible for a flow to have dynamic layout? I have an array of values to display to a user and allow them to edit each one e.g. a dynamic list of TextEntry components.
Hi Client! Thank you for submitting a question. At the moment, we don't support mapping array to layout (aka Loops). We have plans to add it in the near future.
As a short-term mitigation, if you know the maximum size of your array, you can define the data for the screen like:
item1: { },
item2: { },
item3: { },
...
And then use conditionals or visible flag to display inputs:
{
type: "TextInput",
visible: "${data.item1.visible}",
name: "item1"
}
This is not ideal for sure, so we plan to address it very soon.
Hi Clint, you can use the If or Switch components to dynamically render other components based on different data (see https://developers.facebook.com/docs/whatsapp/flows/reference/components#if).
+1 to Diego's suggestion above, which is the simplest way to achieve this behaviour.
You can also use an endpoint which will give you the ability to control the layout from your server while the user is using your Flow. This does require more set-up and maintenance, so I'd recommend trying to achieve your goal with the if and switch components as suggested by Diego.
Thank you both for taking the time to reply.
@Diego How would I use an If or Switch to build the layout dynamically from an array that is of indeterminate size, can you elaborate? I did have the idea to create a flow with the maximum number of components (50) and the wrap each in an IF to display or not (is this what you are suggesting?). This could work but seem incredibly crude. Does the layout support any looping components\structures?
@Bar I have setup an endpoint for the flow. I had always assumed having an endpoint would be part of the solution, it is the endpoint that is returning the array of values. How does the endpoint "serve" the layout? Every sample I have looked at or documentation shows the endpoint returning data (not layout). Can you elaborate?
The one possible solution I came up with was to design the flow to display a single value. So instead of trying to dynamically build the layout from the array, instead send the user a new flow for each value and keep looping (on the server) through the values and sending the user a new flow until the user has completed editing each one. But this too seem a bit crude.