Repeating Elements

Another common use case in form development is the repetition of items from a collection. For example, selecting a house from a list of houses, or picking out a doctor from a list of practicing physicians. While it is possible to present this to the user with a dropdown list, there may be additional information associated with each of the options to present to the user. One such solution is to use Lists of options in a form.

Building Out a List

Airkit’s repeaters make it easy to build repeatable content tied to lists of data. These repeaters can be used to display collections of content, but they can also be used to create dynamic, selectable content. Selecting a single house from a list of houses is a great example.

Building this out will require the use of a Checkbox List Component. For each house, let's show a house title, picture, square footage, bedroom count, bath count, and asking price. Users will be able to select the houses they are interested in.

Step one is to create some user data for the Houses object. Create a custom AirData App Object for the house with the fields title (text), picture (asset), square_footage (number), beds (number), baths(number), and asking (currency). Create a Data Flow to return all the houses from the table.

Create a new Web Flow. Add a web page. Add a title label with the text "Select the Houses you are interested in:" Add a Checkbox List and a submit button. 

On the Web Page create two variables of type List of Houses. Name one houses and the other selected_houses. Click on the Advanced Tab of the Inspector and add an action to run the Data Flow to put the entire house list into the houses variable.

Select the Checkbox List and set the value to selected_houses, set the Data field to houses, and the Selected Field to: 

CONTAINS(  
  selected_houses,  
  item  
)

Using the CONTAINS() function this expression checks to see if the current house (the item) is in the collection of selected houses. The Checkbox list will take care of adding a selected house to the selected_houses array. 

Configure the checkbox cell to contain all the information in each house object. 

Lastly, it is time to configure the return value. Because of the way Checkbox Lists work, in order to send only the selected options to a Data Flow from the selected_houses, filter out the empty options:

Putting this all together, the experience collects users selections and passes the selected values to the output data flow: