How to use progress widgets in Connect App Builder.
Using Progress Widgets in Connect
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 point or manually entered in the widget settings.
Click on Widgets in the left menu in App Builder. The second section from the top will show the selection of progress bar widgets to choose from. 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 point 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 points.
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 points.
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 its 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
