Đối với lập trình viên odoo, Widget là một thứ khá mới mẻ bởi vì chúng ta hiếm khi lập trình với ngôn ngữ javascript.
Hầu như tất cả logic được viết với python, ngoại trừ khi tùy chỉnh điểm bán hàng(POS) hoặc mô-đun thương mại điện tử(Website).

Đối với những lập trình viên odoo, theo cá nhân mình thấy thì javascript là phần cuối cùng mà bạn nên học. Tốt hơn hết bạn nên lập trung code với python
trừ khi dự án bạn làm liên quan đến POS hoặc Website

Đối với odoo có 3 lĩnh vực chính mà javascript đc sử dụng, đó là POS, Website và Front-End.

Lưu ý : Phiên bản Odoo trong bài viết là Odoo13, với các phiên bản khác có thể sẽ không hoạt động ổn định.

Nhìn chung bạn không cần có quá nhiều kiến thức để bắt đầu với Widget, chỉ cần nắm vững được Javascript và Jquery. Javascript trong Odoo
được viết chủ yếu trong web/static/src/js/. Bạn có thể tham khảo tại đây odoo github page.

Trong bài hướng dẫn đầu tiên này, mình sẽ tạo 1 Widget. Widget là 1 thành phần của Odoo, nó được dùng để hiển thị giá trị của một trường trong cơ sở dữ liệu. Ví dụ
Many2many mặc định sẽ hiển thị dạng bảng, nhưng khi chúng ta sử dụng many2many_tags, dữ liệu sẽ hiển thị dạng từng component con một.

Để tạo một Widget, trước tiên bạn phải tạo 1 file javascript. Như ở đây, mình tạo 1 file là widget_one.js và lưu trữ tại thư mục your_module_name/static/src/js/.
Trước tiên bạn phải chắc chắn widget_one.js đã được load trong odoo bằng câu lệnh sau:

1

console.log('hello world !');

Tiếp theo chúng ta phải khai báo file javascript này trong một file xml là asset.xml (tên có thể tùy chỉnh)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="tutorial_javascript_assets_backend" inherit_id="web.assets_backend" name="assets backend">
            <xpath expr="script[last()]" position="after">
                <script type="text/javascript" src="/tutorial_javascript/static/src/js/widget_one.js"/>
            </xpath>
        </template>
    </data>
</odoo>

Mục đích của việc này là kế thừa lại template web.assets_backend để khai báo thêm file javascipt của chúng ta. Điều này
sẽ không ảnh hưởng đến phần javascipt phía module POS và module Website thương mại điện tử.

Sau đó thêm file xml phía trên vào file manifest.py, và khởi động lại service odoo, cài đặt module. Sau khi làm mới trình duyệt, F12 mở tab console bạn sẽ thấy như sau:
Tiếp theo khi mọi thứ đã hoạt động, chúng ta sẽ sửa lại file widget_one.js như sau:

1
2
3
4
5
6

odoo.define('tutorial_javascript.widget_one', function (require) {
"use strict";
 
    console.log('Place your widget code here');
 
});

Lưu ý, tất cả các Widget phải được mở rộng, hoặc là thành phần con của AbstractField cũng như được thêm vào field_registry. Vì vậy chúng ta sẽ viết tiếp như sau:

1
2
3
4
5
6
7

odoo.define('tutorial_javascript.widget_one', function (require) {
"use strict";
 
    var AbstractField = require('web.AbstractFields');
    var FieldRegistry = require('web.field_registry');
 
});

Trong bài viết này, mình sẽ tạo ra một widget đơn giản để hiện thị một đoạn thông tin ngắn. Để làm được việc này chúng ta có thể ghi đè các phương thức có sẵn như
_render, _renderEdit, hoặc _renderReadonly.
Đầu tiên chúng ta tạo 1 template mới với code như sau:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<?xml version="1.0" encoding="UTF-8"?>
<template>
 
    <t t-name="WidgetOneTemplate">
        <div>
            <t t-if="widget.mode == 'edit' ">
                <p>This is the widget view in edit mode (the user is editing the document)</p>
            </t>
            <t t-if="widget.mode == 'readonly' ">
                <p>This is the widget view in readonly mode (the user only sees the document)</p>
            </t>
        </div>
    </t>
 
</template>

Sau đó khai báo trong manifest.py như sau:

Sau đó mình sẽ viết 1 đoạn code cho widget này:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

odoo.define('tutorial_javascript.widget_one', function (require) {
"use strict";
    // import các đối tượng cần thiết để tạo widget
    var AbstractField = require('web.AbstractField');
    var FieldRegistry = require('web.field_registry');
 
    // Tạo 1 object với tên tùy chỉnh
    // đừng quyên kế thừa lại web.AbstractField 
    var WidgetOne = AbstractField.extend({
        template: 'WidgetOneTemplate', // template chính là tên template chúng ta khai cái trong file xml
    });
 
    // đăng ký, nhúng object widget chúng ta vừa tạo vào web.field_registry object
    // bây giờ chúng ta có thể sử dụng widget odoo's view/xml file
    // ví dụ với code như dưới đây
    // <field name="field_one" widget="widget_one" />
    // the 'widget_one' name is up to you, as long as it's always connected/without spaces
    FieldRegistry.add('widget_one', WidgetOne);
 
    // trả về widget object
    // vì vậy chúng ta có thể kế thừa hoặc ghi đè trên các module khác
    return WidgetOne;
});

Đây là phần đầu tiên trong loạt bài Javascript trong Odoo, hy vọng bài viết sẽ giúp ích cho bạn 😀