Big form

Create big forms fast

Form from tutorial

You might remember the register form we made in the Hello World Tour Tutorial. This form was made with rows and Columns with inputs. For a small form like this, the way we build it is completely fine. But when you want to create a form with alot of inputs, your blueprint will become very big and possibly unreadable. Because of that reason we created an action that will create a form based on the fields you entered.

old_form_page.png

Multiple Fields

When creating a big form it is recommended that you use the form: multiple fields. This action will automatically create a row with a label and an input according to the selected field and field type. To add fields to a form: multiple fields you want to click on the manage fields button. This will open the fields selector modal. Here you can search for the fields you want to use or create a new field. Based on what type the field is the multiple fields will automatically create the right input type. So for example the first and last name will be a text input, but when you add birthdate it will create a date input. The inputs will be rendered just like how they appear in the header of the form: multiple fields. You can change this by using the up and down arrows next to the field names.

multiple_fields_page.png

Special field types

The form: multiple fields does not support all field types, for example: array and object, these field types will need a row render to add the inputs to the form. When you don't add a row render it will give you a message component_input_fields.unsupported_type.

unsupported_type_page.png

Row render

In order to resolve these special fields, we will need to make a row render. Drag out of the row render pin and select the fieldfunctions: get multiple. I recommend using the get multiple most of the time just to be sure for the future when you want to add a row render to the multiple fields. Once created it will open a field selector. Select the field you want to add a row render to. Create a function from the pin that was added with the field name. This will create the function with a function: return uicomponent. In here you can add whatever content you want to add. For this example I will be using custom_scopes, this is an array so i will be creating a form: array input.

row_render_page.png

Result

When you added the row render to your multiple fields you will see that the error message is removed and the content you put in the row render is shown. The last options are the validations for the field in the multiple fields. These can be added at the bottom of the multiple fields. The pins have the same name as the fields being used.

rowrender_result_page.png