col - colspan ปวดหัวมั้ยกับการจัด layout ?

              
เมื่อเราต้องเริ่มเข้ามาสู่โลกในการจัดการกับหน้า form view
หนึ่งในปัญหาปวดหัวที่สุด คือ การจัด layout
ซึ่งนั่นก็จะนำพามาให้เรารู้จักกับ col และ colspan
Atrributes ตัวช่วยที่จะช่วยเราให้หลุดพ้นจากปัญหาการจัด layout บน form view
ถ้าเราเข้าใจวิธีการใช้งาน col และ colspan

  - ช่วยจัดหน้า form ให้อ่านง่าย และมีประสิทธิภาพมากขึ้นในการดูข้อมูล
  - User-friendly ! จุดสำคัญใหญ่ที่สุดของระบบ โดยเฉพาะส่วนงานที่ซับซ้อน

.
.
ในบทความนี้ ผมจะพาไปรู้จักกับ col และ colspan
ประกอบกับตัวอย่างเพื่อที่จะได้เห็นภาพเมื่อนำไปใช้งานจริง

1. ทำความเข้าใจ col และ colspan
1.1. พื้นฐานของ <group> และการจัดคอลัมน์
เมื่อเราใช้ tag <group> ใน Odoo ระบบจะจัด field ให้โดยอัตโนมัติใน
โครงสร้างแบบสองคอลัมน์

  1. คอลัมน์แรก สำหรับ Field Label
  2. คอลัมน์ที่สอง สำหรับ Input Field

Default behavior ของ <group>

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


ผลลัพธ์ที่ได้

    [ Label Name ] [ Input Name ]
    [ Lamel Email ] [ Input Email ]


ถึงแม้ว่าเราจะไม่ได้กำหนด col atrributes เอาไว้
field ก็จะถูกแบ่งเป็นสองคอลัมน์โดยอัตโนมัติ
.
.
1.2. การใช้ col เพื่อกำหนดจำนวนคู่ของฟิลด์ในหนึ่งแถว
แอตทริบิวต์ col ใน <group>
ใช้เพื่อกำหนด จำนวนคู่ของ (Label + Input) ในแต่ละแถว
ตัวอย่าง (col=2)

    <group col="2">
        <field name="name"/>
        <field name="email"/>
        <field name="phone"/>
        <field name="company"/>
    </group>


ผลลัพธ์ที่ได้

    [ Label Name ]  [ Input Name ]   [ Label Email ]  [ Input Email ]
    [ Label Phone ] [ Input Phone ]  [ Label Company ] [ Input Company ]


เนื่องจากเรากำหนด col="2" odoo จะจัด field ให้แสดงเป็น 2 คู่ต่อแถว

1.3. การใช้ colspan เพื่อรวมคอลัมน์
แอตทริบิวต์ colspan ใช้เพื่อกำหนดให้ฟิลด์ ขยายพื้นที่ครอบคลุมหลายคอลัมน์
ตัวอย่าง (colspan=2)

    <group col="2">
        <field name="name" colspan="2"/>
        <field name="email"/>
        <field name="phone"/>
    </group>


ผลลัพธ์ที่ได้

    [ Label Name ]  [ Input Name ]  (2 คอลัมน์)
    [ Label Email ] [ Input Email ]  [ Label Phone ]  [ Input Phone ]


.
.
2. แล้วควรใช้ col และ colspan เมื่อไรล่ะ?
การใช้ col และ colspan อย่างถูกต้องจะช่วยให้:

  - ทำให้ form viewอ่านง่ายขึ้น ลดความซับซ้อนของ UI
  - จัดกลุ่ม field ที่เกี่ยวข้องกัน เพื่อความเข้าใจที่ดีขึ้น
  - เพิ่มประสิทธิภาพการ input ข้อมูล โดยทำให้ช่องต่าง ๆ จัดวางเป็นระเบียบ

.
.
3. ตัวอย่าง form ที่ซับซ้อน
ฟอร์มที่เราน่าจะคุ้นเคยกันมากที่สุด ขอยกให้ฟอร์มการกรอกข้อมูลส่วนตัว หรือข้อมูลผู้ติดต่อ
field ที่มักจะเจอ ก็จะเป็น ชื่อ, email, เบอร์, ที่อยู่, …
.
สมมติว่าออกแบบให้เป็นแบบนี้

  - field ชื่อ และ อีเมล อยู่แถวแรก
  - field ชื่อบริษัท (เต็มแถว)
  - field เบอร์โทรศัพท์ และ ที่อยู่ อยู่แถวถัดไป


    <group col="2">
        <field name="name"/>
        <field name="email"/>
        <field name="company_name" colspan="2"/>
        <field name="phone"/>
        <field name="address"/>
    </group>


ผลลัพธ์ที่ได้

    [ Label Name ]  [ Input Name ]  [ Label Email ]  [ Input Email ]
    [ Label Company_name ]  [ Input Company_name ]  (2 คอลัมน์)
    [ Label Phone ]  [ Input Phone ]  [ Label Address ]  [ Input Address ]



สรุป

    - col, colspan ใช้สำหรับการจัด form view ที่ซับซ้อน เพื่อ improve ทั้ง UX/UI
    - col ใช้กำหนดจำนวน field + label ต่อแถว
    - colspan ใช้รวมหลายคอลัมน์เข้าด้วยกัน

ข้อควรระวัง
การใช้ col ซ้อนกันหลาย ๆ ชั้น จะต้องคิดเรื่อง Design ไว้ให้ดี แต่แรก
เพราะจากประสบการณ์ที่ใช้ col ซ้อน ๆ กัน
แล้วไม่ได้คิดให้ดีตั้งแต่แรก (ประมาณว่า ทำไปด้วย เปลี่ยน Design ระหว่างทางไปด้วย)
form มันจะไม่ได้ถึงกับพังไปในทันที แต่มันจะพังต่อกันเป็นทอด ๆ
ซึ่งก็อาจจะทำให้หาจุดแก้กันยากพอสมควร

>_JV