Adam Pitel
b5e74cebb7
Automates the production manager's manual workflow of checking xTuple WO Schedule + Kit Material Shortage for FA department work orders. Two tabs: WO Shortages (detail per WO + shortage line with customer name, YYYY-MM-DD dates) and Critical Parts (aggregated parts blocking near-term shipments with QOH from MPE warehouse). Nav button added to all pages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
3.5 KiB
Markdown
55 lines
3.5 KiB
Markdown
---
|
|
name: navigation-button-add
|
|
description: Implements a new navigation button with the existing highlight/default colors. Use when the user asks to add buttons to the nav block, mentions page navigation, or instructs to keep the highlight behavior consistent with the latest change.
|
|
---
|
|
|
|
# Navigation Button Addition
|
|
|
|
## Instructions
|
|
|
|
1. **Understand the current navigation canvas** by checking `pages/*/widgets/Container1/`. Each page reuses the same container structure. The navigation is organized into **sections**, each with a Text label and one or more buttons:
|
|
- **Sales** section: `Text1` (label), `Button1` (Capacity Planning), `Button1Copy` (Units Shipped), `Button1Copy2` (Units Ordered)
|
|
- **Pending POs** section: `Text2` (label), `Button2` (SLx Pending)
|
|
- Future sections follow the same pattern (`Text3`/`Button3`, etc.)
|
|
2. **Follow the established color scheme**:
|
|
- The highlighted button (current page) uses `appsmith.theme.colors.backgroundColor`.
|
|
- The inactive buttons use `#ffffff`.
|
|
3. **When adding a new navigation button**:
|
|
- Copy one of the existing `Button*` definitions, adjusting `text`, `onClick`, `widgetId`, `widgetName`, `topRow`, `bottomRow`, and any other placement metadata so it fits below the existing items in its section.
|
|
- Set `buttonColor` to `#ffffff` (inactive) unless the button is on its own page; then set its definition to `appsmith.theme.colors.backgroundColor` with `dynamicBindingPathList: [{"key": "buttonColor"}]`.
|
|
- Ensure `dynamicBindingPathList` stays empty when `buttonColor` is static white.
|
|
- Point `onClick` to `navigateTo('<Page Name>', {}, 'SAME_WINDOW')` and keep `placement`/`responsiveBehavior` matching other nav buttons.
|
|
- Set `parentId` to the **Canvas widget ID** inside that page's `Container1.json` (the `widgetId` of the `CANVAS_WIDGET` child). This varies per page -- always read `Container1.json` to find the correct value.
|
|
4. **Add the button on ALL pages** (not just pages in the same section). Every page gets the full navigation.
|
|
5. **If adding a button to a new section**, follow the **navigation-section-add** skill first to create the section label.
|
|
6. **Run git status/diff** to verify only the intended files changed before reporting back.
|
|
|
|
## Row Layout
|
|
|
|
Each widget occupies 4 rows. Sections are separated by a 2-row gap:
|
|
|
|
| Widget | topRow | bottomRow |
|
|
|--------|--------|-----------|
|
|
| Text1 "Sales" | 0 | 4 |
|
|
| Button1 "Capacity Planning" | 4 | 8 |
|
|
| Button1Copy "Units Shipped" | 8 | 12 |
|
|
| Button1Copy2 "Units Ordered" | 12 | 16 |
|
|
| *(2-row gap)* | 16 | 18 |
|
|
| Text2 "Pending POs" | 18 | 22 |
|
|
| Button2 "SLx Pending" | 22 | 26 |
|
|
|
|
When adding a new button within a section, increment from the last button's `bottomRow` by 4. When adding a new section after the last one, add 2 rows gap, then 4 for the label, then 4 for each button.
|
|
|
|
## Examples
|
|
|
|
- *Adding "Units Ordered" button to Sales section*:
|
|
1. Copy `Button1Copy` (Units Shipped) in each page's `Container1`.
|
|
2. Set `text` to "Units Ordered", `onClick` to `navigateTo('Sales - Units Ordered', {}, 'SAME_WINDOW');`.
|
|
3. Assign `buttonColor` to `#ffffff` for inactive cases and to `appsmith.theme.colors.backgroundColor` inside the `Sales - Units Ordered` page definition for highlight.
|
|
4. Set `topRow: 12`, `bottomRow: 16` (next slot after Units Shipped).
|
|
|
|
- *Adding a second button to Pending POs section*:
|
|
1. Create `Button2Copy.json` in each page's `Container1`.
|
|
2. Set `topRow: 26`, `bottomRow: 30` (next slot after SLx Pending at 22-26).
|
|
3. Follow the same highlight/inactive pattern.
|