Hello World Tour Tutorial. This form was made 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.
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.
form: multiple fields does not support all field types, for example:
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
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.
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.
Email input is a text input with the basic email validation. The psuedo classes
: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
URL input has just like the email input default validation. The default validation requires you to start with
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
Language in-pin, for example:
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 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.