Progress Bar Overview

Overview 

Progress Bar components offer users the ability to track the amount of work done or where a project is in terms of completion. These components can be placed on any Form and placed beside any accompanying relevant components. Like many other Form components, the Progress Bar's numerical value may be mapped in statically or dynamically additional Flow steps. 

The following example demonstrates how to add and configure a Progress Bar on a Form in Decisions.

Example 

To add a Progress Bar to an employment application Form that is mid-way through the process:

1. From the Decisions Studio, select CREATE FLOW from the Global Action Bar, then CREATE a new Flow.
2. From the Flow Designer, attach a Create Data step from the FAVORITE STEPS category of the Toolbox tab. 
3. From the Properties tab of the newly added step, select Show Editor.
4. From the Data to Create window, provide a NAME, select Double from the TYPE dropdown. Constant map the level of completion (in this case "40"), then CLOSE the window.
5. Attach a Show Form step to the Create Data step; from the Properties tab, select Pick or Create Form, then CREATE a new Form. 
6. Design the Form by providing a Text Box labeled "Email Address", a Button labeled "Submit", and a Progress Bar component. From the Properties tab of the Progress Bar, change the Max value to "100". Then Save and Close the Form. 
   Note on Form Component Locations 

   The Text Box and Button components can both be found under the Favorite Components category of the Toolbox tab. The Progress Bar can be found under the Data category. 

   
   

7. From the Flow Designer, select the Show Form step's Properties, map the OUTPUT from the Create Data step to the Progress Bar's INPUT. Then, set the Email Address Text Box to Ignore. 

8. From Steps > Data > Numbers, attach an Add step to the Submit path of the Form step. Map the Create Data step's Output to Value1, then Constant map "10" to Value2.

   Additional Information on Add Step

   This step is used to calculate the amount complete by adding 10 to the original "PercentComplete".

   

   
   

9. Attach an additional Show Form step to the Done path of the Add step, select Pick or Create Form, then CREATE another Form.

10. Design this Form similar to the first by providing a Submit Button, a Progress Bar with the Max set to 100, and another Text Box. Label the Text Box "Phone Number", then Save and Close the Form.
    

11. Back in the Flow Designer, connect Submit to the End step. Then, select the newly configured Form and map Add_Output to the Progress Bar; set Phone Number to Ignore.  

    
    

12. Save, and if desired, Close the Flow. 

Debug 

1. From the Flow Designer, select the Debug link from the top Action bar. Then click FULL. 
2. Fill out the first Form then click the Submit Button. 
   Note on Form 

   Note that at this point the bar displays that the employee would be at the 40% mark in the application process. 

   

3. Proceed with filling out the second Form, then click Submit to submit the Input and close the Form.

   Note on Progress Bar 

   Note that the filled amount of the progress bar has increased by 10%. This procedure may be continued for further sections of the Flow to indicate each 10% change in progression.