Comment on page
Form
An interactive web form ⌨️

The Form component serves several purposes:
- Collecting data

- Form Title
- Submit Button Text (
Submit
by default) - Labels or Placeholders. Switches the view of inputs: field names can be displayed above the field or as a placeholder.

Labels (on the left), Placeholders (on the right)
- Form max width in pixels
- Default http-request parameters.
Each field, which is available for writing (POST-requesting) or reading (GET-requesting) in an API-endpoint, has a specific data type. You can configure the form input field and set the default value according to the field type.

You can display sections as visible sections or as invisible groups, which can be particularly useful for conditional sections.

Display as a section is ON on the left screen
The visibility of a section can depend on the user's choice of field values above (or on existing objects fields in the case of object editing). If you add more than one conditional, you can choose either the AND or OR operator to join your conditionals.
If you want to check if a field is empty, enter the
null
value. Conversely, use isNotNull
, if you want the field to have any value other than empty.
In this example, Section 2 is visible only if the user choses value "bug" for the field {{feature_type}}
When the dropdown for
link
/arrayLInk
field is ON (it is OFF by default), objects from the linked structure can be displayed as options in dropdown selects. The visible name of the linked will be displayed, and if there is no such, name, the id
field will be displayed instead. To make this feature work, you need to create an API endpoint for it. You can also add different filters to that endpoint, such as "objects connected with the current user."
The maximum quantity of options in the dropdown is limited to 1000.
If you marked a field as hidden (which is possible for string and link fields), their values will be obtained from the URL query parameters.
It should look like this:
yourapp.directual.app/FormPage?fieldOne=value&fieldTwo=1984
Query parameters must start with a '
?'
and be separated by '&'.
In the submitted object, you will receive:
fieldOne =
value
fieldTwo =
1984
You can include a 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 posting in your API-endpoint.Find the section Personalization in the Fields settings:

The user's ID will be posted in this field automatically If the user is logged in. If the user isn't logged in, the field will remain empty.
Remember, that you can configure your API-endpoint in a way that unauthorized user will not be able to submit the form.
If you want to enable the option to edit existing objects in addition to creating new ones, you can turn on that option in the Fields settings section.
Don't forget to include the
id
field in API-endpoint, making it available both for writing and reading. Additionally, ensure all the fields you want to be fetched available for reading in API-endpoint settings. By default, the id
field is included in the form, but it's hidden.There are three ways to get the
id
of the object to edit:- 1.From the query parameter:
@editObject=_id_
form the URL, where_id_
represents the id of the object you would like to edit. - 2.
- 3.Use the user's
id
as theid
of the object to edit. This allows you to edit the App user (WebUser) object or any other object with such an ID. This option is commonly applied for profile settings.
By default, after submitting the form, the user will see a success message and a button "Submit again". You can remove the button and disable resubmission, hide the button and redirect the user back to the form automatically after a few seconds. Also, you can edit the message (by using HTML).
Submitted object can be processed in a synchronous 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. A Boolean field. If the field is
true
, the Success block is displayed. If that field isfalse
, the error block is displayed. - Result message title. A String field. The title of the result block.
- Result message text. A String field (HTML usage is available here). The text of the result block.

Remember, that object is saved regardless of the result of synchronous processing. However, if the object does not meet the validation rules, it will not be saved. Validations are crucial to ensure that only data meeting specified criteria is stored.
Hint: you can build an online calculator for your app using that form with a synchronous result processing.
Last modified 2mo ago