# Page Structure Window
Starting from **ONEWEB version 5.0.21.01**, Page Designer introduces the **Page Structure Window**, a visual panel displayed on the **left side** of the designer.\
This window provides a **hierarchical view of all components** on the page and serves as an essential tool for understanding, navigating, and managing complex page layouts.
The Page Structure Window improves productivity by allowing designers to interact with page elements **without relying solely on the visual canvas**.
***
### What the Page Structure Window Shows
The Page Structure Window displays:
* **Component hierarchy** (parent–child relationships)
* Nested layout elements (containers, rows, columns, components)
* **Page actions** configured on components
* **Data bindings** and mappings attached to components
This hierarchical view makes it easier to understand how components are organized within the page.
***
### Key Capabilities
#### Navigate Complex Layouts
* Quickly locate deeply nested components
* Expand and collapse sections of the component tree
* Understand layout structure at a glance
***
#### Select Components for Editing
* Click any element in the Page Structure Window to select it
* The selected component’s **properties panel** opens automatically
* Useful when components overlap or are difficult to select directly on the canvas
***
#### Drag and Drop Components
Users can:
* Drag new components into the page using the Structure Window
* Reorder existing components
* Move components between different containers
This provides a more precise way to manage layout compared to canvas‑only editing.
***
#### View Actions and Data Mapping
The Page Structure Window also indicates:
* Actions configured on components (e.g. load events, clicks)
* Data connections (State, Microflow, Local Database)
This is especially helpful during debugging and review of complex pages.
***
### When to Use the Page Structure Window
The Page Structure Window is particularly valuable when:
* Designing **large or complex pages**
* Working with deeply nested components
* Reviewing page logic and bindings
* Refactoring layout or structure
* Collaborating with other developers/designers
***
### Design Perspective
As part of **Page Designer best practices**:
* Use the Page Structure Window as the **primary navigation tool** for complex pages
* Prefer structure‑based selection over canvas selection for precision
* Regularly review hierarchy to avoid excessive nesting
* Use it to verify actions and data bindings visually
The Page Structure Window helps ensure pages remain **clean, understandable, and maintainable**.
---
# 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.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/page-features/page-structure-window.md?ask=
```
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.
