Odoo Form view customize

[Bundith]

ในระบบ Odoo “Form View” คือหน้าจอที่ใช้สำหรับดูรายละเอียดของเอกสารทีละรายการ เช่น รายละเอียดสินค้า ลูกค้า หรือใบสั่งซื้อ เป็นหน้าจอหลักที่ผู้ใช้มีปฏิสัมพันธ์มากที่สุด โดยในแต่ละโมดูลจะมี Form View เป็นส่วนสำคัญของ UI การปรับแต่ง Form View จึงเป็นทักษะพื้นฐานที่นักพัฒนา Odoo ต้องมี เพื่อปรับให้หน้าจอตรงตามการใช้งานขององค์กร เช่น การเพิ่มฟิลด์ใหม่, การจัดกลุ่มข้อมูล, การซ่อนบางฟิลด์, หรือแม้กระทั่งเพิ่มแท็บใหม่ให้ข้อมูลดูเป็นระบบมากขึ้น บทความนี้จะอธิบายวิธีการปรับแต่ง Form View โดยใช้การสืบทอด View (inheritance) และเทคนิคที่นิยมใช้จริงในโปรเจกต์

odoodev.png (737.18 KiB) Viewed 50 times

1. การสืบทอด From View ด้วย XML (View Inheritance)

Odoo ใช้การสืบทอด (inherit) View เดิมเพื่อปรับแต่ง โดยไม่ต้องลบหรือเขียนทับ View เดิม

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

<record id="custom_res_partner_form" model="ir.ui.view">
  <field name="name">res.partner.form.inherit</field>
  <field name="model">res.partner</field>
  <field name="inherit_id" ref="base.view_partner_form"/>
  <field name="arch" type="xml">
    <xpath expr="//field[@name='phone']" position="after">
      <field name="x_line_id"/>
    </xpath>
  </field>
</record>

• คำอธิบาย:
  • เราสืบทอด View เดิม (view_partner_form)
  • แทรกฟิลด์ x_line_id หลังฟิลด์ phone
  • ฟิลด์ที่เพิ่มต้องอยู่ในโมเดลหรือถูกเพิ่มจาก Studio หรือ module อื่นก่อน

2. การจัดกลุ่มข้อมูลด้วย group, notebook, page
Odoo Form View รองรับการจัด Layout ได้ยืดหยุ่น เช่น การใช้แท็บ หรือกลุ่มข้อมูล
เพิ่มแท็บ (Tab) ใหม่ในฟอร์ม

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

<xpath expr="//sheet/notebook" position="inside">
  <page string="Social">
    <group>
      <field name="x_facebook"/>
      <field name="x_instagram"/>
    </group>
  </page>
</xpath>

เพิ่มกลุ่มภายในหน้า

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

<xpath expr="//sheet/group" position="after">
  <group string="Other Info">
    <field name="x_internal_code"/>
    <field name="x_note"/>
  </group>
</xpath>

ใช้ group, groups, และ attrs เพื่อควบคุมสิทธิ์การเห็นฟิลด์ตามกลุ่มผู้ใช้งาน

3. การซ่อนฟิลด์ และการใช้ attrs
สามารถซ่อนฟิลด์จากผู้ใช้บางกลุ่ม หรือเมื่อค่าฟิลด์บางฟิลด์ตรงเงื่อนไข

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

<field name="x_secret_info" attrs="{'invisible': [('user_has_group', '!=', 'custom.group_view_secret')]}"/>

หรือซ่อนเมื่อเงื่อนไขฟิลด์อื่นเป็นจริง

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

<field name="x_bonus_amount" attrs="{'invisible': [('x_bonus_eligible', '=', False)]}"/>

4. การเปลี่ยน label หรือ placeholder
สามารถปรับข้อความกำกับได้โดยการใช้ attribute

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

<field name="x_internal_code" string="Internal Reference" placeholder="Enter code"/>

5. การใช้ widget เพื่อเปลี่ยนวิธีแสดงผล
Widget ทำให้ Form View แสดงข้อมูลได้สวยและเข้าใจง่ายขึ้น เช่น:

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

<field name="x_signature" widget="signature"/>
<field name="x_rating" widget="percentpie"/>
<field name="x_amount" widget="monetary"/>
<field name="x_latitude" widget="float"/>

6. เทคนิคเพิ่มเติม
6.1 การเพิ่มเงื่อนไขแสดง/ซ่อนทั้ง group

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

<group attrs="{'invisible': [('company_id', '!=', False)]}">
  <field name="company_id"/>
</group>

7.2 การจัดเรียงฟิลด์ในหลายคอลัมน์

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

<group>
  <group>
    <field name="name"/>
    <field name="email"/>
  </group>
  <group>
    <field name="phone"/>
    <field name="mobile"/>
  </group>
</group>

สรุป
Form View เป็นจุดสำคัญของการใช้งานใน Odoo ซึ่งสามารถปรับแต่งได้หลากหลายรูปแบบ การใช้การสืบทอด (inherit view) พร้อมระบุตำแหน่งผ่าน XPath หรือ Attribute Position อย่างระมัดระวัง การเปิดโหมด Developer ช่วยให้เห็นโครงสร้างจริงก่อนแก้ไข, Group ช่วยจัดหมวดหมู่ข้อมูลให้เป็นสัดส่วน Notebook และ Page จัดระบบข้อมูลที่ซับซ้อนเป็นแท็บย่อย ส่วน Sheet กำหนดพื้นที่แสดงผลหลัก ส่วน Header เน้นข้อมูลสำคัญหรือปุ่มดำเนินการ, การปรับแต่ง CSS Class พื้นฐานและการใช้ Dynamic Styling ผ่าน Decoration Attributes ช่วยปรับเปลี่ยนสีสันตามสถานะข้อมูล การเพิ่มองค์ประกอบภาพอย่างไอคอนหรือเครื่องหมายช่วยการนำทาง, การใช้ widget, tab, group และ attrs จะช่วยให้ฟอร์มสวยงาม ใช้งานง่าย และตอบโจทย์ทางธุรกิจ และ ความผิดพลาดที่เจอมากในการปรับแต่ง Form จากชื่อฟิลด์ไม่ตรงกับ Model โครงสร้าง XML ไม่ถูกต้อง หรือการสืบทอดตำแหน่งไม่แม่นยำ มักเป็นสาเหตุหลักที่ทำให้ View ทำงานผิดปกติ

อ้างอิง
https://www.odoo.com/documentation/16.0/developer/reference/backend/views.html
https://www.odoo.com/forum/help-1/custom-layout-in-form-views-197465
https://odooforbeginnersblog.wordpress.com/2017/03/02/how-to-create-a-form-view-in-odoo/