> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# The Screens panel (Simple)

> In Simple mode the left sidebar shows a Screens panel: a thumbnail list of every screen, plus pinned cards for persistent zones and the data your flow collects.

In [Simple mode](/editor/editing-modes) the left sidebar opens on the **Screens** panel instead of the Advanced layer tree. It is a vertical list of screen thumbnails you reorder by dragging, with two pinned cards at the top for flow-wide settings.

The Screens panel replaces the [layer tree](/editor/multi-step-flows) you use in Advanced. You work with whole screens here, not individual components. To edit what is on a screen, select it and use the [block controllers](/editor/block-controllers) in the properties panel.

<Note>TODO: screenshot of the Simple-mode Screens panel showing the pinned cards and the numbered screen thumbnails.</Note>

## The screen list

Each screen is a card showing its number and a live thumbnail (a scaled, non-interactive render of the screen, loaded as you scroll). When the flow has no screens, the panel reads **"No screens yet"**.

| Action              | How                                                                                                                                                   |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Select** a screen | Click its card. The canvas jumps to that screen.                                                                                                      |
| **Rename**          | Double-click the name, or open the **⋮** menu and choose **Rename**. Press **Enter** to confirm, **Escape** to cancel.                                |
| **Duplicate**       | Open the **⋮** menu and choose **Duplicate**.                                                                                                         |
| **Delete**          | Open the **⋮** menu and choose **Delete**. A confirm dialog titled **"Delete screen?"** warns that the screen "and everything on it will be removed." |
| **Reorder**         | Drag a card up or down. Screens run top to bottom; the linear order is rebuilt automatically.                                                         |
| **Add a screen**    | Click **Add screen** at the bottom of the list.                                                                                                       |

### Adding a screen

**Add screen** appends a new blank screen and then opens the screen-template picker so you can start from a template (Welcome, Question, Input, Loading, and so on) or dismiss it to keep the screen blank. Simple users are nudged to start from a template rather than an empty canvas.

## The Persistent Zones card

Pinned at the top of the panel is a card titled **"Persistent Zones"** with the subtitle **"Navigation bar, footer & overlay"**. Persistent zones are UI that stays on screen across transitions: a progress bar at the top, a Continue button at the bottom, an overlay. See [Persistent zones](/editor/zones) for the full model.

* **Expand the card** to edit the zones. It reveals the same nav bar / footer / overlay tree the Advanced editor uses, so selecting, reordering, and editing zone components works the same way.
* If the flow has no persistent UI yet, the card offers a one-click **"Set up persistent zones"** button to initialize them.

### Hiding a zone on one screen

Each screen card has an eye icon that opens a small popover titled **"Zones on this screen"** ("Hide a persistent zone just for this screen."). It shows a switch per configured zone, labeled **"Show navigation bar here"**, **"Show footer here"**, or **"Show overlay here"**.

Turning a zone off writes a per-screen visibility override. Screens that hide a zone show an amber badge: **"Navigation bar hidden"** for one zone, or **"2 zones hidden"** for several. Everything else about the zone (its content and order) stays shared across the flow; only its visibility on that one screen changes.

## The Data collected card

The second pinned card, **"Data collected"**, is a read-only summary of every [variable](/editor/variables) the flow captures. Its subtitle counts them: **"Nothing captured yet"**, **"1 data point"**, or **"3 data points"**.

This card is read-only on purpose. In Simple mode variables are managed for you (a question block creates and writes its own variable). To add, rename, or delete variables by hand, switch to [Advanced](/editor/editing-modes) and use the [variable manager](/editor/variables).

Each row shows:

* The variable's **name** (its label, or its key if it has no label).
* A **type badge**: `string`, `number`, `boolean`, or a list type such as `List<Text>`, `List<Number>`, `List<Boolean>`.
* Where the value comes from:
  * **"Captured in flow"** for a value a question or input writes.
  * **"From app"** for a value your app passes in through the SDK (it shows the `app.<path>` source).
  * **"Preset value"** for a fixed constant.

When the flow captures nothing, the card shows **"No data collected yet"** with the hint **"Add question or input blocks to capture answers."**

## Logic steps appear locked

A flow can contain [logic nodes](/editor/navigation-and-branching) (`condition`, `assign`, `abTest`, and others) that branch or compute between screens. Simple mode cannot edit these, so it shows them as read-only **"Logic step"** dividers between the screen cards, each with a lock icon and a per-kind label:

| Node kind   | Divider label    |
| ----------- | ---------------- |
| `condition` | **Condition**    |
| `assign`    | **Set variable** |
| `abTest`    | **A/B split**    |
| `api`       | **API call**     |
| `event`     | **Event**        |
| `subflow`   | **Subflow**      |

The tooltip reads **"Logic step (edit in Advanced mode)"**. To edit the logic, switch to Advanced.

## Common mistakes

* **Looking for individual components in the panel.** Simple works at the screen level. Select a screen, then edit its parts with the [block controllers](/editor/block-controllers) on the right.
* **Trying to add a variable from the Data collected card.** It is read-only. Question and input blocks create variables for you; use Advanced for manual variable editing.
* **Hiding a zone everywhere by toggling it on one screen.** The per-screen switch only affects that one screen. To remove a zone from the whole flow, edit the Persistent Zones card.
* **Expecting to edit a Logic step in Simple.** Logic steps are locked in Simple. Switch to Advanced to edit branches and computed assignments.

## Related pages

* [Simple and Advanced modes](/editor/editing-modes)
* [The Element Library (Simple)](/editor/element-library)
* [Block controllers (Simple)](/editor/block-controllers)
* [Persistent zones](/editor/zones)
* [Variables](/editor/variables)
* [Navigation and branching](/editor/navigation-and-branching)