# Component Extension

**Component Extensions** allow developers to extend ONEWEB **Page Designer** with **custom, user‑defined UI components**.\
This feature enables teams to introduce new UI elements beyond the default component set, similar to how the **ChartJS extension** works—but with the flexibility for **anyone to develop and package their own component**.

Key characteristics:

* Extensions are packaged as `.pgx` files
* Extensions can be **web‑specific** or **mobile‑specific**
* Once installed, components appear as native elements inside Page Designer

Component Extensions are ideal for:

* Custom tables or editors
* Specialized visual components
* Industry‑specific UI elements
* Reusable advanced components not available by default

***

### Add a Component Extension to an Application

#### Step 1: Open Extension Settings

1. Open the **Application** in Page Designer
2. Go to the **SETTINGS** tab

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FEXFGIezuWTNybJbg8JoP%2Fimage.png?alt=media&#x26;token=04a30cac-cc54-458c-841a-d35e7acd3df0" alt=""><figcaption></figcaption></figure>

***

#### Step 2: Open Extensions Manager

1. Click **EXTENSIONS**
2. Click **Add more extensions**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FRQfNEXb8oyMJXmgIbozJ%2Fimage.png?alt=media&#x26;token=d2e79a6e-f883-4bfa-bfdb-177a426d539e" alt=""><figcaption></figcaption></figure>

***

#### Step 3: Upload Extension Package

1. Drag & drop your **`.pgx` extension file**\
   **or**
2. Click **Choose File** and browse for the extension file

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FMBBx8fXNWo67zuX1kqnS%2Fimage.png?alt=media&#x26;token=3e3d83bc-4ef1-4e49-b713-e6b5cb877a20" alt=""><figcaption></figcaption></figure>

***

#### Step 4: Install the Extension

1. Click **Install** for the uploaded extension\
   \&#xNAN;*(In this example, a **Table Editor** extension is installed)*
2. Close the installation window

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FBR1OhakFohC1zLJDVq0n%2Fimage.png?alt=media&#x26;token=997753ae-7c3a-41f1-8954-57f413fcd44d" alt=""><figcaption></figcaption></figure>

Ensure the extension is **enabled** for the application.

***

### Use Component Extension on a Page

#### Step 5: Add Extension Component to Page

1. Open the page where you want to use the component
2. Locate the extension’s panel (e.g. **Table Editor**)
3. Drag and drop the extension component onto the design canvas

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F73LH0nFSmnzfDPzvBxFR%2Fimage.png?alt=media&#x26;token=2f285548-4210-4f98-baaa-dc6a33e36e9d" alt=""><figcaption></figcaption></figure>

***

#### Step 6: Configure Component Properties

1. Select the extension component
2. Open the **Properties** tab
3. Configure settings specific to the component

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F3Ti1EGMO3lHwIoW4FwFD%2Fimage.png?alt=media&#x26;token=03c900e7-da52-4c20-8dbc-f8dff1fbfb1a" alt=""><figcaption></figcaption></figure>

***

#### Step 7: Add or Configure Data

Depending on the extension, users can:

* **Add static data**
* Configure display or behavior options

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FHWb6AltZkyI2zUNsfPsF%2Fimage.png?alt=media&#x26;token=ca066e97-43a8-4a56-9012-6b2adc5e4351" alt=""><figcaption></figcaption></figure>

***

#### Step 8: Bind Dynamic Data from Microflow

Many Component Extensions support **dynamic data binding**.

1. Click the **Connect to Data** icon
2. Bind the component to **Microflow output**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FT3Fju7acgKXM2iPhYCfw%2Fimage.png?alt=media&#x26;token=69378908-e9a1-43a1-a986-b83ef6e7a9e1" alt=""><figcaption></figcaption></figure>

***

### Build and Preview

1. Save the page
2. Build the application
3. Run the page to view **real‑time data from Microflow output**

The extension component behaves like a native Page Designer element at runtime.

***

### Design Perspective

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

* Use Component Extensions for **reusable, complex UI needs**
* Clearly document required data structures for each extension
* Test extensions across supported platforms (Web / Mobile)
* Prefer extensions over heavy custom JavaScript
* Manage extension versions carefully

Component Extensions make ONEWEB **highly extensible**, enabling teams to build tailored UI experiences while maintaining low‑code productivity.


---

# 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/component-extension.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.