POS UI Optimization

Odoo 19 | Custom Addon

Optimizes the Point of Sale UI for resource-constrained devices and adds a switchable portrait display mode designed for 6-inch touchscreen terminals.

---

Features

1. Incremental Product Rendering

Prevents low-RAM devices from freezing when the product catalogue is large.

• Only 40 products are rendered on initial load
• More products load automatically as the user scrolls down
• Resets the counter when the search word or category changes

2. Incremental Order Line Rendering

Same approach for the order/cart display.

• Only 20 order lines rendered initially
• Scrolling loads more lines progressively
• Ensures the selected line is always visible (expands count if needed)

3. Portrait Mode (6-inch Display)

A dedicated compact layout for portrait-orientation small screens. Designed for devices like 6-inch Android POS terminals where the standard Odoo two-column layout clutters the screen.

Layout

┌──────────────────────────────────────┐
│  Navbar (compact)                    │
├──────────────────────────────────────┤
│                                      │
│  Active tab pane:                    │
│  Products / Cart / Numpad            │
│                                      │
├──────────────────────────────────────┤
│ TOTAL: Rp X,XX [Checker] [Send] [Pay]│  ← always visible
├──────────────────────────────────────┤
│  [Products]    [Cart]    [Numpad]    │  ← bottom tab bar
└──────────────────────────────────────┘

Key Differences from Standard Mode

Feature	Standard	Portrait
Layout	Two-column (order left, products right)	Single pane with bottom tabs
Product grid	auto-fill minmax(115px)	Fixed 2 columns
Product images	Full aspect ratio	Capped at 90px height
Numpad	Shown inline in left pane	Dedicated "Numpad" tab
Actions (Pay/Send/Checker)	Inside left pane action pad	Always-visible bottom strip
Navbar	Full labels	Compact with smaller padding

Table Checker Button

The Checker button is available in the bottom pay strip in portrait mode. It allows waiters or cashiers to quickly print a basic table checker receipt.

The button is visible only when:

1. The basic_receipt option is enabled in POS settings.
2. The current cashier's role is either waiter or cashier.

The button is disabled when the current order is empty.

Auto-Activation

Portrait mode auto-activates when the browser viewport width is < 400 px on first load. A manual override is always available via the burger menu (☰ → Switch to Portrait/Standard Mode). The choice is saved to localStorage.

Send Button Behavior

The Send button appears only when:

1. The POS is in restaurant mode (module_pos_restaurant = True)
2. At least one Preparation Category is configured in POS → Kitchen Printers settings
3. The current order has unsent changes (nbrOfChanges > 0)
4. The order is not a direct sale / refund

This mirrors Odoo's standard restaurant swapButton logic exactly.

---

Installation

1. Copy the pos_ui_optimization folder into your customaddons directory
2. Restart the Odoo server
3. Go to Apps → search for POS UI Optimization → Install
4. Reload your POS session

Upgrade

./odoo-bin -u pos_ui_optimization -d <your_database>

---

Compatibility

Item	Value
Odoo version	19.0
Depends on	point_of_sale
Compatible with	pos_restaurant, pos_custom_access, pos_kitchen_printer
License	LGPL-3

---

File Structure

pos_ui_optimization/
├── __manifest__.py
├── README.md
├── static/
│   └── src/
│       ├── app/
│       │   ├── components/
│       │   │   ├── navbar/
│       │   │   │   ├── navbar_patch.js       # Display Mode toggle in burger menu
│       │   │   │   └── navbar_patch.xml
│       │   │   └── order_display/
│       │   │       ├── order_display_patch.js # Incremental order line rendering
│       │   │       └── order_display_patch.xml
│       │   ├── screens/
│       │   │   └── product_screen/
│       │   │       ├── portrait_mode_patch.js # Tab state (products/cart/numpad)
│       │   │       ├── portrait_screen.xml    # Portrait layout XML patch
│       │   │       ├── product_screen_patch.js # Incremental product rendering
│       │   │       └── product_screen_patch.xml
│       │   └── services/
│       │       └── portrait_mode.js           # Auto-detect + localStorage service
│       └── scss/
│           └── portrait.scss                  # All portrait CSS (scoped to .pos-portrait)

---

Author

Suherdy Yacob