> For the complete documentation index, see [llms.txt](https://docs.labii.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.labii.com/widgets/section-widgets/diagram/stage-flowchart.md).

# Stage Flowchart

## Specs

| Label                     | Value                         |
| ------------------------- | ----------------------------- |
| **Version**               | 2.1.0 (updated on 2022-02-26) |
| **Developer**             | Labii Inc.                    |
| **Type**                  | Section                       |
| **Support Configuration** | Yes                           |

## Overview

The Stage Flowchart section widget visualizes the current status of a Labii record as a sequence of stages. It uses choices from a [Select](/widgets/column-widgets/form/dropdown.md#select) column as the available stages, then highlights the record's current value within the flowchart. Users can review completed and upcoming stages at a glance, and they can click a stage box to update the record status directly. This widget is useful for laboratory workflows that move through defined phases, such as sample intake, testing, review, approval, release, or archiving.

## Use Cases

* **Sample Processing**: Track whether a sample is received, prepared, tested, reviewed, or completed.
* **Experiment Workflow**: Show the current phase of an experiment, assay, or protocol execution record.
* **Review and Approval**: Visualize document, result, or batch review status from draft through final approval.
* **Quality Control**: Track records through inspection, investigation, corrective action, and closure stages.
* **Operational Handoffs**: Help teams see where work sits when responsibility moves between lab, QA, data review, and reporting groups.

## Interface

### Read-only View

The read-only view displays the Select-column options as a flowchart. Each box represents one available stage, and the current record value determines which stages appear completed or pending.

* **Stage Boxes**: Displays each Select option as a stage in the flowchart.
* **Current Stage**: Highlights the record's current value in the configured Select column.
* **Completed Stages**: Shows stages before the current stage in green.
* **Pending Stages**: Shows unfinished stages in grey.
* **Interactive Updates**: Allows users to click a stage box to change the record's current stage.
* **Directional Layout**: Uses the configured direction to display stages in the preferred flow.

{% hint style="info" %}
The flowchart reflects the order of choices in the configured Select column. Arrange the Select options in workflow order before using the widget.
{% endhint %}

<figure><img src="/files/MmTAHyJF9cvm6a8iG2Vx" alt=""><figcaption></figcaption></figure>

### Edit View

The edit view is used to configure which Select column drives the flowchart and how the stages should be arranged.

* **Column**: Select the Select column that contains the stage choices.
* **Direction**: Choose the direction of the flowchart.
* **Submit**: Save the configuration and render the stage flowchart.

## Configuration

### Initial Setup

{% stepper %}
{% step %}
Confirm that the table contains a column using the [Select](/widgets/column-widgets/form/dropdown.md#select) widget.
{% endstep %}

{% step %}
Review the Select choices and place them in the same order as the workflow stages.
{% endstep %}

{% step %}
Add a section with the **Stage Flowchart** widget to the record where you want to show progress.
{% endstep %}

{% step %}
Click **Edit** to open the widget configuration.
{% endstep %}

{% step %}
Choose the Select **Column** and the flowchart **Direction**.
{% endstep %}

{% step %}
Click **Submit** to save the configuration and display the flowchart.
{% endstep %}
{% endstepper %}

### Required Settings

* **Column**: Select the Select column that defines the available stages and stores the record's current stage.

### Optional Settings

* **Direction**: Choose the direction of the chart so the stage order reads naturally for users, such as left-to-right or top-to-bottom.

{% hint style="warning" %}
The Stage Flowchart requires a Select column. Other column types do not provide the ordered choice list needed to build the stage sequence.
{% endhint %}

## Additional Functions

### Change the Current Stage

Click a stage box in the flowchart to update the record's Select-column value. The chart updates to show the new completed and pending stages.

### Track Completed and Pending Work

The widget displays finished stages in green and unfinished stages in grey. This makes it easy to see whether a record is early in the process, waiting for review, or close to completion.

### Reorder Workflow Stages

Update the order of choices in the source Select column when the workflow sequence changes. The Stage Flowchart follows that configured choice order.

### Rename Workflow Stages

Update the labels in the Select column when stage names need to match team terminology, quality process language, or regulatory documentation.

## Best Practices

* Use short, action-oriented stage names such as **Received**, **Prepared**, **Tested**, **Reviewed**, and **Approved**.
* Keep the Select choices in the exact order users should follow during the workflow.
* Avoid using one Select column for unrelated workflows; create separate status columns when records need different stage models.
* Limit stages to the steps that users need to monitor regularly so the flowchart stays easy to scan.
* Review permissions for records where clicking a stage box should be limited to authorized users.
* Use the same stage names across related tables when teams need consistent reporting.

{% hint style="success" %}
For regulated workflows, pair the Stage Flowchart with clear status definitions so users understand what each stage means before changing the record.
{% endhint %}

## Related Widgets

* [**Relation Flowchart**](/widgets/section-widgets/diagram/relation-flowchart.md): Visualize record-to-record relationships rather than progress through Select-column stages.
* [**Mermaid**](/widgets/section-widgets/diagram/mermaid.md): Create custom workflow diagrams manually when the workflow is not stored in a Select column.
* [**Gantt Chart**](/widgets/section-widgets/diagram/gantt-chart.md): Plan task timelines and milestones when schedule duration matters more than stage status.
* [**Record Timeline by ForeignKey**](/widgets/section-widgets/data-display/record-list/record-timeline-by-foreignkey.md): Display related records in chronological order.
* [**Record List by ForeignKey**](/widgets/section-widgets/data-display/record-list/record-list-by-foreignkey.md): Display records connected through ForeignKey or ForeignKeys columns.