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.
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: 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
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
.
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.
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
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 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.