Form (outdated)
An interactive web form ⌨️
Component Overview
The Form component serves several purposes:
Collecting data
Component Settings Sections
General Form Settings
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.
Form max width in pixels
Default http-request parameters.
Fields Settings
Sections
You can display sections as visible sections or as invisible groups, which can be particularly useful for conditional sections.
Conditional Sections
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.
Link and ArrayLink Quick Search Option
The maximum quantity of options in the dropdown is limited to 1000.
Hidden Fields
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
Personalization
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.
Editing Existing Objects
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 theid
of the object to edit:
From the query parameter:
@editObject=_id_
form the URL, where_id_
represents the id of the object you would like to edit.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.
Result Resubmission
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).
Online Result 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.
Hint: you can build an online calculator for your app using that form with a synchronous result processing.
Last updated