🧬 Assemble components
The Bar Progress 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 |
---|---|
Value | the percentage value represents the progress |
Hide value label | whether the value label is hidden |
Label | The name of the field displayed to the user |
Hidden label | Set whether to display the label |
Caption | A caption used to describe the field in detail |
Position | Set the position of the label relative to the component |
Alignment | Set the alignment (align to left or right) of the label |
Width | When the label is on the left side of the component, set the width ratio of the label. |
Tooltip | Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported. |
Hidden | Dynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value. |
Theme Color | Allows users to specify the button’s background color and opacity |
Styles | the stroke width of the bar represents the progress |
You can use other components to control the component. We support the following two methods:
To set the text area input value, for example, {{“value1”}}
Properties | Description |
---|---|
Value | Input value |
To clear the value of the selected component
The component has some commonly used data, which can be called via {{componentName.propertyName}}
in the app.
Property name | Description |
---|---|
color | color of the bar |
displayName | the name of this component (ie button1) |
hidden | hidden status (true or false) |
label | label value |
labelAlign | alignment of input label (left or right) |
labelPosition | position of input label (left or right) |
labelWidth | the integer representing width of label. |
strokeWidth | width of the bar stroke |
tooltipText | value of tooltip text |
value | percentage value of the progress |
Example: {{barProgress1.value}}
We will demonstrate how to make a form with bar progress at the bottom showing 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
.