(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

User Manual for Dynamic Progress Bar Component

The Dynamic Progress Bar component provides a visual representation of progress toward completion of a task or process. It displays a horizontal bar that fills from left to right as progress increases, supporting customizable colors, thresholds, and state indicators. This component is ideal for showing task completion, loading states, or any process with a measurable percentage of completion.

Properties

General Properties

  • displayName - Sets the display name of the component shown in the structure panel. For example, "Upload Progress" allows for easy identification of this progress bar's purpose in the component structure.

  • visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "userOnlyPolicy" restricts the progress bar to authenticated users.

Visual Properties

  • titleTranslations - Sets the title text displayed above the progress bar with support for multiple languages. For example, {"en-US": "File Upload Progress", "de-DE": "Datei-Upload-Fortschritt"} ensures proper localization of the header text.

  • errorMessage - Specifies the message to display when the progress bar enters an error state. For example, "Upload failed due to network error" provides users with clear information about what went wrong.

  • paddingClass - Configures spacing around the progress bar using CSS classes. For example, "p-3" adds medium padding around the progress bar for better visual spacing within its container.

Event Actions

  • events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations like loading initial progress value.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations.

Testing Hooks

  • id - Specifies a unique identifier for the component used for programmatic access. For example, "fileUploadProgressBar" enables targeted manipulation of this specific progress bar.

  • dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "file-upload-progress" allows test scripts to reliably locate this component.

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this progress bar can be highlighted during guided tours of the application.

  • guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Progress Indicator", "de-DE": "Fortschrittsanzeige"} provides localized titles for the hotspot.

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This bar shows your current progress", "de-DE": "Dieser Balken zeigt Ihren aktuellen Fortschritt"} provides localized descriptions.

Component Actions

The Dynamic Progress Bar component exposes several methods that can be called from other components or through dynamic actions:

updateProgress(progress: number)

Updates the current progress value displayed by the bar.

  • progress - A number between 0 and 100 representing the completion percentage. For example, calling updateProgress(75) would set the progress bar to 75% filled.

setInvalid(errorMessage: string)

Sets the progress bar to an invalid/error state with a custom message.

  • errorMessage - The error message to display. For example, calling setInvalid("Connection timeout") would show the progress bar in an error state with the specified message.

setValid()

Resets the progress bar from an error state back to a normal state.

Technical Documentation for Backend Developers

Progress Updates

The progress bar typically receives updates from frontend processes, but it can also be updated based on server-sent events or polling API endpoints that return progress information.

Example progress update format from an API:

{
  "progress": 65,
  "status": "processing",
  "remainingTime": "2 minutes"
}

The actual progress value (0-100) would be extracted from this response and used to update the progress bar.

  • No labels