# Popup Properties Editor

Starting from **ONEWEB version 5.0.21.01**, Page Designer introduces a new **Page Structure Window** on the left panel.\
As part of this enhancement, the **Properties Editor and other supporting panels** that were previously displayed on the left side have been **moved into a popup‑based editor**.

This change improves usability by:

* Keeping the left panel focused on **page structure and hierarchy**
* Reducing visual clutter
* Allowing users to edit properties without losing context

***

### What Is the Popup Properties Editor?

The **Popup Properties Editor** is a floating panel that appears when a user selects a component or opens a related configuration menu.

It functions exactly the same as the previous fixed panels—the only difference is the **location and interaction model**.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FbLTPoNjmQh99Ft54aBdH%2Fimage.png?alt=media&#x26;token=d66c24a7-312e-4206-92b6-20301efc1636" alt=""><figcaption></figcaption></figure>

***

### Panels Available in the Popup Editor

All existing configuration panels are now accessible through the popup editor, including:

* **Component Properties Panel**
* **Add New Component Panel**
* **UI Kit Panel**
* **Image Selector Panel**
* **Icon Selector Panel**
* Other component‑related configuration windows

> **Important:**\
> Apart from the location, **no functionality has changed**. All panels behave exactly the same as in earlier versions.

***

### How Users Interact with the Popup Editor

Users can open the popup editor by:

* Selecting a component on the page
* Selecting a component from the **Page Structure Window**
* Clicking configuration icons (e.g. properties, data binding, style)

The popup editor allows users to:

* Edit component properties
* Configure data binding and actions
* Select images, icons, or UI kits\
  without permanently occupying screen space.

***

### Benefits of the Popup‑Based Design

The Popup Properties Editor provides several advantages:

* Better focus on **component hierarchy** in the left panel
* Cleaner and more organized workspace
* Improved usability for large and complex pages
* Consistent interaction model across different editors

This design makes Page Designer more scalable as pages grow in complexity.

***

### Design Perspective

As part of **Page Designer best practices**:

* Use the **Page Structure Window** for navigation and selection
* Use the **Popup Properties Editor** for focused configuration
* Close popup panels when not needed to reduce distractions
* Rely on structure‑based selection for complex layouts

Together, the Page Structure Window and Popup Properties Editor provide a **clear separation of concerns**:\
**structure on the left, configuration on demand**.


---

# 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/building-apps/ui-page-designer/ux-ui-components/pages/page-features/popup-properties-editor.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.