19.0 tutorial owl joemo by djoewie · Pull Request #1250 · odoo/tutorials

djoewie · 2026-04-27T09:46:57Z

No description provided.

make a counter that adds 1 every time a button is pressed

making sure the counter can be reused

have a view of how properties can be used to customize components

make it possible to use markup in cards

make sure the correct properties are defined, can be validated in developer mode

make it possible to have the total of different counters together

bring an option to the user to have a todolist visible

robodoo · 2026-04-27T09:47:00Z

make it visually clear when is task is completed

cgun-odoo · 2026-04-27T10:54:03Z

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>


No need for this line

cgun-odoo · 2026-04-27T10:55:39Z

+import { Component } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";


Name for the template is usually camel case

Suggested change

static template = "awesome_owl.card";

static template = "awesome_owl.Card";

cgun-odoo · 2026-04-27T10:56:30Z

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>


Suggested change

<?xml version="1.0" encoding="UTF-8" ?>

cgun-odoo · 2026-04-27T10:57:21Z

+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";


Suggested change

static template = "awesome_owl.todo_item";

static template = "awesome_owl.TodoItem";

make the list of todo's interactive by adding the option to add items

when loading the page automatically focus the input as this improves the speed of adding a new item when loading the page

make it possible to toggle a todo to completed

make code in line with teh current standard

make it possible to delete wrong todo items

add option to hide card content

make the app follow the common layout to keep the same look and feel over the complete environment

make it easier to navigate between the different parts

cgun-odoo

Couldn't find anything to complain about nice job

cgun-odoo · 2026-04-28T09:38:39Z

        <div class="border d-inline-block p-2 m-2" style="width: 18rem;">
-            <t t-foreach="todos" t-as="todo" t-key="todo">
-                <TodoItem todo="todo"/>
+            <input t-ref="add_todo_input" t-on-keyup="addToDo" placeholder="Add a todo"/>


from what i see in Odoo, t-ref values are also camelCase rather than snake_case

make it possible to see some content on the page

it is better to show requested data over dummy data

by caching results through a service you don't need to call backend every time you want to show the statistics

add visualization for the statistic data of sizes

code convention

code convention filename needs to be like element inside

…g next one the order of first deleting the old canvas and only then adding a new chart is important!

making sure the data is in line with the data from the backend

cgun-odoo · 2026-04-28T13:26:53Z

+        if (this.chart) {
+            this.chart.destroy();
+        }


you could also do this.chart?.destroy();

cgun-odoo · 2026-04-28T13:27:38Z

+            type: "pie", data: {
+                labels: Object.keys(this.props.data),
+                datasets: [
+                    {
+                        data: Object.values(this.props.data),
+                    },
+                ],
+            }


Suggested change

type: "pie", data: {

labels: Object.keys(this.props.data),

datasets: [

{

data: Object.values(this.props.data),

},

],

}

type: "pie",

data: {

labels: Object.keys(this.props.data),

datasets: [

{

data: Object.values(this.props.data),

},

],

}

only load the dashboards when they need to be shown

change hardcode cards to a list of dashboard_items to make customization possible in a later stage

help with readability of code

dashboard items are shown from a registry making it possible for other addons to add more items to show

make it possible to hide dashboarditems through a dialog

cgun-odoo · 2026-04-29T12:39:56Z

+        id: "average_quantity",
+        description: "Average amount of t-shirt",
+        Component: NumberCard,
+        // size and props are optionals


No need for this comment everywhere

cgun-odoo · 2026-04-29T12:40:14Z

