Overview

The Custom Progress Bar widget is a configurable step progress indicator designed for guided processes such as onboarding flows, KYC journeys, multi-step forms, approvals, and order tracking.

The widget dynamically renders steps based on a numeric stage value and labels defined by a Mendix Text Template.

No datasource or microflow is required — the UI automatically updates when the stage attribute changes.

Documentation

Overview

The Custom Progress Bar widget is a configurable step progress indicator designed for guided processes such as onboarding flows, KYC journeys, multi-step forms, approvals, and order tracking.

The widget dynamically renders steps based on a numeric stage value and labels defined by a Mendix Text Template. No datasource or microflow is required — the UI automatically updates when the stage attribute changes.

Features

• Dynamic number of steps

• TextTemplate based labels (supports translations)

• Automatic completed / active / pending state detection

• Customizable colors from Studio Pro

• Live update when attribute changes

• Studio Pro design-time preview supported

• Responsive layout

• Lightweight (no external dependencies)

Configuration

1. Add widget to the page

2. Configure properties:

- Total Steps

- Step Name (Text Template)

- Current Stage (Integer Attribute)

- Active Color

- Completed Color

- Pending Color

Example Usage

Create entity: with attribute -> CurrentStage (Integer)

Bind widget: Total Steps: 4, Step Name: {1},{2},{3},{4} ,Current Stage: Process/CurrentStage

Example Result when CurrentStage = 3:

Step 1 & 2 completed, Step 3 active, Step 4 pending