|
| 1 | +--- |
| 2 | +name: openspp-ui |
| 3 | +description: |
| 4 | + OpenSPP UI design patterns for Odoo 19 views. Use when creating or modifying forms, |
| 5 | + lists, kanban, dashboards, or search views in spp_* modules. |
| 6 | +--- |
| 7 | + |
| 8 | +# OpenSPP UI Design |
| 9 | + |
| 10 | +Enforce consistent UI for OpenSPP's social protection platform on Odoo 19. |
| 11 | + |
| 12 | +## Design Personality |
| 13 | + |
| 14 | +OpenSPP serves **government agencies and NGOs**. The UI must convey: |
| 15 | + |
| 16 | +- **Trust** - Government-grade reliability, no flashy effects |
| 17 | +- **Clarity** - Dense but organized, scannable information |
| 18 | +- **Accessibility** - Works for field officers on varying devices |
| 19 | +- **Efficiency** - Power users need speed, not hand-holding |
| 20 | + |
| 21 | +## Before Creating a View |
| 22 | + |
| 23 | +**Ask: What's the user's task?** |
| 24 | + |
| 25 | +| Task Type | Layout | Key Features | |
| 26 | +| --------------- | ---------------------- | ----------------------------------- | |
| 27 | +| Data Entry | Multi-column, editable | Inline lists, minimal readonly | |
| 28 | +| Review/Approval | Status prominent | Ribbons, history tab, readonly feel | |
| 29 | +| Dashboard | KPI cards | Clickable stats, visual counts | |
| 30 | +| Configuration | Grouped settings | Heavy help text, toggles | |
| 31 | + |
| 32 | +## State & Color Vocabulary |
| 33 | + |
| 34 | +Use consistently across all modules: |
| 35 | + |
| 36 | +| State | List Decoration | Badge Class | Icon | |
| 37 | +| --------- | -------------------- | ------------------- | ------------ | |
| 38 | +| Draft | `decoration-muted` | `text-bg-secondary` | `fa-pencil` | |
| 39 | +| Pending | `decoration-warning` | `text-bg-warning` | `fa-clock-o` | |
| 40 | +| Approved | `decoration-success` | `text-bg-success` | `fa-check` | |
| 41 | +| Rejected | `decoration-danger` | `text-bg-danger` | `fa-times` | |
| 42 | +| Cancelled | `decoration-muted` | `text-bg-secondary` | `fa-ban` | |
| 43 | + |
| 44 | +## Standard Form Structure |
| 45 | + |
| 46 | +```xml |
| 47 | +<form> |
| 48 | + <header> |
| 49 | + <button |
| 50 | + name="action_submit" |
| 51 | + string="Submit" |
| 52 | + type="object" |
| 53 | + class="btn-primary" |
| 54 | + invisible="state != 'draft'" |
| 55 | + /> |
| 56 | + <field name="state" widget="statusbar" statusbar_visible="draft,pending,approved" /> |
| 57 | + </header> |
| 58 | + <sheet> |
| 59 | + <widget |
| 60 | + name="web_ribbon" |
| 61 | + title="Approved" |
| 62 | + invisible="state != 'approved'" |
| 63 | + bg_color="text-bg-success" |
| 64 | + /> |
| 65 | + <div class="oe_button_box" name="button_box" /> |
| 66 | + <div class="oe_title"> |
| 67 | + <h1> |
| 68 | + <field name="name" placeholder="Name" /> |
| 69 | + </h1> |
| 70 | + </div> |
| 71 | + <group col="2"> |
| 72 | + <group name="left_section">...</group> |
| 73 | + <group name="right_section">...</group> |
| 74 | + </group> |
| 75 | + <notebook> |
| 76 | + <page name="details" string="Details">...</page> |
| 77 | + </notebook> |
| 78 | + </sheet> |
| 79 | + <chatter /> |
| 80 | +</form> |
| 81 | +``` |
| 82 | + |
| 83 | +**Key rules:** |
| 84 | + |
| 85 | +- Header: only buttons + statusbar |
| 86 | +- Sheet: ribbon → button_box → title → groups → notebook |
| 87 | +- Always name your groups for extensibility |
| 88 | + |
| 89 | +## Anti-Patterns |
| 90 | + |
| 91 | +### Odoo 19 Gotchas |
| 92 | + |
| 93 | +```xml |
| 94 | +<!-- WRONG --> <xpath expr="//div[@class='oe_title']" ...> |
| 95 | +<!-- RIGHT --> <xpath expr="//div[hasclass('oe_title')]" ...> |
| 96 | + |
| 97 | +<!-- WRONG --> <group string="Group By"> <!-- in search view --> |
| 98 | +<!-- RIGHT --> <group> |
| 99 | +``` |
| 100 | + |
| 101 | +```python |
| 102 | +# WRONG: Tuple syntax |
| 103 | +partner.write({'child_ids': [(0, 0, {'name': 'New'})]}) |
| 104 | + |
| 105 | +# RIGHT: Command API |
| 106 | +from odoo import Command |
| 107 | +partner.write({'child_ids': [Command.create({'name': 'New'})]}) |
| 108 | +``` |
| 109 | + |
| 110 | +### OpenSPP Mistakes |
| 111 | + |
| 112 | +- Editable fields in `<header>` → use tabs |
| 113 | +- Positional XPath `//page[1]` → use named elements |
| 114 | +- Forms without named groups → breaks inheritance |
| 115 | + |
| 116 | +## Detailed Patterns |
| 117 | + |
| 118 | +For comprehensive guidelines, see [UI Design Principles](docs/principles/ui-design.md): |
| 119 | + |
| 120 | +- Multi-column layouts |
| 121 | +- Extension points and XPath targets |
| 122 | +- Widget selection guide |
| 123 | +- Dashboard KPI patterns |
| 124 | +- Search and list view patterns |
0 commit comments