Please give details of the problem



    User Guide

  1. Usage Report
  2. Logs Application
  3. Easy Builder
  4. FAQ
  5. User Management
        1. Composite API Design Tab
        2. Composite API Configuration Tab
        1. Providers
        2. Connectors
        3. Processes
        1. Roles entities
        2. Organization
      1. Collections
        1. Project Files Tab
        2. Project Definition Tab
        3. Project Versioned Files Tab
        4. Project Version Tab
        5. Project Description Tab
        6. Version
        7. Project Rights Tab
        8. Project Collection Tab
        1. Web Interface JS Tab
        2. Web Interface Design Tab
          1. Image Widget
          2. FileUpload Widget
          3. StaticText Widget
          4. ProgressBar Widget
          5. TextInput Widget
          6. JavaScript Widget
          7. Section Widget
          8. Geolocation Widget
          9. Checkbox Widget
          10. RadioButton Widget
          11. Tree Widget
          12. Spinner Widget
          13. History Widget
          14. URLInput Widget
          15. Tab Widget
          16. List Widget
          17. Array Widget
          18. HTML Editor Widget
          19. Report Widget
          20. Button Widget
          21. Custom Widget
          22. Captcha Widget
          23. HTML Widget
          24. Multi Checkbox Widget
        3. Web Interface Analytics Tab
        4. Web Interface Collection Tab
        5. Web Interface Implementation Tab
        6. Web Interface API Tab
        7. Web Interface Stylesheet Tab
      2. Revision
      3. Custom Lists
        1. Process Variables Tab
        2. Process Measures Tab
            1. Process Timer Event
            2. Process Start Event
            3. Process Intermediary Event
          1. Gate
            1. Process Task Loop Tab
            2. Process Task Manual Tab
            3. Process Task Email Tab
            4. Process Task Connector Tab
            5. Process Task SubProcess Tab
            6. Process Task Functional Tab
            7. Process Task Script Tab
          2. Process Step Output Variables
          3. Process Step Testing Variables
          4. Process Step Input Variables
        3. Process General Tab
        4. Process Design
        5. Process Input Tab
      1. Home
      2. My Tasks
      3. My Applications
      4. Files
    1. Customer Management
      1. Messages
      2. Scheduled Process
      1. Process Examples
      2. Connectors
      1. Users
      2. Configuration
      3. Usage
      1. Web Interface Reports
        1. Measuring
        2. Runtime Users
        3. Execution Path
        4. Parameters
    1. RunMyApp for Android
    2. RunMyApp for iOS
    3. RunMyApp for Windows
  6. My Settings
  7. App Translator

Progress Bar

Progress bar is a widget which allows to manage the progress of a request. The request is splitted in ordered steps which are displayed, actived or inactived following the state of the request.


Progress Bar configuration

There are two ways to use the progress bar widget, automatically using the configuration of the web-interface and manually by specifying a configuration and a process variable.

Automatically configuration

For this configuration, you only have to configure the widget. The progression of the bar will be managed by the motor of the process. To configure the progress bar widget you have to associate each manual task to one step (see image).

info_1 One step can be linked to one or several manual tasks

Manually update

For this configuration, you have to check the box "custom configuration" (see image) and to provide a JSONArray configuration. The JSONArray have to contain a list of JSONObject with the following keys:

  • reference: <integer> it's the ordered number of the step
  • title: <string> title of the step
  • subtitle: <string> subtitle of the step
  • number: <string> the indicator inside the circle of the step (you can ignore it or use auto value to have an automatic, incremental number)
  • state: <string> the state of the step (default is next, it can take the values: active, previous, hidden, next)
  • screen: <array> list of the reference of the manual task (optional)


    [{"reference":0,"title":"Items order"},

You will have also to handle a variable inside your process. This variable will contain the state of the progress bar. The state of the progress bar is a JSONObject containing the information reference:state.


    {"0":"previous", "1": "active"} // This is to activate the second step which is in our example "validation"

The state can take the following values:

  • active: for the "active" step, the current step where the request is waiting for
  • next : for the steps which are still not reached
  • previous: for the steps achieved
  • hidden: for the hidden steps, you can "show" these steps with the method setState descripted in the "Advanced features" chapter.

info_1 Don't forget to precise the name of the variable in the configuration of the progress bar

Advanced features

To complete this widget, there is a set of javascript methods to pilot it easily.

  • setTitle(reference, title): Change the title of the step identified by its reference.
  • setSubTitle(reference, subtitle): Change the subtitle of the step identified by its reference.
  • setNumber(reference, number): Change the number of the step identified by its reference.
  • setState(reference, state): Change the state of the step identified by its reference.

info_1 As all the widgets, these methods are called with id_widget.method_name

API Reference

Web interface configuration