---
name: create-new-page
description: Creates a new Sales 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 Sales 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`). 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 → hyphens, e.g. `sales-units-planning`)
  - 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.

## 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. `sales-units-planning`)
- 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. 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).

### 3. 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.

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

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

- **Pages to update**: Every existing Sales page (Sales - Capacity Planning, Sales - Units Shipped, Sales - Units Ordered) **and** the new page.
- **On each page**, in `widgets/Container1/`, add a new button (e.g. copy `Button1Copy2` and name the new file `Button1Copy3` or next available name):
  - `text`: `<New Page Name>` (or a short label that matches the page, e.g. “Units Planning” if the full name is “Sales - Units Planning” — prefer using the **new page name** for consistency unless the user asks for a shorter label).
  - `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 the existing nav buttons: set `topRow` / `bottomRow` so it stacks vertically (e.g. copy from the last button and add 4 rows for the new one).
  - Assign a new `widgetId` and `widgetName` for the new button on each page.
- Update `Container1.json` (or the parent that lists children) so the new button is included in the layout if the DSL is widget-list based.

### 5. 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.

## Summary

| Item | Value |
|------|--------|
| Template | Sales - Capacity Planning |
| New page folder | `pages/<New Page Name>/` |
| Heading text | `<New Page Name>` |
| Nav button text | `<New Page Name>` (or user-specified short label) |
| 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.
- Slug format: lowercase, spaces to hyphens (e.g. `Sales - Units Planning` → `sales-units-planning`).