Dynamically Repeating Containers
Have a form container and its contents dynamically repeat a number of times. For example, you might use this to show multiple loan offers or allow the user to enter a sequence of information.
A step in your form may need to show a variable number of containers and elements depending on the user who is filling out the form. In this case, you can take advantage of our Repeating Containers feature.
In your Feathery visual editor, navigate to the step where you want to show a variable number of containers. From the right sidebar, enable and specify which container of the step is allowed to repeat. In order for the container to repeat, it must contain at least one field or text variable since they are allowed to have dynamic values.
Now that the container is allowed to repeat, you can trigger it in two ways.
- 1.Add two button elements to your step with the repeating container. Set the click action of the first button to
Add a Repeating Containerand the click action of the second button toRemove a Repeating Container. When your end-user clicks the first button in your form, another repetition will be added. When your end-user clicks the second, a repetition will be removed. Note that theRemovebutton needs to be placed in the repeated container and cannot be placed outside of it. TheAddbutton can be placed anywhere. - 2.Set the value of a field(s) in the container to a list of repeating field values. Your form will automatically infer from the length of the list how many repetitions of the container are needed. Repeating field values can be set from the SDK programmatically or with advanced logic.
You're building a financial app offering loans to your users. On the last step of your form, you want to show your user a variable number of offers, one in each container.
From the dashboard, you create a hidden field called
offer-description and set it as a text variable in a container of the the last step of your form. Then, you set that container as repeatable from the right sidebar.Finally, from our SDK that you installed in your codebase, you run the following code to show your user two different offers.
import { setValues } from '@feathery/react';
setValues({'offer-description': ['My first offer', 'My second offer']})
Last modified 1mo ago