Odoo Developer Guide: ปรับแต่ง Tree View (List View) ด้วย XML และ XPath ในไม่กี่ขั้นตอน

[Bundith]

ปรับแต่ง Tree View in Odoo ERP ที่มีอยู่แล้ว ในระบบ Odoo นั้น หน้าจอ Tree View หรือที่เรียกอีกอย่างว่า “List View” เป็นส่วนแสดงข้อมูลในรูปแบบตาราง ซึ่งผู้ใช้งานสามารถดูข้อมูลหลายรายการพร้อมกันได้ในหน้าเดียว โดย Tree View ถูกใช้อย่างแพร่หลายในหลายโมดูล เช่น รายการสินค้า รายชื่อลูกค้า หรือใบสั่งซื้อ การเข้าใจวิธีการปรับแต่ง Tree View จึงเป็นสิ่งสำคัญ เพราะจะช่วยให้ข้อมูลที่แสดงอยู่มีความเหมาะสมกับความต้องการขององค์กร ไม่ว่าจะเป็นการแสดงฟิลด์เพิ่มเติม ซ่อนฟิลด์ที่ไม่จำเป็น หรือปรับเปลี่ยนรูปแบบการแสดงผลให้ดูเข้าใจง่ายมากขึ้น

odoo developer.png (737.18 KiB) Viewed 798 times

1. เปิด Developer Mode และดู View ที่ต้องการปรับแต่ง
ก่อนอื่นให้เข้าโหมดพัฒนา (Developer Mode) ซึ่งทำได้โดย:

• ไปที่เมนู Settings > Activate Developer Mode หรือ ใช้ extendsion "Odoo debug" ที่มีอยู่ใน Chrome,Edge,Firefox extendsion ก็ได้ง่ายและสะดวกดี

• จากนั้นเข้าไปยังหน้าจอ Tree View ที่ต้องการปรับแต่ง

• คลิกไอคอนรูปแมลง (bug icon) ด้านขวาบน แล้วเลือก “Edit View: List”

• จะเห็นรหัส View (external_id) ที่ใช้ในการสืบทอดในโค้ด XML

Example: product.product_template_tree_view (Tree View ของ product.template)

2. สืบทอด View เดิม (View Inheritance)
Odoo ใช้แนวคิดของการสืบทอด View แทนการเขียนทับ ซึ่งช่วยให้เราสามารถปรับแต่งเฉพาะส่วนโดยไม่กระทบต่อระบบหลัก
ตัวอย่างการเพิ่มคอลัมน์ standard_price หลัง list_price:

โค้ด: เลือกทั้งหมด

<record id="custom_product_tree_view" model="ir.ui.view">
  <field name="name">product.template.tree.inherit</field>
  <field name="model">product.template</field>
  <field name="inherit_id" ref="product.product_template_tree_view"/>
  <field name="arch" type="xml">
    <xpath expr="//field[@name='list_price']" position="after">
      <field name="standard_price"/>
    </xpath>
  </field>
</record>

คำอธิบาย:

• inherit_id ชี้ไปยัง view เดิมที่ต้องการสืบทอด

• ใช้ xpath เพื่อระบุตำแหน่งของฟิลด์ที่ต้องการแทรก

• position="after" หมายถึงแทรกฟิลด์ใหม่หลังจาก list_price

3. การตกแต่งแถวด้วยสี (Row Decorations)
เราสามารถกำหนดสีของแถวตามเงื่อนไข เช่น แสดงสีเขียวถ้าสินค้ามีสต๊อก:

โค้ด: เลือกทั้งหมด

<xpath expr="//tree" position="attributes">
  <attribute name="decoration-success">qty_available &gt; 0</attribute>
</xpath>

มีหลายสีที่ใช้ได้ เช่น:

• decoration-success = สีเขียว

• decoration-danger = สีแดง

• decoration-warning = สีส้ม

4. การซ่อนหรือจัดการคอลัมน์
หากต้องการซ่อนคอลัมน์ เราสามารถเพิ่มเงื่อนไข attrs หรือใช้ invisible="1":

โค้ด: เลือกทั้งหมด

<field name="image_1920" invisible="1"/>

หรือให้ซ่อนเฉพาะเมื่อผู้ใช้ไม่มีสิทธิ์บางอย่าง:

โค้ด: เลือกทั้งหมด

<field name="cost_price" attrs="{'invisible': [('user_has_group', '!=', 'your_module.group_allow_view_cost')]}"/>

5. การใช้ Widget เพื่อปรับรูปแบบการแสดงผล
บางครั้งฟิลด์ธรรมดาอาจแสดงผลได้ไม่เหมาะสม เราสามารถใช้ widget เพื่อเปลี่ยนวิธีแสดงผล เช่น:

โค้ด: เลือกทั้งหมด

<field name="list_price" widget="monetary"/>
<field name="website" widget="url"/>
<field name="rating" widget="progressbar"/>

Widget ที่นิยมใช้:

• monetary > แสดงตัวเลขแบบมีสกุลเงิน

• url > แสดงลิงก์ที่คลิกได้

• progressbar > แสดงค่าตัวเลขเป็นกราฟแถบ

• image > แสดงภาพ

6. การเปลี่ยนลำดับคอลัมน์
เราสามารถใช้ xpath และ position เพื่อเปลี่ยนลำดับของฟิลด์ได้ เช่น แทรกก่อน:

โค้ด: เลือกทั้งหมด

<xpath expr="//field[@name='name']" position="before">
  <field name="default_code"/>
</xpath>

7. การเพิ่ม Tree View แบบใหม่ (กรณีเฉพาะโมเดลย่อย)
ในบางกรณี เราอาจอยากเพิ่ม Tree View เฉพาะ context เช่นเฉพาะในหน้ารายการของลูกค้าประเภท Supplier:

โค้ด: เลือกทั้งหมด

<record id="custom_supplier_tree_view" model="ir.ui.view">
  <field name="name">res.partner.tree.supplier</field>
  <field name="model">res.partner</field>
  <field name="priority" eval="20"/>
  <field name="domain">[('supplier_rank', '&gt;', 0)]</field>
  <field name="arch" type="xml">
    <tree string="Supplier List">
      <field name="name"/>
      <field name="email"/>
      <field name="supplier_rank"/>
    </tree>
  </field>
</record>

สรุป
การปรับแต่ง Tree View สามารถทำได้โดยการสืบทอด View เดิมผ่าน XML ไม่ควรแก้ไข view ตรงๆเพราะมันจะทำให้ core view เกีดมี Error หรือมีปัญหาเมื่ออัปเดตเวอร์ชัน, การใช้ xpath, เช่น inside, after, before, replace เพื่อเพิ่มหรือแก้ไขฟิลด์เฉพาะส่วนที่ต้องการ และ widget ช่วยให้ควบคุมการแสดงผลข้อมูลได้อย่างยืดหยุ่นโดยที่ไม่ต้องไปทำอะไรกับ Module หลัก, การใช้สี และ widget ทำให้ Tree View มีความเข้าใจง่ายขึ้นและเป็นมิตรต่อผู้ใช้งานมากขึ้น, การเปิด Developer Mode เพื่อดูรายละเอียดของ View และตรวจสอบผลลัพธ์ทุกครั้งหลังแก้ไข

อ้างอิง
https://www.odoo.com/documentation/18.0/developer/tutorials/server_framework_101/06_basicviews.html
https://www.odoo.com/documentation/18.0/applications/studio/fields.html
https://www.odoo.com/documentation/18.0/developer/tutorials/server_framework_101/12_inheritance.html