+    },
+    {
+        id: "total_amount",
+        description: "Smount of orders this month",


'Amount' 😄

make sure that every item is correctly translatable

cgun-odoo · 2026-04-30T13:33:17Z

+        this.dialogService = useService("dialog");
+        this.items = registry.category("awesome_dashboard").getAll();
+        this.state = useState({
+            disabled: localStorage.getItem("awesome_dashboard_disabled")?.split(',') || []


I assume this was the disabled items on the menu. In that case I would name the variable disabledItems / disabledMenus or something. disabled sounds like it's a boolean.

cgun-odoo · 2026-04-30T13:34:29Z

+    }
+}
+
+class DashboardConfiguration extends Component {


I think it should have its own file

cgun-odoo · 2026-04-30T13:36:34Z

+    }
+
+    updateDisabled(item, checked) {
+        item.disabled = !checked;


see here disabled is used as a boolean for the item. but at the same time it's the list of items that are disabled. It's a bit confusing

djoewie added 7 commits April 27, 2026 09:51

[IMP] awesome_owl: add counter on page

220c8f5

make a counter that adds 1 every time a button is pressed

[MOV] awesome_owl: move counter to own class

ba0852d

making sure the counter can be reused

[IMP] awesome_owl: add card

ac3da2c

have a view of how properties can be used to customize components

[IMP] awesome_owl: markup in display

d201888

make it possible to use markup in cards

[IMP] awesome_owl: add prop validation

bb195b5

make sure the correct properties are defined, can be validated in developer mode

[IMP] awesome_owl: add total of counters

e5cf19c

make it possible to have the total of different counters together

[IMP] awesome_owl: add visualisation of a todolist

0233cdf

bring an option to the user to have a todolist visible

djoewie requested a review from cgun-odoo April 27, 2026 09:46

[IMP] awesome_owl: mark completed items

43be439

make it visually clear when is task is completed

cgun-odoo reviewed Apr 27, 2026

View reviewed changes

djoewie added 9 commits April 27, 2026 13:21

[IMP] awesome_owl: make adding todo's possible

4ccb0fc

make the list of todo's interactive by adding the option to add items

[IMP] awesome_owl: autofocus input field

b1703e6

when loading the page automatically focus the input as this improves the speed of adding a new item when loading the page

[IMP] awesome_owl: toggeling todos

3bfc874

make it possible to toggle a todo to completed

[CLN] awesome_owl: follow naming convention

752c640

make code in line with teh current standard

[IMP] awesome_owl: make deleting todoitems possible

c517440

make it possible to delete wrong todo items

[IMP] awesome_owl: introduction to slots

09e67bb

make it possible to delete wrong todo items

[IMP] awesome_owl: add option to hide card content

206c82e

add option to hide card content

[IMP] awesome_dashboard: a new layout

64a8839

make the app follow the common layout to keep the same look and feel over the complete environment

[IMP] awesome_dashboard: Add some buttons for quick navigation

a758675

make it easier to navigate between the different parts

cgun-odoo reviewed Apr 28, 2026

View reviewed changes

djoewie added 8 commits April 28, 2026 13:34

[IMP] awesome_dashboard: add dashboard items

73580ef

make it possible to see some content on the page

[IMP] awesome_dashboard: add statistics on dashboard

f8efc82

it is better to show requested data over dummy data

[IMP] awesome_dashboard: caching the results

949c551

by caching results through a service you don't need to call backend every time you want to show the statistics

[IMP] awesome_dashboard: add pie-chart

2affcf3

add visualization for the statistic data of sizes

[CLN] awesome_owl: code convention camelcase for refs

cf78101

code convention

[CLN] awesome_dashboard: coding convention

286bd29

code convention filename needs to be like element inside

[FIX] awesome_dashboard: piechart need to be destroyed before creatin…

1f1e971

…g next one the order of first deleting the old canvas and only then adding a new chart is important!

[IMP] awesome_dashboard: real life update

dc7faf0

making sure the data is in line with the data from the backend

cgun-odoo reviewed Apr 28, 2026

View reviewed changes

djoewie added 5 commits April 28, 2026 16:18

[IMP] awesome_dashboard: lazy loading of module

f127f24

only load the dashboards when they need to be shown

[IMP] awesome_dashboard: make dashboard generic

416de43

change hardcode cards to a list of dashboard_items to make customization possible in a later stage

[CLN] awesome_dashboard: improve readability of pie_chart

0ede26b

help with readability of code

[IMP] awesome_dashboard: use a registry for the dashboard items

8b8558a

dashboard items are shown from a registry making it possible for other addons to add more items to show

[IMP] awesome_dashboard: make dashboard items hideable

6dfb3d4

make it possible to hide dashboarditems through a dialog

cgun-odoo reviewed Apr 29, 2026

View reviewed changes

[IMP] awesome_dashboard: add dutch translations

61531ba

make sure that every item is correctly translatable

cgun-odoo reviewed Apr 30, 2026

View reviewed changes

	static template = "awesome_owl.card";
	static template = "awesome_owl.Card";

	static template = "awesome_owl.todo_item";
	static template = "awesome_owl.TodoItem";

Conversation

djoewie commented Apr 27, 2026

Uh oh!

robodoo commented Apr 27, 2026

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!

cgun-odoo 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants