Get in touch
⌘K

Odoo Web Framework

Modern web platform with OWL framework, diverse views system, and flexible component architecture

OWL Framework
Views System
Widgets
Client Architecture
UI Components

Web Framework Overview

Odoo Web Framework is a powerful client-side platform built on OWL (Odoo Web Library), providing modern component-based architecture for user interface development.

The framework fully supports various view types (form, list, kanban, calendar, pivot, graph), custom widgets, action manager, and webclient architecture for building highly interactive web applications.

Key points

  • • OWL Framework: Component-based architecture with reactive state management

  • • Views System: Form, List, Kanban, Calendar, Pivot, Graph, Map, Gantt views

  • • Widgets: Field widgets, relational widgets, custom widgets

  • • Action Manager: Manages actions, window actions, server actions

  • • Control Panel: Search panel, filters, group by, favorites

  • • Webclient: Single-page application architecture

  • • RPC Framework: Client-server communication with JSON-RPC

  • • Asset Management: JS/CSS bundling, lazy loading

OWL Components Architecture

OWL (Odoo Web Library) is the modern component framework replacing old Widgets:

Key points

  • • Component Class: Inherit from owl.Component with lifecycle hooks

  • • Template System: XML templates with QWeb syntax

  • • Reactive State: useState, useRef hooks for state management

  • • Props & Slots: Pass data and content between components

  • • Event System: Trigger and handle events between components

  • • Services: Dependency injection with useService hook

  • • Hooks: useEffect, useBus, useAutofocus, custom hooks

  • • Concurrent Mode: Async rendering with fiber architecture

Views System

View Types in Odoo

View TypePurposeUse Cases
Form ViewDisplay and edit a single recordCustomer details, orders, products
List ViewDisplay records in table formatInvoice list, customers, products
Kanban ViewDisplay records as cardsSales pipeline, project management, tasks
Calendar ViewDisplay records in calendarMeetings, events, deadlines
Pivot ViewMulti-dimensional data analysisSales reports, financial analysis
Graph ViewData visualization chartsRevenue charts, sales trends
Gantt ViewTimeline and schedulingProject schedule, resource allocation
Map ViewDisplay records on mapCustomer locations, delivery routes

Field Widgets

Widgets for displaying and editing different field types:

Key points

  • • Basic Widgets: char, text, integer, float, boolean, date, datetime

  • • Relational Widgets: many2one, one2many, many2many with search, create

  • • Selection Widget: Dropdown, radio buttons for selection fields

  • • Binary Widgets: File upload, image, PDF viewer

  • • Monetary Widget: Display currency with symbol

  • • HTML Widget: Rich text editor with formatting

  • • Badge Widget: Display tags, labels, status

  • • Progress Bar: Display percentage progress

  • • Priority Widget: Star rating, priority selection

  • • Statusbar Widget: Workflow states with clickable stages

Action Manager

Manages and executes various action types in Odoo:

Key points

  • • Window Actions: Open views (form, list, kanban) with context and domain

  • • Server Actions: Execute Python code on server

  • • URL Actions: Open external or internal URLs

  • • Client Actions: Custom JavaScript actions

  • • Report Actions: Generate and download PDF/Excel reports

  • • Action Stack: Breadcrumb navigation with history

  • • Action Context: Pass data between actions

  • • Action Flags: Control view behavior (create, edit, delete)

Control Panel & Search

Control panel provides search, filters, and navigation:

Key points

  • • Search Bar: Full-text search with autocomplete

  • • Filters: Pre-defined filters with domain expressions

  • • Group By: Group records by fields

  • • Favorites: Save search queries and share with team

  • • View Switcher: Switch between views

  • • Pager: Pagination with page size control

  • • Action Buttons: Create, import, export, archive

  • • Custom Filters: User-defined filters with operators

RPC Framework

Client-server communication with JSON-RPC protocol:

Key points

  • • RPC Service: Call server methods from JavaScript

  • • ORM Methods: search, read, write, create, unlink

  • • Custom Methods: Call custom Python methods

  • • Batch Requests: Combine multiple RPC calls

  • • Error Handling: Exception handling and user feedback

  • • Loading States: Spinner, skeleton screens

  • • Caching: Client-side cache for performance

  • • Offline Support: Queue requests when offline

Webclient Architecture

Single-page application architecture of Odoo:

Key points

  • • App Root: Main application component

  • • Service Container: Dependency injection container

  • • Router: URL routing with hash-based navigation

  • • Menu Service: Dynamic menu loading

  • • Notification Service: Toast notifications, dialogs

  • • User Service: Current user info and permissions

  • • Company Service: Multi-company support

  • • Session Service: Session management and authentication

Customizing Views

Steps

  • 1. Inherit View: Use xpath to modify existing views. Example: add new field to form view, hide field, change widget.

  • 2. Custom Widget: Create new widget by extending AbstractField. Implement _render() for display, _setValue() for updates.

  • 3. Custom View: Create new view type by extending AbstractView. Implement Controller, Renderer, Model.

  • 4. View Decorations: Use decoration-* attributes for dynamic styling. Example: decoration-danger="state == 'cancel'".

  • 5. Invisible/Readonly: Conditional display and editing with invisible="context.get('hide_field')" or readonly="state == 'done'".

  • 6. Domain Filters: Filter displayed records with domain="[('state', '=', 'draft')]".

  • 7. Context Passing: Pass context between views with context="{'default_partner_id': partner_id}".

Best Practices

Key points

  • • Component Design: Create small, reusable, single responsibility components

  • • State Management: Use useState for local state, services for global state

  • • Performance: Lazy load components, virtualize long lists, debounce search

  • • Accessibility: Use semantic HTML, ARIA labels, keyboard navigation

  • • Error Handling: Graceful degradation, user-friendly error messages

  • • Testing: Unit tests for components, integration tests for views

  • • Documentation: JSDoc comments for public APIs

  • • Code Style: Follow Odoo coding guidelines, ESLint rules

Custom Widget Example

Create a rating stars widget:

```javascript /** @odoo-module **/ import { registry } from "@web/core/registry"; import { Component } from "@odoo/owl"; class RatingWidget extends Component { static template = "my_module.RatingWidget"; static props = ["*"]; get stars() { const rating = this.props.record.data[this.props.name] || 0; return Array.from({length: 5}, (_, i) => i < rating); } onStarClick(index) { this.props.record.update({[this.props.name]: index + 1}); } } registry.category("fields").add("rating", { component: RatingWidget, }); ```

XML Template: ```xml <templates> <t t-name="my_module.RatingWidget"> <div class="o_rating_widget"> <t t-foreach="stars" t-as="filled" t-key="filled_index"> <i t-att-class="filled ? 'fa fa-star' : 'fa fa-star-o'" t-on-click="() => this.onStarClick(filled_index)"/> </t> </div> </t> </templates> ```

Debugging Tools

Key points

  • • Browser DevTools: Inspect components, network requests, console logs

  • • Odoo Debug Mode: Enable with ?debug=1, shows technical info

  • • Component Inspector: View component tree and props

  • • RPC Monitor: Track RPC calls and performance

  • • Asset Debug: View loaded JS/CSS assets

  • • View Architecture: View XML view definition

  • • Field Info: View field type, widget, attributes

  • • Performance Profiler: Measure render time, RPC latency