# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.labii.com/widgets/section-widgets/diagram/stage-flowchart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.