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 Save and 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 FAVORITES 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 Toolbox > 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 the Flow, then if desired close via X. 

Debug 

1. From the Flow Designer, select the Debug link from the top Action bar. Then click START DEBUGGING. 
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. 

   

Use In Simple Forms 

If desired, users may add a Progress Bar Component to Simple Forms. To do so:

1. From the Simple Form Designer, navigate to Toolbox > CONTROLS > DATA, and drag a Progress Bar Component into the workspace.
2. From the Properties tab for the Progress Bar, establish the Data Name, Min, and Max values under the PROGRESS DATA section.
3. Save the Simple Form, then close via X.
4. From the Decisions Studio, Open the desired Flow, or CREATE a new one via the CREATE FLOW Action on the Global Action Bar.
5. From the Flow Designer, attach a Show Form step from Toolbox > FAVORITE STEPS, to the Start step.
6. From the Properties tab of the Show Form step, select PICK OR CREATE FORM, then PICK the Simple Form containing the Progress Bar. 
7. From the Simple Form step, under Properties > INPUTS, map in the desired value for the Progress Bar's Input Data. If one exists, connect the Outcome path to the End step. 

8. Save, then Debug or Run the Flow. Observe and verify that the Progress Bar is displaying the designated data properly.