Managing Progress Component

TABLE OF CONTENTS

• Appearance Settings
• Configuration Settings
• Example: Task Completion Tracker

The Progress Component allows you to visually represent progress or completion status in your application. 

Appearance Settings

The Progress Component includes standard appearance settings, such as size and position, visibility, background, text, padding (for details on standard appearance settings, check the Altering the appearance of an App Studio Component article) and specific styling options for the progress elements: progress background and progress indicator. These settings depend on the selected progress type:

Configuration Settings

The following settings are available for the Progress Component:

Example: Task Completion Tracker

To illustrate the setup of a Progress Component, let’s create a Task Completion Tracker that displays the progress of a project.

To configure the Task Completion Tracker:

1. Add the Progress Component onto the canvas.
2. Set the Configuration. You can choose between a static or dynamic setup depending on your requirements.
   
   Static configuration: Use this setup when the progress value is fixed or predefined.
   

   Value	Enter 75 to represent 75% task completion.
   Type	Select Donut for a circular display.
   Progress Label	Enable the label and set it to display 75% Complete.
   Tooltip Text	Enter Project is 75% completed.

   
   Dynamic configuration: Use this setup to display progress that updates in real-time based on project data.
   

   Value	Use the mustache expression {{completedTasks / totalTasks * 100}} to calculate the percentage of completed tasks dynamically.
   Type	Select Donut for a circular display.
   Progress Label	Enable the label and set it to display {{completedTasks / totalTasks * 100}}% Complete.
   Tooltip Text	Enter {{completedTasks}} of {{totalTasks}} tasks completed.

   
   

3. Customize the Appearance:

   Progress Background	Set the track color to #E0E0E0 and stroke width to 5.
   Progress Indicator Settings	Set the indicator color to #00ACC1FF, stroke width to 5, and line style to Round.

   
   

Add a heading above the Progress Component, such as Project Status, using a Text Component. Include a Button Component labeled View Details to navigate users to more information. The screenshot below shows the Progress Component configured as a Task Completion Tracker.