Component demo
Collect data;
Interact with the user via online result processing.
General. Settings like header, description, buttons text, etc.
Fields. Configuring inputs for form fields.
Result. On-line submission processing.
Remember, that you have to click Save button to update the component settings.
API-endpoint. That defines the fields available for writing.
Form title;
Form description;
Submit button text (Submit
by default);
Re-submit button text (Submit again
by default);
Labels or placeholders. Switches the view of inputs—field names can be displayed above the field or as a placeholder;
Form max width in pixels.
Each field (available for writing—POST-requesting in API-endpoint) has a specific data type. You can find configure the form input field, according to the field type.
General text data. For example, name
Include into form (true
by default)
Required field (false
by default)
Hidden field (false
by default)
Show as a text area (false
by default)
Text area rows (4
by default)
Show as a Markdown text (false
by default)
Set default value (false
by default)
Add description (false
by default)
Integer number (positive or negative). For example, age
Include into form (true
by default)
Required field (false
by default)
Only positive numbers (false
by default)
Add units name (false
by default)
Set default value (false
by default)
Add description (false
by default)
Decimal number. For example, height
Include into form (true
by default)
Required field (false
by default)
Add units name (false
by default)
Set default value (false
by default)
Add description (false
by default)
Yes/No (True/False). For example: Is valid?
Include into form (true
by default)
Required field (false
by default)
True label (Yes
by default)
False label (No
by default)
Add description (false
by default)
Field with email format verification
Include into form (true
by default)
Required field (false
by default)
Set default value (false
by default)
Add description (false
by default)
This is complex data entity, such as ranges, multiple questionaries, etc. For example Fields of interest
Include into form (true
by default)
Required field (false
by default)
Display json-field as (Text input
by default)
Text input
Slider (one value)
Unit name
Step
Min value (0
by default)
Max value (100
by default)
Default value
Range Slider (two values)
Unit name
Step
Min value (0
by default)
Max value (100
by default)
Left default value
Right default value
Multiple choice (checkboxes)
Options (several)
key + value
Add custom option (false
by default)
Custom option label (My option
by default)
Custom option type (String
by default)
String
Textarea
Number
Decimal number
Date
Date and time
Custom option placeholder (Describe your option
by default)
One choice (radio buttons)
Options (several)
key + value
Add custom option (false
by default)
Custom option label (My option
by default)
Custom option type (String
by default)
String
Textarea
Number
Decimal number
Date
Date and time
Custom option placeholder (Describe your option
by default)
Add description (false
by default)
Date or date + time. For example, birth date
Include into form (true
by default)
Required field (false
by default)
Date format (Date and time
by default)
Date and time
Date only
Set default value (false
by default)
Add description (false
by default)
Link to other data structure. For example, City of birth
Include into form (true
by default)
Required field (false
by default)
Turn on quick search (true
by default)
Hidden field (false
by default)
Add description (false
by default)
Multiple links to other data structure. For example, Friends
Include into form (true
by default)
Required field (false
by default)
Turn on quick search (true
by default)
Hidden field (false
by default)
Add description (false
by default)
The field is not supported in the current Form Component version.
The field is not supported in the current Form Component version.
The field is not supported in the current Form Component version.
If the option Quick search is ON (it is by default), objects from the linked structure will be displayed as options in selects (the visible name will be displayed, if there is no such, the id
field will be displayed). Max quantity of options is 1000.
If you marked field as a hidden one (that is possible for string and link fields), they will be get from URL query params. That looks like (fieldOne and fieldTwo are hidden fields):
yourapp.directual.app/FormPage?fieldOne=value&fieldTwo=1984
Query params have to start with ?
and be separated by &
Here we will get in the submitted object:
fieldOne = value
fieldTwo = 1984
You can include hidden field for User ID, which will be filled automatically if the user is logged in.
First, you need to have a field type of link to WebUser
data structure available for posing in your API-endpoint.
Find section in Personalisation section in Fields settings:
The user's ID will be posted in this field automatically. If the user isn't logged in, the field will be empty.
Remember, that you can configure your API-endpoint in a way, when unauthorised user will not be able to submit the form.
If you want to edit existing object plus to creating new you can turn on that option in Fields settings section:
Don't forget to add id
field in API-endpoint available both for writing and reading. Also you must add all the fields you want to be fetched available for reading in API-endpoint settings. Keep id
be included into the form, but hidden — this is settings by default.
There are two ways to get id
of the object to edit:
From query param @editObject=_id_
form URL, where_id_
is id of the object you would like to edit.
Use user's id
as an id
of object to edit. You could edit App user (WebUser
) object that way. Also any other object with such an id
.
Submitted object can be processed in sync scenario, and then the result is to be displayed to the user. There three fields of the object for interpreting the result of object processing:
Result: success/fail. Boolean field. If the field is true
, the Success block is showed. If that field is false
, the error block is showed.
Result message title. String field. The title of the result block.
Result message text. String field. The text of the result block.
Remember, that object is saved despite of the result of sync processing. But if object does not match validation rules, it is not saved!
Hint: you can build an online calculator for your app on that form with a sync result processing.