# Add Widget on Page

After creating the dashboard page, menu, and chart widget configuration, the next step is to **add the widget to the dashboard page layout**.

In the Widget Dashboard model, widgets are associated with pages by inserting configuration records into the database table **`PAGE_WIDGET_PREF`**.\
This table defines **which widget appears on which page**, including its placement region and display order.

***

#### Page–Widget Mapping via Database

To add a chart widget to a dashboard page, insert a new record into the **`PAGE_WIDGET_PREF`** table using the following values.

These values bind the widget preference to the dashboard page and control how the widget is rendered on the page.

***

#### PAGE\_WIDGET\_PREF Table Values

| Column       | Value   |
| ------------ | ------- |
| ID           | `90101` |
| PAGEID       | `1`     |
| WIDGETPREFID | `90101` |
| REGIONNAME   | `1left` |
| ORDERNUM     | `90101` |

***

#### Field Description Overview

* **ID**\
  Unique identifier for the page‑widget mapping entry.
* **PAGEID**\
  Identifier of the dashboard page where the widget will be displayed.\
  This value must match the **ID** defined in the `PAGE` table.
* **WIDGETPREFID**\
  References the widget preference created earlier in the `WIDGET_PREF` table.
* **REGIONNAME**\
  Specifies the layout region where the widget will appear on the page\
  (for example, `1left` indicates the left region of the dashboard layout).
* **ORDERNUM**\
  Determines the display order of the widget within the specified region.

***

#### Verify the Dashboard Page

After inserting the configuration into `PAGE_WIDGET_PREF`, open the dashboard page in a browser to verify the result.

Access the dashboard using the following URL:

```
http://<hostname>:<port>/LightWidget/dashboard.do
```

Once the dashboard page loads:

1. Click the **Training** menu (or the dashboard menu you configured earlier).
2. The dashboard page should display the newly added chart widget.

***

#### Expected Result

The screen should appear similar to the example below, with the chart widget rendered in the configured region of the dashboard page.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FG22Ex4TZdC8iO94h4t9v%2Fimage.png?alt=media&#x26;token=cb60390f-344f-4135-8116-acc3983aff82" alt=""><figcaption></figcaption></figure>

***

#### Summary

By completing this step:

* The widget is successfully linked to the dashboard page
* The dashboard runtime can render the widget in the correct layout region
* The configuration‑driven Widget Dashboard setup is now complete

At this point, the dashboard page includes a fully configured chart widget and is ready for use.


---

# 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/dashboard/widget-dashboard/steps-to-create-a-widget-dashboard/add-widget-on-page.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.