# Steps

## Specs

| Label                     | Value                         |
| ------------------------- | ----------------------------- |
| **Version**               | 3.0.0 (updated on 2024-01-01) |
| **Developer**             | Labii Inc.                    |
| **Type**                  | Section                       |
| **Support Configuration** | Yes                           |

## Overview

The Steps widget enables laboratory teams to break complex projects, protocols, and tasks into individual, ordered steps and track their completion in real time. Each step displays its content, a built-in timer, a comment area, and configurable action buttons, giving technicians everything they need to execute a procedure without leaving the record. Steps can be marked as complete (with automatic user and timestamp capture) and optionally verified by a second reviewer, supporting dual-role quality control. Steps can be created manually, imported from `.txt`, `.docx`, or `.md` files, or generated automatically from a protocol name using the built-in AI assistant. The **Run Procedure** mode further enhances guided execution with full-screen step display and text-to-speech narration.

{% embed url="<https://youtu.be/8Uh-A637wr8>" %}

## Use Cases

* **Experimental Protocol Execution**: Load a standard operating procedure (SOP) as a step list and guide bench scientists through each stage, capturing completion timestamps and verifications for regulatory records.
* **Sample Processing Workflows**: Break multi-stage sample handling (receipt, labeling, aliquoting, storage) into discrete steps so technicians can track progress and record step-specific results.
* **Quality Control Checklists**: Enforce dual-role QC by requiring one user to complete each step and a second to verify it before proceeding.
* **Time-Sensitive Procedures**: Attach timers to steps that require precise incubation or reaction times, alerting users when to proceed.
* **Onboarding and Training**: Provide new staff with guided, step-by-step procedures that they work through interactively, with text-to-speech narration in Run Procedure mode.
* **Document Import Efficiency**: Import existing protocol documents (`.txt`, `.docx`, `.md`) directly into the widget to avoid manual re-entry of established procedures.

## Interface

### Read-only View

The read-only view displays a numbered list of all steps. Each row shows the step order number, step content, completion status, verification status, and the recorded user and timestamp for any completed or verified steps. Completed steps have a teal background. Timer countdowns and action buttons are hidden in this view.

* **Completion Indicator**: Completed steps display the completing user's name and timestamp inline.
* **Verification Indicator**: Verified steps display the verifying user's name and timestamp.
* **Step Variables**: If a restricted step has variables recorded, they appear inline below the step content.

### Edit View

The edit view activates all interactive controls for each step.

Each step row in edit view provides the following controls (visibility controlled by configuration):

| Control           | Description                                                                                                      |
| ----------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Edit**          | Edit the step content inline.                                                                                    |
| **Edit action**   | Edit the step's action buttons and timer.                                                                        |
| **Insert**        | Insert a new step directly above the current step.                                                               |
| **Complete**      | Mark the step as complete. Captures the user and timestamp automatically. Step background turns teal.            |
| **Undo**          | Reverse the completion status of a completed step.                                                               |
| **Verify**        | Mark the step as verified (available only after a step is completed). Captures the verifying user and timestamp. |
| **Delete**        | Remove the step.                                                                                                 |
| **Add results**   | Open a dedicated results section linked to this step.                                                            |
| **Add variables** | Record step-specific variables or comments (available when `is_restricted` is enabled for the step).             |
| **Start**         | Start the step timer.                                                                                            |
| **Drag handle**   | Drag to reorder the step within the list.                                                                        |

## Configuration

Configure the Steps widget to show or hide controls based on your workflow requirements.

{% stepper %}
{% step %}
Click the **Configure** button (Widget edit button) at the bottom of the Steps widget to open the settings panel.
{% endstep %}

{% step %}
Enable or disable the controls you need:

* **Should display Edit button**: Show the Edit button on each step row.
* **Should display Insert button**: Show the Insert button to allow inserting steps above existing ones.
* **Should display Complete button**: Show the Complete and Undo buttons for step completion tracking.
* **Should display Verify button**: Show the Verify button (only visible after a step is completed).
* **Should disable actions if step not current**: When checked, users can only interact with the current active step; all other steps are locked until the preceding step is completed.
  {% endstep %}

{% step %}
Click **Save** to apply the configuration.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
For regulated laboratory environments (GLP, GMP), enable **Should display Complete button**, **Should display Verify button**, and **Should disable actions if step not current** together to enforce strict sequential execution with dual-role sign-off.
{% endhint %}

{% hint style="warning" %}
The Verify button only appears on a step after it has been marked as complete. Ensure the Complete button is also enabled when using the Verify feature.
{% endhint %}

## Additional Functions

### Add a New Step

{% stepper %}
{% step %}
Click **Add Step** at the bottom of the step list.
{% endstep %}

{% step %}
Fill in the step fields:

* **Step**: The content or instructions for the step.
* **Action**: Optional action buttons (Name, Icon, Action type, Parameters). See [Flowchart](https://docs.labii.com/widgets/section-widgets/process-management/flowchart) for supported action types.
* **Timer**: Optional countdown timer (Hours, Minutes, Seconds) to indicate how long to wait before executing the next step.
  {% endstep %}

{% step %}
Click **Save** to add the step to the list.
{% endstep %}
{% endstepper %}

### Load Steps from an External File

Import an existing protocol document to populate the step list automatically.

{% stepper %}
{% step %}
Click **Add Step** to open the step creation panel.
{% endstep %}

{% step %}
Drag and drop a `.txt`, `.docx`, or `.md` file into the cloud upload area, or click the cloud icon to browse for a file.
{% endstep %}

{% step %}
All steps detected in the document are loaded into the widget in the order they appear in the source file. Review and adjust as needed.
{% endstep %}
{% endstepper %}

{% hint style="success" %}
Formatting each line or numbered item as a separate step in your source document ensures the cleanest import results.
{% endhint %}

### Generate Steps with AI

Use the built-in AI assistant to generate protocol steps automatically from a protocol name or description.

{% stepper %}
{% step %}
Click **Add Step** to open the step creation panel.
{% endstep %}

{% step %}
Locate the AI input area and enter the name or a brief description of the protocol.
{% endstep %}

{% step %}
Submit the prompt. The AI generates a structured set of steps based on the protocol description.
{% endstep %}

{% step %}
Review the generated steps, edit any that need adjustment, and save.
{% endstep %}
{% endstepper %}

### Run Procedure Mode

Run Procedure mode provides a guided, full-screen execution experience with optional text-to-speech narration — ideal for hands-on bench work.

{% stepper %}
{% step %}
Click the **Run Procedure** button in the Steps widget header.
{% endstep %}

{% step %}
The first step opens in a full-screen modal. Read or listen to the step instructions. Text-to-speech narration starts automatically by default.
{% endstep %}

{% step %}
Perform any step actions available in the modal (Add results, Add variables, Complete, Verify, Start timer).
{% endstep %}

{% step %}
Click **Next** to proceed to the next step, or **Previous** to go back. Use **Goto step** to jump to any specific step.
{% endstep %}

{% step %}
Continue until all steps are complete, then close the modal.
{% endstep %}
{% endstepper %}

**Run Procedure Controls:**

| Control             | Description                                                     |
| ------------------- | --------------------------------------------------------------- |
| **Previous / Next** | Navigate between steps.                                         |
| **Goto step**       | Jump directly to any step by selecting it from a list.          |
| **Read**            | Manually trigger text-to-speech narration for the current step. |
| **Mute**            | Disable automatic text-to-speech narration.                     |
| **Add results**     | Open the results section for the current step.                  |
| **Add variables**   | Record step-specific variables or comments.                     |
| **Complete**        | Mark the step complete with user and timestamp.                 |
| **Undo**            | Reverse completion status.                                      |
| **Verify**          | Verify a completed step.                                        |
| **Start**           | Start the step timer.                                           |

## Best Practices

### Structuring Steps for Clarity

* Write each step as a single, actionable instruction. Avoid combining multiple actions in one step, as this makes completion tracking ambiguous.
* Use the **Timer** field for steps with defined wait periods (e.g., incubations, centrifugation) so users receive a time cue automatically.
* Attach **Actions** to steps that require opening a form, link, or downstream workflow to keep all necessary resources accessible from the step itself.

### Compliance and Audit Readiness

* Enable **Should display Complete button** and **Should display Verify button** for any regulated procedure. Completion and verification records capture user identity and timestamp automatically, satisfying 21 CFR Part 11 and GxP audit requirements.
* Enable **Should disable actions if step not current** to enforce strict sequential execution and prevent out-of-order sign-off.
* Use **Add results** to link a data entry section to the step where observations are recorded, keeping results traceable to the specific step that generated them.

### Efficiency Tips

* For recurring protocols, import steps from a master `.docx` or `.md` file rather than recreating them manually on each new record.
* Use the AI step generator to draft a step list quickly from a protocol name, then refine the output — this is faster than writing from scratch for well-known procedures.
* In Run Procedure mode, enable text-to-speech narration so technicians can follow the protocol hands-free at the bench.

{% hint style="success" %}
Combining the Steps widget with a CKEditor section for background notes and a Data Grid or Files section for raw data creates a complete, self-contained experimental record.
{% endhint %}

### Common Pitfalls to Avoid

* **Avoid** hiding both the Complete and Verify buttons in regulated workflows, as this removes the audit trail for step sign-off.
* **Avoid** placing too many actions on a single step; this can overwhelm users. Instead, split complex steps into discrete sub-steps.
* **Instead**, use the Insert function to add interim steps when a procedure needs to be refined mid-execution.

## Related Widgets

### Complementary Widgets

* [**Flowchart**](https://docs.labii.com/widgets/section-widgets/process-management/flowchart): Presents the same type of process as a visual node diagram with conditional branching and redirect loops. Use the Flowchart widget when the workflow has decision points or non-linear paths. Use Steps when a sequential list view is sufficient.


---

# 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/process-management/steps.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.