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>
125 lines
4.9 KiB
Markdown
125 lines
4.9 KiB
Markdown
---
|
|
name: navigation-section-add
|
|
description: Adds a new navigation section (label + first button) to the sidebar on all pages. Use when the user asks to create a new section like "Pending POs", add a section header to navigation, or group pages under a new category separate from "Sales".
|
|
---
|
|
|
|
# Navigation Section Addition
|
|
|
|
Adds a new **section** to the left-side navigation container on **all pages**. A section consists of a bold Text label (e.g. "Pending POs") followed by one or more page buttons. This skill covers adding the section label and first button; additional buttons follow the **navigation-button-add** skill.
|
|
|
|
## Current Sections
|
|
|
|
| Section | Label widget | Buttons | Row range |
|
|
|---------|-------------|---------|-----------|
|
|
| Sales | `Text1` | `Button1`, `Button1Copy`, `Button1Copy2` | 0-16 |
|
|
| Pending POs | `Text2` | `Button2` | 18-26 |
|
|
|
|
## Instructions
|
|
|
|
### 1. Determine row placement
|
|
|
|
Sections are separated by a **2-row gap**. Find the last widget's `bottomRow` in the current navigation, add 2 for the gap, then place:
|
|
- **Section label** (Text widget): 4 rows (e.g. topRow 18, bottomRow 22)
|
|
- **First button**: 4 rows immediately after (e.g. topRow 22, bottomRow 26)
|
|
|
|
### 2. Choose widget names
|
|
|
|
Follow the naming sequence based on existing sections:
|
|
- First section: `Text1`, `Button1` / `Button1Copy` / `Button1Copy2`
|
|
- Second section: `Text2`, `Button2` / `Button2Copy` / ...
|
|
- Third section: `Text3`, `Button3` / `Button3Copy` / ...
|
|
|
|
### 3. Create the Text label widget on ALL pages
|
|
|
|
Add a `Text<N>.json` file in `pages/<each page>/widgets/Container1/` with:
|
|
|
|
```json
|
|
{
|
|
"animateLoading": true,
|
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
|
"bottomRow": <calculated>,
|
|
"dynamicBindingPathList": [
|
|
{"key": "truncateButtonColor"},
|
|
{"key": "fontFamily"},
|
|
{"key": "borderRadius"}
|
|
],
|
|
"dynamicHeight": "AUTO_HEIGHT",
|
|
"dynamicTriggerPathList": [],
|
|
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
|
|
"fontSize": "1rem",
|
|
"fontStyle": "BOLD",
|
|
"isLoading": false,
|
|
"isVisible": true,
|
|
"key": "<unique-key>",
|
|
"leftColumn": 0,
|
|
"maxDynamicHeight": 9000,
|
|
"minDynamicHeight": 4,
|
|
"minWidth": 450,
|
|
"mobileBottomRow": <calculated>,
|
|
"mobileLeftColumn": 10,
|
|
"mobileRightColumn": 26,
|
|
"mobileTopRow": <calculated>,
|
|
"needsErrorInfo": false,
|
|
"originalBottomRow": <calculated>,
|
|
"originalTopRow": <calculated>,
|
|
"overflow": "NONE",
|
|
"parentColumnSpace": 3.841796875,
|
|
"parentId": "<Canvas widgetId from Container1.json>",
|
|
"parentRowSpace": 10,
|
|
"renderMode": "CANVAS",
|
|
"responsiveBehavior": "fill",
|
|
"rightColumn": 64,
|
|
"shouldTruncate": false,
|
|
"text": "<Section Name>",
|
|
"textAlign": "LEFT",
|
|
"textColor": "#231F20",
|
|
"topRow": <calculated>,
|
|
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
|
|
"type": "TEXT_WIDGET",
|
|
"version": 1,
|
|
"widgetId": "<unique per page>",
|
|
"widgetName": "Text<N>"
|
|
}
|
|
```
|
|
|
|
### 4. Create the first button on ALL pages
|
|
|
|
Follow the **navigation-button-add** skill to add `Button<N>.json`. Key points:
|
|
- On the page the button navigates to: `buttonColor` = `{{appsmith.theme.colors.backgroundColor}}` (highlighted), with `dynamicBindingPathList: [{"key": "buttonColor"}]`.
|
|
- On all other pages: `buttonColor` = `#ffffff` (inactive), with empty `dynamicBindingPathList`.
|
|
- `topRow` = label's `bottomRow`, `bottomRow` = topRow + 4.
|
|
|
|
### 5. parentId -- CRITICAL
|
|
|
|
Each page's Container1 has a **different Canvas widget ID**. The `parentId` for all nav widgets must match the `widgetId` of the `CANVAS_WIDGET` child inside that page's `Container1.json`.
|
|
|
|
**Always read** `pages/<PageName>/widgets/Container1/Container1.json` to find the Canvas `widgetId` before creating widgets. Do NOT copy parentId from another page.
|
|
|
|
Example Canvas widget IDs (verify these are still current):
|
|
- Sales - Capacity Planning: `x3pc17vp6q`
|
|
- Sales - Units Shipped: `wj6fxg5wpg`
|
|
- Sales - Units Ordered: `wj6fxg5wpg`
|
|
|
|
### 6. Widget IDs -- must be unique
|
|
|
|
Every widget across all pages must have a **unique `widgetId`**. Use a short, unique string per widget per page. A practical pattern: `<page-prefix><widget-abbrev>` (e.g. `cp1txtpndpo` for Capacity Planning's "Pending POs" text label).
|
|
|
|
### 7. Apply to ALL pages
|
|
|
|
The section label and button must appear on **every page in the app** -- not just pages within the new section. This ensures the full navigation is visible regardless of which page the user is on.
|
|
|
|
## Example: Adding "Pending POs" section
|
|
|
|
Files created on each page's `widgets/Container1/`:
|
|
- `Text2.json` -- "Pending POs" label, topRow 18, bottomRow 22
|
|
- `Button2.json` -- "SLx Pending" button, topRow 22, bottomRow 26
|
|
|
|
On `Pending POs - SLx Pending` page: Button2 is highlighted.
|
|
On all Sales pages: Button2 is white/inactive.
|
|
|
|
## Reference
|
|
|
|
- Button styling and highlight pattern: **navigation-button-add** skill.
|
|
- Creating the page itself: **create-new-page** skill.
|
|
- Row layout: 4 rows per widget, 2-row gap between sections.
|