Progress

The Progress widget displays a numeric value as a visual progress bar, with configurable color thresholds to highlight different completion levels.

Specs

Label	Value
Version	0.1.0 (updated on 2026-05-04)
Developer	Labii Inc.
Type	Column
Support Configuration	Yes
Support Readonly view	Yes
Support Edit view	Yes
Support Form view	Yes
Support Default value	Yes
Support Import	Yes
Allow multiple	Yes

Overview

The Progress widget displays a numeric value as a visual progress bar, making it easy to communicate completion status at a glance. Users can enter any numeric value representing a percentage, and the widget renders a filled bar proportional to that value. Color thresholds can be configured so the bar automatically changes color as the value crosses defined boundaries, enabling instant visual feedback on whether progress is on track, at risk, or complete.

Use case

1. Use this widget to track the completion percentage of an experiment or protocol step.

2. Use this widget to monitor project milestones and display overall progress toward a goal.

3. Use this widget to visualize sample preparation or manufacturing batch progress across multiple records.

4. Use this widget to highlight critical thresholds in quality control workflows by coloring the bar red when progress falls below an acceptable level.

Configuration

Users can configure color thresholds to change the progress bar color based on the current value. Each threshold entry defines an upper boundary and the color to display when the progress value is at or below that boundary. Thresholds are evaluated in order, and the first matching threshold determines the bar color.

• Value - The upper threshold for this color. When the progress value is less than or equal to this number, the specified color is applied.

• Color - The color to use when the progress value falls into this threshold. Accepts standard color names or hex codes (e.g., red, #ff0000).

Examples

The following configuration displays the bar in red for values up to 30, yellow for values up to 70, and green for values above 70:

[
  { "value": 30, "color": "red" },
  { "value": 70, "color": "yellow" },
  { "value": 100, "color": "green" }
]

Views

See the interface of the widget in the following views.

Readonly view

Readonly view display the values of the column.

The readonly view renders a horizontal progress bar filled to the percentage indicated by the stored value. The numeric percentage is displayed at the right end of the bar. The bar color follows any configured color thresholds.

Edit view

The Edit view is the interface that allows you to modify the value.

The edit view presents a numeric input field pre-filled with the current value. A CLEAR button removes the existing value. Click SUBMIT to save the new value or CANCEL to discard changes.

Form view

The Form view is the field integrated into the add form for collecting values when creating a new record.

The Form view is same as the Edit view.

Data

Each widget in Labii stores data in a unique manner; refer below to understand how data from this widget is stored.

Data format

A numeric value representing the progress percentage (e.g., 60).

Default value

The Default Value field within the column allows you to specify the default value when a record is created.

Default value can be any numeric value (e.g., 0).

Import value

The Import Value is the value you need to include in your Excel table for it to be imported into Labii.

Import value must be a numeric value (e.g., 60).