Progress Circle is used to display the task completion percentage in a compact circular format; content- or context-based filtering can be performed using the SelectBox.
The best way to display progress in a compact and aesthetically pleasing circular format is to use the Progress Circle element. This element visualizes a wide range of processes—from task completion percentages to performance goals—on a circle, offering a modern and minimalist look.
To get started, create the table on the screen from the Tables section in the Data Sources module. Next, click the plus button in the Actions section and select New SQL Action to create your actions. Type InsertTaskCompletion and specify the correct schema name by adding “dbo.” before the table name; test and save it. Repeat the same steps for the GetTaskCompletionStats action, which retrieves and filters the data, and the GetTaskCompletionContextName action, which provides the context names.
To ensure the data loads immediately when the page opens, define the “GetTaskCompletionStats” action as an Initial Action with “Default Empty”; then add the ‘GetTaskCompletionContextName’ action as an Initial Action as well. Drag a Label element onto the page, enter your text, and set the style to “Heading 2” in the Styling panel’s Style field and the layout to “Center” in the Layout field. Add a Panel element below it; in the Styling panel, set the Width and Height values to 275 and 400, set the background to white in the Fill field, and set the Radius value to 40 in the Border field. Drag a Row element into the Panel and set the Desktop field to “1”; add a Vertical Stack inside it, place the Progress Circle, and center it using the Styling Layout field. Drag and drop a SelectBox element below it. Add a two-column Row element to the bottom section of the Panel, set the horizontal and vertical alignment in the Styling Layout section, and add Label elements inside the Row, then duplicate them using Duplicate.
Configure the Percent and Placeholder settings on the Progress Circle. Fill in the Action, Field to Display, and Field to Use as Key fields in the SelectBox’s Options section. Use Add Action to bind the GetTaskCompletionStats action via onChange and define the Selected Context field. Configure the Value fields of the lower Label elements with text and descriptions, respectively.
When you click the Preview button, you’ll be able to easily track the progress of the selected data group with a modern interface.
