appsmith-statistics-app/.cursor/skills/create-new-page/SKILL.md

---
name: create-new-page
description: Creates a new page by cloning Sales - Capacity Planning, adds a nav button for it on every page, and sets the new page name for the button label and the page Heading. Use when the user asks to add a new page, clone a page, create a page from template, or add a new navigation page.
---

# Create New Page (Clone + Navigation)

Creates a new page from the **Sales - Capacity Planning** template, registers it in the app, adds a navigation button on every page, and uses the **new page name** for both the nav button label and the Heading on the new page.

## Prerequisites

- **New page name**: User must provide the exact display name (e.g. `Sales - Units Planning`, `Pending POs - SLx Pending`). Use it consistently for:
  - Page folder name: `pages/<New Page Name>/`
  - Page JSON filename: `<New Page Name>.json`
  - `unpublishedPage.name` and `unpublishedPage.slug` (slug = lowercase, spaces to hyphens, e.g. `pending-pos-slx-pending`)
  - Heading widget `text` on the new page
  - Nav button `text` on all pages
  - `navigateTo('<New Page Name>', {}, 'SAME_WINDOW')` in the new button's `onClick`
- Follow the **navigation-button-add** skill for button styling and placement.
- If the page belongs to a **new section** (e.g. "Pending POs" section distinct from "Sales"), follow the **navigation-section-add** skill to add the section label on all pages.

## Instructions

### 1. Clone the template page

- **Template**: `pages/Sales - Capacity Planning/`
- **Target**: `pages/<New Page Name>/`
- Copy the entire directory tree (widgets, queries, and the page JSON).
- In the new folder, rename the page file to `<New Page Name>.json` and update inside it:
  - `unpublishedPage.name` -> `<New Page Name>`
  - `unpublishedPage.slug` -> slug form (e.g. `pending-pos-slx-pending`)
- Replace all widget IDs in the new page's JSON files with new unique IDs (e.g. new UUIDs or unique strings) so the new page does not conflict with the template. Update any `parentId` references to the new IDs.
- In every widget JSON under the new page, replace any reference to the old page name or slug with the new page name or slug (e.g. in queries or onClick that might point to the template page).

### 2. Add gitSyncId (CRITICAL)

Appsmith's git sync uses `gitSyncId` to track entities. **Without this field, Appsmith will auto-remove the page and query on the next pull/sync.**

- **Page JSON** (`<New Page Name>.json`): Add `"gitSyncId"` as the **first field** in the root object.
- **Query metadata** (`queries/<query_name>/metadata.json`): Add `"gitSyncId"` as the **first field** in the root object.

**Format**: `"<24-char-hex>_<uuid-v4>"`

Generate unique IDs:
```bash
python3 -c "import uuid; print(uuid.uuid4().hex[:24] + '_' + str(uuid.uuid4()))"
```

Use the **same 24-char hex prefix** for both the page and its queries (they share a creation context), but a **unique UUID suffix** for each.

**Example** (page JSON):
```json
{
  "gitSyncId": "3ac30122d2934ca9bf65e36a_54bc4b88-d468-4faa-bab0-80921aa88795",
  "unpublishedPage": { ... }
}
```

**Example** (query metadata):
```json
{
  "gitSyncId": "3ac30122d2934ca9bf65e36a_da6910cc-4263-496f-ba35-ffc773eddaae",
  "id": "PageName_query_name",
  ...
}
```

### 3. Set the new page's Heading

- In `pages/<New Page Name>/widgets/Heading.json`, set:
  - `"text": "<New Page Name>"`
  so the heading always shows the page name (no dynamic binding; `appsmith.page` is undefined in this app).

### 4. Register the new page in the app

- In `application.json`, add to the `pages` array one entry:
  - `{"id": "<New Page Name>", "isDefault": false}`
- Do not change `isDefault: true` on the existing default page unless the user asks to make the new page default.

### 5. Add the new nav button on every page

Apply the **navigation-button-add** skill:

- **Pages to update**: **All** existing pages **and** the new page.
- **On each page**, in `widgets/Container1/`, add a new button:
  - `text`: short label for the page (e.g. "SLx Pending" for "Pending POs - SLx Pending").
  - `onClick`: `{{navigateTo('<New Page Name>', {}, 'SAME_WINDOW');}}`
  - `buttonColor`:
    - On the **new page only**: `{{appsmith.theme.colors.backgroundColor}}` and add `{"key":"buttonColor"}` to `dynamicBindingPathList`.
    - On all **other** pages: `#ffffff`, and do not add `buttonColor` to `dynamicBindingPathList`.
  - Place the new button below existing nav items within its section. Each button occupies 4 rows (e.g. topRow 22, bottomRow 26).
  - Assign a new unique `widgetId` and `widgetName` for the new button on each page.
  - Set `parentId` to the **Canvas widget ID** inside that page's `Container1.json` (the `widgetId` of the `CANVAS_WIDGET` child). This varies per page -- read `Container1.json` to find it.

### 6. Verify

- Run `git status` / `git diff` and confirm only intended files were added or changed.
- Ensure no duplicate `widgetId` values across pages and that the new page's slug and name are used consistently.
- Confirm `gitSyncId` is present in both the page JSON and every query metadata.

## Summary

| Item | Value |
|------|--------|
| Template | Sales - Capacity Planning |
| New page folder | `pages/<New Page Name>/` |
| gitSyncId | `<24-char-hex>_<uuid-v4>` in page JSON + query metadata |
| Heading text | `<New Page Name>` |
| Nav button text | Short label (e.g. "SLx Pending") |
| Nav button onClick | `navigateTo('<New Page Name>', {}, 'SAME_WINDOW')` |
| Highlight (new page) | `buttonColor`: `{{appsmith.theme.colors.backgroundColor}}` |
| Inactive (other pages) | `buttonColor`: `#ffffff` |

## Reference

- Nav button behavior and layout: follow **navigation-button-add** skill.
- New nav sections: follow **navigation-section-add** skill.
- Slug format: lowercase, spaces to hyphens (e.g. `Pending POs - SLx Pending` -> `pending-pos-slx-pending`).
- `gitSyncId` format: `<24-char-hex>_<uuid-v4>`. Without this, Appsmith auto-removes the entity on sync.