ILLA home page
  1. Form

​

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

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.
Disable submitdisabling the form submission functionality.
Validate inputs on submitthe form inputs should be validated for correctness or completeness when the form is submitted.
Reset after successful submitautomatically resets its values and state to their initial or default values after a successful submission
Tooltipa 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 headerwhether a form component should display a header or title section
Show footerwhether a form component should display a footer section
Hiddenhides the form component from the user’s view
Border Colorcolor of the border that surrounds a form component
Border Radiuscurvature of the corners of a form component’s border
Border Widththickness or width of the border surrounding a form component
Backgrounddefines the color or image that fills the content area of a form component
Shadowvisual effect of adding a subtle, offset “shadow” to a form component, making it appear slightly raised or floating above the background

​
Method

You can use other components to control the component. We support the following two methods:

  • submit

To submit the information filled in the form field

  • reset

reset all input fields in the form component

  • setValue

To set the text area input value, for example, {{“value1”}}

PropertiesDescription
ValueInput value
  • validate

To verify that the input information is legal

​
Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
backgroundColorspecifies the background color of a form component
borderColordefines the color of the border surrounding a form component
borderWidthdetermines the thickness or width of the border surrounding a form component
disabledwhether a form component is disabled or not
displayNamerepresents the name or label assigned to a form component
footerHeightspecifies the height or size of the footer section of a form component
formDataholds the data or values entered by the user in a form component
headerHeightdetermines the height or size of the header section of a form component
invalidwhether the input or value of a form component is considered invalid or not.
radiusdefines the border radius or curvature of the corners of a form component
resetAfterSuccessfulindicates that a form component should automatically reset its values and state to their initial or default values after a successful submission
shadowcontrols the presence and appearance of a shadow effect on a form component
showFooterdetermines whether the footer section of a form component should be displayed or not
showHeadervisibility of the header section of a form component
tooltipTextholds the text or content of a tooltip associated with a form component
validateInputOnSubmitspecifies that the input values of a form component should be validated for correctness or completeness when the form is submitted

Example: {{form1.disabled}}

​
Use case

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.

​
Step 1 Add Components

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.

bar_layout

​
Step 2 Configure the component

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.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the bar progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

bar_input_num_config

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%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{barProgress1.value == 100}} in Only run when

bar_button_submit_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select 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.

bar_button_show_config

​
Step 4 Test

bar_test