Skip to main content

 

 

 

 
Language:
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
OutSystems

Progress Circle

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Progress Circle UI Pattern to show the current progress of an operation flow. The progress is incremented in fractions of the circular badge.

    How to use the Progress Circle UI Pattern

    In this example, we create a button that increments the progress circle each time it's clicked.

    1. In Service Studio, in the Toolbox, search for Progress Circle.

      The Progress Circle widget is displayed.

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    2. From the Toolbox, drag the Progress Circle widget into the Main Content area of your application's screen.

    3. Right-click your screen name, select Add Local Variable, and enter a name. In this example, we enter Count.

    4. Select the Progress Circle widget, and on the Properties tab, in the Progress property, enter the relevant logic for the progress percentage.

      In this example, we enter the following logic which sets the progress percentage to 4%:

      Count / 25 * 100

    5. From the Toolbox, drag the Button widget into the Main Content area of your application's screen. In this example, call the button Increment and set the On Click property to a New Client Action that assigns the Count variable to Count + 1.

    6. Select the Progress Circle widget, and on the Properties tab, you can change the Progress Circle's look and feel by setting the (optional) properties, for example, the color settings.

    After following these steps and publishing the module, you can test the pattern in your app. The result of this example should look something like the following:

    Properties

    Property Description
    Progress (Integer): Mandatory Progress percentage to display. You can use functions or local variables. Usually a number between 0 and 100.
    Text (Text): Optional Text that displays inside the circle. If no text is specified, the progress percentage is displayed.
    ProgressColor (Text): Optional The color of the stroke on progress circle. The default value is: "rgba (0,0,0,0.6)".
    TrailColor (Text): Optional The color of the empty part of the progress circle. The default value is "rgba (0,0,0,0.2)".
    TextColor (Text): Optional The color of the text inside the circle. The default value is "#333".
    CircleThickness (Integer): Optional The thickness of the circle that marks the progress.

    Examples

    • Blank - The circle thickness is 8px. This is the default value.
    • 4 - The circle thickness is 8px.
    AnimateInitialProgress (Boolean): Optional If set to True, the progress from zero to the progress value is animated. This is the default. If set to False, the progress is not animated.
    ExtendedClass (Text): Optional Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?