🧬 Assemble components
The form component is a visual element that represents the progress or completion of a task or process. It displays a horizontal bar that fills up or shrinks based on the specified progress value.
Properties | Description |
---|---|
Event handler | detecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions. |
Disabled | non-interactive and cannot be modified or triggered by the user. |
Disable submit | disabling the form submission functionality. |
Validate inputs on submit | the form inputs should be validated for correctness or completeness when the form is submitted. |
Reset after successful submit | automatically resets its values and state to their initial or default values after a successful submission |
Tooltip | a small pop-up or informational message that appears when the user hovers over or interacts with a specific element, such as a form component. |
Show header | whether a form component should display a header or title section |
Show footer | whether a form component should display a footer section |
Hidden | hides the form component from the user’s view |
Border Color | color of the border that surrounds a form component |
Border Radius | curvature of the corners of a form component’s border |
Border Width | thickness or width of the border surrounding a form component |
Background | defines the color or image that fills the content area of a form component |
Shadow | visual effect of adding a subtle, offset “shadow” to a form component, making it appear slightly raised or floating above the background |
You can use other components to control the component. We support the following two methods:
To submit the information filled in the form field
reset all input fields in the form component
To set the text area input value, for example, {{“value1”}}
Properties | Description |
---|---|
Value | Input value |
To verify that the input information is legal
The component has some commonly used data, which can be called via {{componentName.propertyName}}
in the app.
Property name | Description |
---|---|
backgroundColor | specifies the background color of a form component |
borderColor | defines the color of the border surrounding a form component |
borderWidth | determines the thickness or width of the border surrounding a form component |
disabled | whether a form component is disabled or not |
displayName | represents the name or label assigned to a form component |
footerHeight | specifies the height or size of the footer section of a form component |
formData | holds the data or values entered by the user in a form component |
headerHeight | determines the height or size of the header section of a form component |
invalid | whether the input or value of a form component is considered invalid or not. |
radius | defines the border radius or curvature of the corners of a form component |
resetAfterSuccessful | indicates that a form component should automatically reset its values and state to their initial or default values after a successful submission |
shadow | controls the presence and appearance of a shadow effect on a form component |
showFooter | determines whether the footer section of a form component should be displayed or not |
showHeader | visibility of the header section of a form component |
tooltipText | holds the text or content of a tooltip associated with a form component |
validateInputOnSubmit | specifies that the input values of a form component should be validated for correctness or completeness when the form is submitted |
Example: {{form1.disabled}}
We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.
Add a form
component with the default text “Form” and a “Submit” button to canvas.
Add an input
component, a number input
component, and a bar progress
component from **Insert**
into the form.
Label the input component to be “Name”, the number input component to be “Age” and the bar progress component to be “Progress”.
Set the placeholder of the input component to “Please put your name here” and the default value of the number input to 0 as shown below.
For the input
and number input
components, we can configure them to set the value in bar progress
component to reflect the progress of completion.
input
and number input
component to open its inspect page. Under Event handler
, click **+ New**
.Control component
in action, and select the bar progress
component that you want to update as the target of the event.setValue
action and set the value as{
{
input1.value && numberInput1.value
? "100"
: input1.value || numberInput1.value
? "50"
: "0";
}
}
Note: need to set the event handler as described above to BOTH input and number input components.
For the button
component, we can configure it to submit the form if the form is completed (ie bar progress 100%)
button
component to open its inspect page. Under Event handler
, click **+ New**
.Control component
in action, and select the form
component that you want to update as the target of the event.submit
method and put {{barProgress1.value == 100}}
in Only run when
Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.
button
component to open its inspect page. Under Event handler
, click **+ New**
.Show notification
in action, title
“Error!” and description
“Please fill out the form before submitting”. Choose Error
for type
, put {{2000}}
for the duration
(2 seconds), and put {{barProgress1.value<100}}
for Only run when
.