How to use progress widgets in Connect App Builder.
There are two progress widgets in Connect. Both progress widgets in Connect show the progress of a value against a defined total and minimum. This value or progress can be connected to a single data value or manually entered in the widget settings.
Progress Bar: Shows the progress of a provided or connected value graphically as a series of rectangles in a horizontal or vertical format.
Progress Circle: Shows the progress of a provided or connected value graphically with a complete circle representing a whole and a partial inner circle indicating the progress.
Click on Widgets in the left menu in App Builder. Click on the progress widget to add it to your app canvas.
You can manually position, scale and rotate the progress widgets using the handles on the widget wireframe or you can change the corresponding values from the right hand properties panel.
The progress widgets can be dynamically driven from a single data value in a data connection. This allows for progress widgets to update automatically from an external data source.
Click on Data in the right hand properties panel to change the values for Minimum, Maximum and Current values. Current Values reflect the current progress.
To connect to a data source click on the lightning bolt icon next to the default value.
The connections manager modal window will appear. This will show you existing connections or allow you to make a new connection. Follow this link to learn more about making data connections to single data values.
Alternatively click in the fields and change the values manually, by clicking on the value then entering in the value you desire.
Select the progress widget in the canvas and the right hand properties panel will appear. The panel displays properties and settings to modify the widget.
Change the colors used in the widget by clicking on the corresponding swatches for fill background and border to alter the colors used in the widget. Altering the Fill color will change the color for the current progress.
Next choose from the color picker that appears or enter in a hex value.
Changing the Background color will change the remaining value, not the entire widget.
Color values can be connected to a single point on a data connection. Follow this link to learn more about making data connections to single data values.
Round the corners of the widget by entering a value in the Corner radius field or clicking on the arrows that appear.
In the Progress Bar widget adjust Border thickness by clicking on the default value and entering a new value or clicking on the arrows that appear.
In the Progress Bar widget click the Divider label to edit a line between the current value and the remaining value in the widget. The divider is a rectangle that can have it’s own width, height and border values.
Optionally the divider can be hidden by clicking the Visible button.
In the Progress Circle widget you can adjust the progress and background radius by clicking on the slider handles and dragging left and right.
Check out what Repeaters in Connect can do!
Learn more about Connecting your Data
Add in Shapes and Text or Photos in Connect to customize your app design.
Support available between 9:00am and 5:00pm (CST-06:00), Monday through Friday
