Dynamically Repeating Containers

Have a form container and its contents dynamically repeat a number of times.

Overview

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. For example, you might use this to show multiple loan offers or allow the user to enter a sequence of information. In this case, you can take advantage of our Repeating Containers feature.

Video Demo

https://www.loom.com/share/c75da44eb0b34d5184ba378b647b2fa1

Setup

1. In your Feathery visual editor, navigate to the step where you want to show a variable number of containers.

2. Select the container and in properties (on the right sidebar), select the "Repeatable" option.

3. Set all fields within the repeatable container to also be repeatable by clicking each field, and then setting them to repeatable in the properties section of the right side bar.

Usage

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 Container and the click action of the second button to Remove 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 the Remove button needs to be placed in the repeated container and cannot be placed outside of it. The Add button can be placed anywhere, and you can specify which repeating container it will add.

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.

Logic

For Logic rules triggered by clicking a repeated container or object within the repeated container, you can use feathery.trigger.repeatIndex to know which repeated container object was clicked. This will return the index of the clicked object, starting with 0 for the first repeated container

Example

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']})