Circle progress

​

Circle Progress component is a visual element used to display progress or completion status in a circular format. It is often used to represent the progress of tasks, projects, or any other measurable value.

​

Properties

​

Method

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

• setValue

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

• clearValue

To clear the value of the selected component

​

Data

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

Example: {{circleProgress1.value}}

​

Use case

We will demonstrate how to make a form with a circle progress component showing 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 circle 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.

​

Step 2 Configure the component

For the input and number input components, we can configure them to set the value in circle 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 circle 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";
  }
}

Note: need to set the event handler as described above to BOTH input and number input components.

For the “Submit” button component, we can configure it to submit the form if the form is completed (ie circle 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 {{circleProgress1.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.

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 {{circleProgress1.value<100}} for Only run when.

We can also configure the **Form** component to show a success message when submit.

1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Show notification in action, title “Submitted Successfully”. Choose Success for type, put {{2000}} for the duration (2 seconds).

​

Step 4 Test