--- title: "Case Progress Bar Control" slug: "case-progres-bar-control" updated: 2025-12-10T22:53:48Z published: 2025-12-10T22:53:48Z canonical: "docs.processmaker.com/case-progres-bar-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # Case Progress Bar Control > [!TIP] > [**Plan Availability:**](https://www.processmaker.com/products/pricing/) ![Professional](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Professional.png)![Enterprise](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Enterprise.png) The **Case Progress Bar** control allows designers to visually display the progress of a case in the Case Summary as it moves through defined stages in a process. By adding this control to the summary screen of a process, users can see where a case currently stands and how much of the process has been completed, providing greater transparency and confidence during execution. ![View Progress Bar in a Case.png](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/View%20Progress%20Bar%20in%20a%20Case.png) #### Key Features - **Visual Progress Indicator**: Displays case progress as a bar or step tracker, making it easy to understand at a glance. - **Stage Awareness**: Reflects the current stage of the case based on how sequence flows are assigned in the process model. - **Dynamic Updates**: Progress is automatically updated as the case moves through tasks and stages. #### Benefits - Improves user awareness of where they are in the process lifecycle. - Reduces confusion in complex or multi-step workflows. - Encourages task completion by making progress visible and measurable. > This control is only available for Display Screens. See [Screen Types](/v1/docs/screens#screen-types). --- ## Add the Case Progress Bar to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to a Screen: 1. Create a new [Display Screen](/v1/docs/screens-types#display-screens) or [edit an existing one](/v1/docs/manage-screens#edit-a-screen). 2. From the **Controls Menu** on the left, expand the **Dashboards** category, and then locate the **Case Progress Bar** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Case Progress Bar Icon.png). 3. Drag and drop the control onto the Screen Builder. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Case Progress Bar in the Screen.png) 4. Publish the Screen. --- ## Set the Request Detail Screen After adding the **Case Progress Bar** to a screen, follow these steps to configure that screen as the **Request Detail Screen**, which displays the case summary: 1. Go to the [**Processes**](/v1/docs/view-edit-and-search-for-processes#view-active-and-inactive-processes) page to view all available processes. 2. Click the **Options** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Ellipsis Icon.png) for the desired process, then select **Configure**. 3. In the **Request Detail Screen** setting, choose the screen that includes the Case Progress Bar control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Request Detail Screen setting.png) 4. Click **Save** to apply the changes. 5. Once configured, the control will automatically display the current case status whenever the case **Summary** is viewed. ![View Progress Bar in a Case.png](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/View%20Progress%20Bar%20in%20a%20Case.png) --- ## Advanced Settings Expand the **Advanced** settings from the Properties Panel on the right to configure the following properties: #### Visibility Rule Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7b6032ac-0ef8-4bc2-89a0-c0e144237a44.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control in this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility Select the device types on which this control will be displayed: - **Desktop:** The control will be displayed only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control will be displayed only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control will be displayed on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/0dfec60d-79cf-426d-aacc-6f737fa8b709.png) #### CSS Selector Name