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.

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.

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.

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.

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.

Nice to know inputs

Now you have already made a few forms with inputs. These inputs are for the most part the 'basic inputs', like the text, number, date, etc. With these inputs you can create really nice forms. But these inputs are not the only inputs RUAL has to offer. Written below are some of the inputs you might not have used or seen.

File, Email, Price, URL, Array inputs

File input will open your file explorer to select a file from your computer. You can choose from the normal file input or the custom file input.
Email input is a text input with the basic email validation. The psuedo classes :valid and :invalid are added to the input.
Price input is a number input that will take the value and divide it by the value you enter in the divide in-pin, default 1000.
URL input has just like the email input default validation. The default validation requires you to start with https://.
Array input will create inputs foreach field given in the array input. In the Array Field fill in the field you want to save the data to (your array field). With array of objects you can add fields using the manage fields. This wil generate the inputs automatically for you. You can change the inputs using the Row Render

Code editor, text editor, numpad

Code editor will allow you to type in a Programming language set in the Language in-pin, for example: html, css or javascript. The value created in the input will be saved as a String.
Text editor with this editor you can type custom text using the options provided. The value that will be saved is saved in a stringified HTML text.
Numpad is just a normal number input with number buttons below it you can use for mobile pages. For example counting pages.

Code input, Color input, Location input, Scan input

Code input is something different from the Code editor. This input will generate X amount of inputs based on the settings. Each input accepts one value. This can be used for example an 2FA security measure.
Color input when clicked this will open a color picker. Once you selected the color, the color in the input will change to that color. When you save it, it will output a Hex color code.
Location input will create 2 number inputs, a lat (latitude) and lon (longitude). It will save these values in an object field.
Scan input will listen to any key presses on the page and fill the input with these presses. This can be used in combination with bluetooth scanners.