![](https://raw.githubusercontent.com/appsmithorg/appsmith/release/static/appsmith_logo_primary.png)

This app is built using Appsmith. Turn any datasource into an internal app in minutes. Appsmith lets you drag-and-drop components to build dashboards, write logic with JavaScript objects and connect to any API, database or GraphQL source.

![](https://raw.githubusercontent.com/appsmithorg/appsmith/release/static/images/integrations.png)

### [Github](https://github.com/appsmithorg/appsmith) • [Docs](https://docs.appsmith.com/?utm_source=github&utm_medium=social&utm_content=appsmith_docs&utm_campaign=null&utm_term=appsmith_docs) • [Community](https://community.appsmith.com/) • [Tutorials](https://github.com/appsmithorg/appsmith/tree/update/readme#tutorials) • [Youtube](https://www.youtube.com/appsmith) • [Discord](https://discord.gg/rBTTVJp)

##### You can visit the application using the below link

###### [![](https://assets.appsmith.com/git-sync/Buttons.svg) ](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3) [![](https://assets.appsmith.com/git-sync/Buttons2.svg)](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3/edit)

---

## Widget Positioning & Spacing

Appsmith uses a **grid-based layout system** for widget positioning.

### Grid Basics

| Property | Description | Default |
|----------|-------------|---------|
| `topRow` | Starting row position (0-based) | - |
| `bottomRow` | Ending row position | - |
| `leftColumn` | Starting column (0-based) | - |
| `rightColumn` | Ending column | - |
| `parentRowSpace` | Pixels per row | 10px |
| `parentColumnSpace` | Pixels per column | ~25px |

The canvas is **64 columns wide**. Each row is **10 pixels tall**.

### Calculating Size

```
Height = (bottomRow - topRow) × 10px
Width  = (rightColumn - leftColumn) × 25px
```

### Visual Example

```
Row 0  ┌────────────────────────────────────────┐
       │     Navigation (topRow: 0)             │
Row 7  └────────────────────────────────────────┘  ← bottomRow: 7
Row 8  ┌────────────────────────────────────────┐  ← topRow: 8 (1 row gap = 10px)
       │     Content Widget                     │
Row 16 └────────────────────────────────────────┘
```

### This Project's Standard

| Widget | topRow | bottomRow | Notes |
|--------|--------|-----------|-------|
| Navigation | 0 | 7 | 70px tall |
| First Content | 8 | 16 | 10px gap below nav |

### Dynamic Height

Widgets with `"dynamicHeight": "AUTO_HEIGHT"` adjust height based on content. The `bottomRow` serves as an initial guide, and `originalTopRow`/`originalBottomRow` store the original placement values.

---

## Adding a New Page

New pages are added via AI agent (Cursor). The agent follows the skills in `.cursor/skills/` to clone the template, create the query, wire the table, add navigation buttons to all pages, and register the page in `application.json`.

### What You Need

1. **Page name** — Full display name in the format `<Section> - <Label>` (e.g. `Pending POs - ALx Pending`).
2. **Section** — Which navigation section the page belongs to (e.g. `Pending POs`, `Sales`). If the section already exists, the button is appended; otherwise a new section is created first.
3. **SQL query** — The exact query the page's table should run.

### Prompt Format

Tell the agent which section, what name, and what query. One sentence is enough:

> Add a new page under the Pending POs section "Pending POs - ALx Pending" with `select * from mpe.get_prototype_po_dashboard_data(array['25502', '27985']::text[])` query

### What the Agent Does

| Step | Detail |
|------|--------|
| Clone template | Copies `Sales - Capacity Planning` page structure (page JSON, widgets, Container1 nav) |
| Create query | Adds `queries/<query_name>/` with `.txt` (raw SQL) and `metadata.json` |
| Wire table | Sets `Table1.tableData` to `{{<query_name>.data}}` |
| Set heading | Updates `Heading.json` text to the page name |
| Generate gitSyncIds | Creates unique `<24-char-hex>_<uuid>` IDs for the page JSON and query metadata (required for Appsmith git sync) |
| Register page | Adds entry to `application.json` `pages` array |
| Add nav button | Creates `Button2Copy<N>.json` on **every** page — highlighted on its own page, white on all others |

### Verifying

After the agent finishes, run `git status` to confirm only the expected files were added/changed:

- `application.json` — one new page entry
- `pages/<New Page>/` — full page directory (page JSON, query, widgets)
- `pages/<Every Other Page>/widgets/Container1/Button2Copy<N>.json` — new nav button on each existing page