[ADD] awesome_owl, awesome_dashboard: partially implement web framework tutorial by daloe-odoo · Pull Request #1303 · odoo/tutorials

daloe-odoo · 2026-05-28T08:58:51Z

add card, counter, and todo components to awesome_owl. add almost reactive pie chart to awesome_dashboard.

task-6253605

robodoo · 2026-05-28T08:58:55Z

…rk tutorial add card, counter, and todo components to awesome_owl. add almost reactive pie chart to awesome_dashboard.

daloe-odoo · 2026-06-01T07:16:52Z

@Megaaaaaa kind of ready for review

…rerendering onPatch

Megaaaaaa

Hellooo 👋

Looks pretty good already, here's your review 👍 My comments are mostly about conventions that I wanted to show you or very minimal improvements to the logic.

Don't hesitate to tell me if anything is unclear or if you have question 😉

Megaaaaaa · 2026-06-01T10:37:24Z

@@ -1,8 +1,36 @@
-import { Component } from "@odoo/owl";
+import { Component, onWillStart, useState } from "@odoo/owl";


Being extra annoying here, this import is not used 😄

Megaaaaaa · 2026-06-01T10:40:02Z

+        <t t-set-slot="layout-buttons">
+            <button t-on-click="openCustomersKanban">Customers</button>
+            <button t-on-click="openLeads">Leads</button>
+        </t>
+
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">


Its preferable to declare the layout-buttons slot inside the <Layout> component it belongs to. As written, the buttons are defined before the component that should receive the slot. It doesn't make much a difference but we prefer it that way.

Suggested change

<t t-set-slot="layout-buttons">

<button t-on-click="openCustomersKanban">Customers</button>

<button t-on-click="openLeads">Leads</button>

</t>

<Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">

<Layout display="{ controlPanel: {} }" className="'o_dashboard h-100'">

<t t-set-slot="layout-buttons">

Megaaaaaa · 2026-06-01T10:41:31Z

@@ -0,0 +1,54 @@
+import { Component, onMounted, onPatched, onWillStart, onWillUnmount, useRef, useState } from "@odoo/owl"


Currently import but not used 😄

Suggested change

import { Component, onMounted, onPatched, onWillStart, onWillUnmount, useRef, useState } from "@odoo/owl"

import { Component, onMounted, onPatched, onWillStart, onWillUnmount, useRef } from "@odoo/owl"

Megaaaaaa · 2026-06-01T10:44:06Z

+        data: Object,
+        optional: true
+    }


This declares data as a required prop and then adds optional: true as a separate prop definition, which is not the shape Owl expects. That matters here because the dashboard statistics are loaded asynchronously, so orders_by_size can be missing on the first render. The current version can fail before the data arrives, even though the chart is naturally allowed to start empty.

Suggested change

data: Object,

optional: true

}

data: {

type: Object,

optional: true,

},

Megaaaaaa · 2026-06-01T10:46:34Z

+            })
+
+            onPatched(() => {
+                this.chart.destroy()


onPatched can run before a chart instance exists, especially sine data is optional and the first render may be empty 👍

Suggested change

this.chart.destroy()

this.chart?.destroy();

Megaaaaaa · 2026-06-01T10:53:43Z

+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+    static prop = {


😉

Suggested change

static prop = {

static props = {

Megaaaaaa · 2026-06-01T10:57:12Z

+            <label t-att-class="props.todo.isCompleted ? 'text-decoration-line-through text-muted' : '' ">
+                <t t-esc="props.todo.id"/>.
+                <t t-esc="props.todo.description"/>
+                    <span class="fa fa-remove" t-on-click="onRemove"/>


Okay so I already said this to Sreedev so I guess this is the way they show it in the tutorial but being an clickable action, this should be a button not a span. It works great with the mouse but keyboard users and assistive technologies, don't forget to make this kind of action a button in the future 😄

Suggested change

<span class="fa fa-remove" t-on-click="onRemove"/>

<button type="button" class="btn btn-link p-0" t-on-click="onRemove">

<i class="fa fa-remove"/>

</button>

Megaaaaaa · 2026-06-01T10:58:44Z

+    }
+
+    addTodo(event) {
+        if (event.key === 'Enter' && event.target.value !== '') {


This only rejects an actually empty string, so a todo containing only spaces can still be added. It's up to you really but I would consider this a small bug in the feature. Your call 😄

Suggested change

if (event.key === 'Enter' && event.target.value !== '') {

if (event.key === "Enter" && event.target.value.trim() !== "") {

Megaaaaaa · 2026-06-01T10:59:38Z

+        if (event.key === 'Enter' && event.target.value !== '') {
+            this.todos.push({
+                id: this.nextId++,
+                description: event.target.value,


Then if you validate the trimmed value, you should save the trimmed value. Still your call 😄

Suggested change

description: event.target.value,

description: event.target.value.trim(),

Megaaaaaa · 2026-06-01T11:02:49Z

+import { onMounted, useRef } from "@odoo/owl"
+
+
+export function Autofocus(refName) {


So this calling Owl hooks, it would be prefereable to name it like a hook so we get the intention clearer. This would be more of a useAutofocus in this case. I feel like it help makes the difference with a simple utility 👍

Suggested change

export function Autofocus(refName) {

export function useAutofocus(refName) {

daloe-odoo requested a review from Megaaaaaa May 28, 2026 08:59

daloe-odoo force-pushed the 19.0-training-web-framework-daloe branch from 157cbf9 to 79d14fc Compare May 28, 2026 09:05

[ADD] awesome_owl, awesome_dashboard: partially implement web framewo…

af84bf0

…rk tutorial add card, counter, and todo components to awesome_owl. add almost reactive pie chart to awesome_dashboard.

daloe-odoo force-pushed the 19.0-training-web-framework-daloe branch from 387b1b1 to af84bf0 Compare June 1, 2026 07:14

daloe-odoo changed the title ~~[IMP] awesome_owl: implement web framework 101 tutorial~~ [ADD] awesome_owl, awesome_dashboard: partially implement web framework tutorial Jun 1, 2026

[IMP] awesome_dashboard: allow pie chart to update by destroying and …

41db150

…rerendering onPatch

Megaaaaaa reviewed Jun 1, 2026

View reviewed changes

		@@ -1,8 +1,36 @@
		import { Component } from "@odoo/owl";
		import { Component, onWillStart, useState } from "@odoo/owl";

		@@ -0,0 +1,54 @@
		import { Component, onMounted, onPatched, onWillStart, onWillUnmount, useRef, useState } from "@odoo/owl"

	if (event.key === 'Enter' && event.target.value !== '') {
	if (event.key === "Enter" && event.target.value.trim() !== "") {

	description: event.target.value,
	description: event.target.value.trim(),

		import { onMounted, useRef } from "@odoo/owl"


		export function Autofocus(refName) {

	export function Autofocus(refName) {
	export function useAutofocus(refName) {

Conversation

daloe-odoo commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

robodoo commented May 28, 2026

Uh oh!

daloe-odoo commented Jun 1, 2026

Uh oh!

Megaaaaaa left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

daloe-odoo commented May 28, 2026 •

edited

Loading