We’ve launched two new screen templates for working with nested forms – the Subform Input and Subform List!
How do I use these screen templates?
Both screen templates are available via the ‘Add Screen’ button in Edit mode of Fliplet Studio. The Subform Input screen lets users submit multiple entries within a single form – essentially a form within a form. The Subfrom List screen is designed to display those nested entries in a list-style format.
What do these screen templates do?
The Subform Input screen is ideal for scenarios where users need to add several repeatable sets of data, like multiple addresses, work history entries, or dependent information. It uses the standard form component with custom code that lets you define where the subform begins and ends within your form, allowing you to add one or many fields.
The Subform List screen shows the submitted nested entries using a modified List From Data Source (LFD) component. It’s perfect for reviewing and managing the data collected from the Subform Input screen.
How do I customize these screen templates?
For the Subform Input screen:
- To edit the fields inside the nested form, add or remove them between the two paragraph fields marked “Subform Start” and “Subform End”.
- All data in the subform fields will be stored in a single data source column. To change where the nested form data is stored, update the
columnNameclass in the “Subform Start” paragraph field. - Note: The blue boxes marking the start and end of the subform only appear in Fliplet Studio and won’t be visible in the live app.
For the Subform List screen:
- Go to the data view settings and set the column name that contains the nested form content, e.g.
{{subForm [Addresses]}}or{{subForm [Work-History]}}. Always use the format {{subForm [Your field name]}}.
These templates give you a powerful and flexible way to handle and display repeatable sets of data in your apps. Give them a try and let us know what you build!