29 lines
2.0 KiB
Markdown
29 lines
2.0 KiB
Markdown
---
|
||
name: navigation-button-add
|
||
description: Implements a new Sales navigation button with the existing highlight/default colors. Use when the user asks to add buttons to the nav block, mentions “Units Ordered”, “Units Shipped”, or “Sales” 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/Button*`. Each Sales page reuses the same container; the existing buttons are `Button1` (Capacity Planning), `Button1Copy` (Units Shipped), and `Button1Copy2` (Units Ordered).
|
||
2. **Follow the established color scheme**:
|
||
- The highlighted button 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`, `bottomRow`, and any other placement metadata so it fits below the existing items.
|
||
- Set `buttonColor` to `#ffffff` (inactive) unless the new button replaces the active page; then set its own definition (`on the relevant page`) to `appsmith.theme.colors.backgroundColor`.
|
||
- Ensure `dynamicBindingPathList` stays empty when `buttonColor` is static white; populate it only if the button needs dynamic logic.
|
||
- Point `onClick` to `navigateTo` the new page slug and keep `placement`/`responsiveBehavior` matching other nav buttons.
|
||
4. **Run git status/diff** to verify only the intended files changed before reporting back.
|
||
|
||
## Examples
|
||
|
||
- *Adding “Units Ordered” button*:
|
||
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. Adjust `bottomRow` incrementally so buttons stack vertically.
|
||
|