Form (outdated)
An interactive web form ⌨️
Last updated
An interactive web form ⌨️
Last updated
This component is outdated. Use advanced instead
The Form component serves several purposes:
Collecting data
Interacting with the user through online .
: Settings like the header, description, button text
: Inputs for each form field
: On-line submission processing.
. Defines the fields available for writing in the form
Form Title
Form Description (you can use here)
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.
You can display sections as visible sections or as invisible groups, which can be particularly useful for 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.
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 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 the id 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).
Result: success/fail. A Boolean field. If the field is true, the Success block is displayed. If that field is false, 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.
Each field, which is available for writing (POST-requesting) or reading (GET-requesting) in an , has a specific . You can configure the form input field and set the default value according to the field type.
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 ). If you add more than one conditional, you can choose either the AND or OR operator to join your conditionals.
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 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 to that endpoint, such as "objects connected with the current user."
From URL parameters (this option matches with )
Submitted object can be processed in a , and then the result is to be displayed to the user. There three fields of the object for interpreting the result of object processing:
Remember, that object is saved regardless of the result of synchronous processing. However, if the object does not meet the , it will not be saved. Validations are crucial to ensure that only data meeting specified criteria is stored.
