รายงาน PDF¶
ด้วยสตูดิโอ คุณสามารถ:ref:แก้ไขรายงาน PDF ที่มีอยู่ <studio/pdf-reports/edit> (เช่น ใบแจ้งหนี้ ใบเสนอราคา ฯลฯ) หรือ:ref:สร้างรายงานใหม่ <studio/pdf-reports/create>
เค้าโครงเริ่มต้น¶
เค้าโครงเริ่มต้นของรายงานจัดการนอกสตูดิโอ ไปที่:menuselection:การตั้งค่า จากนั้นในส่วน:guilabel:บริษัท`ของหน้าหลัก คลิก:guilabel:`กำหนดค่าเค้าโครงเอกสาร การตั้งค่าเค้าโครงเฉพาะเจาะจงต่อบริษัท แต่ใช้กับรายงานทั้งหมด
Tip
คุณสามารถดูว่าการตั้งค่าต่างๆ ส่งผลต่อเค้าโครงรายงานอย่างไรในตัวอย่างรายงานทางด้านขวาของหน้าต่าง:guilabel:กำหนดค่าเค้าโครงเอกสารของคุณ เมื่อสร้างหรือแก้ไขรายงาน คุณสามารถดูตัวอย่างรายงานโดยคลิก:guilabel:`ดูตัวอย่างก่อนพิมพ์`ทางด้านซ้ายของหน้าจอ
ใช้การตั้งค่าต่อไปนี้:
เค้าโครง: มีเค้าโครงเจ็ดแบบ:
พื้นหลัง: มีพื้นหลังต่อไปนี้:
ว่างเปล่า: ไม่แสดงอะไร
โลโก้สาธิต: แสดงโลโก้สาธิตในพื้นหลัง
กำหนดเอง: อัปโหลดภาพพื้นหลังที่กำหนดเอง
ข้อความ: มีแบบอักษรแปดแบบ: Lato, Roboto, Open Sans, Montserrat, Oswald, Raleway, Tajawal (รองรับสคริปต์อาหรับและละติน) และ Fira Mono ไปที่ เว็บไซต์ Google Fonts เพื่อดูตัวอย่าง
โลโก้บริษัท: คลิกปุ่ม:guilabel:
แก้ไข`เพื่ออัปโหลดหรือเปลี่ยนโลโก้ การดำเนินการนี้จะเพิ่มโลโก้ลงในระเบียนของบริษัทในโมเดล *บริษัท* ซึ่งคุณสามารถเข้าถึงได้โดยไปที่:menuselection:`การตั้งค่า`จากนั้นคลิก:guilabel:`อัปเดตข้อมูล`ในส่วน:guilabel:`บริษัท
สี: เปลี่ยนสีหลักและสีรองที่ใช้ในการจัดโครงสร้างรายงาน สีเริ่มต้นถูกสร้างขึ้นโดยอัตโนมัติตามสีของโลโก้
ที่อยู่: ชื่อบริษัทและที่อยู่แสดงในส่วนหัวของ:ref:
รายงานภายนอก <studio/pdf-reports/header-footer>คุณสามารถเพิ่มข้อความหลายบรรทัด
คำขวัญ: แสดงในส่วนหัวของ:ref:`รายงานภายนอก <studio/pdf-reports/header-footer>`ที่ใช้เลย์เอาต์ Light, Striped, Bubble, Wave และ Folder และในส่วนท้ายของรายงานภายนอกที่ใช้เลย์เอาต์ Boxed และ Bold คุณสามารถเพิ่มข้อความหลายบรรทัดได้
รูปแบบกระดาษ: กำหนดขนาดกระดาษเริ่มต้นของรายงาน คุณสามารถเลือก:guilabel:
A4(21 ซม. x 29.7 ซม.) และ:guilabel:US Letter(21.59 ซม. x 27.54 ซม.) นอกจากนี้ยังสามารถกำหนดสำหรับรายงานแต่ละรายการในฟิลด์:guilabel:รูปแบบกระดาษ`ใน:ref:`สตูดิโอ <studio/pdf-reports/edit-options>Note
รูปแบบกระดาษอื่นๆ อาจพร้อมใช้งานขึ้นอยู่กับแอปหรือโมดูลที่คุณติดตั้ง เช่น แผ่นฉลากสำหรับแอปคลังสินค้าหรือป้ายชื่ออีเวนต์สำหรับแอปอีเวนต์
สร้างรายงาน PDF ใหม่¶
ในการสร้างรายงานใหม่สำหรับ:doc:โมเดล </applications/studio/models_modules_apps> (เช่น ใบสั่งขาย) เข้าถึงโมเดล คลิกปุ่ม:icon:oi-studio (สลับสตูดิโอ) จากนั้นคลิก:guilabel:รายงาน คลิก:guilabel:ใหม่ และในหน้าต่างป๊อปอัปที่เปิดขึ้น ให้เลือกประเภทของรายงาน ซึ่งใช้เพื่อกำหนดสิ่งที่แสดงในส่วนหัวและส่วนท้ายเท่านั้น
เมื่อคุณสร้างรายงานแล้ว คุณสามารถเริ่ม:ref:แก้ไขได้ <studio/pdf-reports/edit>
แก้ไขรายงาน PDF¶
ในการเข้าถึงรายงานที่พร้อมใช้งานสำหรับโมเดล ให้เข้าถึงโมเดล คลิกปุ่ม:icon:oi-studio (สลับสตูดิโอ) จากนั้นคลิก:guilabel:รายงาน เลือกรายงานที่มีอยู่เพื่อเปิด
หรือคุณสามารถเปิดสตูดิโอ คลิก:guilabel:รายงาน และค้นหารายงานหรือโมเดลที่ต้องการ
Important
ขอแนะนำอย่างยิ่งให้**ทำสำเนา**รายงานมาตรฐานและทำการเปลี่ยนแปลงในเวอร์ชันที่ทำสำเนา ในการทำสำเนารายงาน ให้เลื่อนเมาส์ไปที่มุมบนขวาของรายงาน คลิกไอคอน:icon:fa-ellipsis-vertical (จุดไข่ปลาแนวตั้ง) จากนั้นเลือก:guilabel:ทำสำเนา
ตัวเลือก¶
เมื่อคุณเลือกหรือสร้างรายงานแล้ว คุณสามารถใช้ตัวเลือกในส่วนซ้ายของหน้าจอเพื่อ
เปลี่ยน:guilabel:
ชื่อรายงาน: ชื่อใหม่จะถูกนำไปใช้ทุกที่ (ในสตูดิโอ ในเมนู:guilabel:พิมพ์`ภายใต้ไอคอน:icon:`fa-cog(เกียร์) ในมุมมองฟอร์ม และในชื่อไฟล์ PDF)แก้ไข:guilabel:
รูปแบบกระดาษ: หากไม่ได้เลือกค่า จะใช้รูปแบบที่กำหนดใน:ref:เลย์เอาต์เริ่มต้น <studio/pdf-reports/default-layout-paper>แสดงในเมนูพิมพ์: เพื่อเพิ่มรายงานไปยังเมนู:guilabel:`พิมพ์`ในมุมมองฟอร์ม
โหลดซ้ำจากไฟล์แนบ: เพื่อบันทึกรายงานเป็นไฟล์แนบในระเบียนครั้งแรกที่สร้าง และโหลดเวอร์ชันต้นฉบับของรายงานในครั้งถัดไป ซึ่งกฎหมายกำหนดให้ต้องทำสำหรับใบแจ้งหนี้และส่วนใหญ่ใช้ในกรณีนี้
จำกัดการมองเห็นให้กับกลุ่ม: เพื่อจำกัดความพร้อมใช้งานของรายงาน PDF ให้กับ:doc:`กลุ่มผู้ใช้ <../general/users/access_rights>`เฉพาะ
แก้ไขซอร์ส: เพื่อแก้ไขรายงานโดยตรงใน:ref:
ไฟล์ XML <studio/pdf-reports/XML-editing>รีเซ็ตรายงาน: เพื่อยกเลิกการเปลี่ยนแปลงทั้งหมดที่ทำกับรายงานและรีเซ็ตกลับเป็นเวอร์ชันมาตรฐาน
แสดงตัวอย่างก่อนพิมพ์: เพื่อสร้างและดาวน์โหลดตัวอย่างรายงาน
ตัวแก้ไขรายงาน¶
ตัวแก้ไขรายงานช่วยให้คุณแก้ไขเนื้อหาและการจัดรูปแบบของรายงานได้
Tip
คุณสามารถ:guilabel:
เลิกทำ`หรือ:guilabel:`ทำซ้ำ`การเปลี่ยนแปลงโดยใช้ปุ่มที่เกี่ยวข้องหรือทางลัด `CTRL+ZและCTRL+Yการเปลี่ยนแปลงจะถูกบันทึกโดยอัตโนมัติเมื่อคุณออกจากรายงานหรือบันทึกด้วยตนเองโดยใช้ปุ่ม:guilabel:
บันทึกคุณสามารถรีเซ็ตรายงานกลับเป็นเวอร์ชันมาตรฐานได้โดยคลิกปุ่ม:guilabel:`รีเซ็ตรายงาน`ในส่วนซ้ายของหน้าจอ
Important
การแก้ไขส่วนหัวและส่วนท้ายของรายงานจะส่งผลต่อรายงานมาตรฐานและรายงานที่กำหนดเองทั้งหมด
บลอกแบบมีเงื่อนไข¶
สี่เหลี่ยมเส้นประจะแสดงถึง**บลอกแบบมีเงื่อนไข** (คำสั่ง if/else) ใช้เพื่อแสดง/ซ่อนเนื้อหาตามเงื่อนไขเฉพาะ คลิกที่บลอกเพื่อดูเงื่อนไข
เลือกค่าเพื่อแสดงตัวอย่างผลลัพธ์ที่สอดคล้องกันและแก้ไขหากจำเป็น
Note
เงื่อนไขสามารถแก้ไखได้ใน:ref:`XML <studio/pdf-reports/XML-editing>`เท่านั้น
เนื้อหาอื่นๆ¶
มีข้อความเนื้อหาในรายงานสองประเภท:
ข้อความคงที่ คือข้อความที่ไม่ได้ไฮไลต์เป็นสีน้ำเงิน ซึ่งสามารถแก้ไขได้โดยตรงในตัวแก้ไข
ข้อความไดนามิก เช่น ข้อความที่ไฮไลต์เป็นสีน้ำเงิน ซึ่งจะถูกแทนที่ด้วยค่า:doc:`ฟิลด์ </applications/studio/fields>`เมื่อสร้างรายงาน เช่น หมายเลขคำสั่งขายหรือวันที่ใบเสนอราคา
คุณสามารถเพิ่มเนื้อหา (เช่น ฟิลด์ รายการ ตาราง รูปภาพ แบนเนอร์ ฯลฯ) ลงในรายงานโดยใช้คำสั่ง พิมพ์ / เพื่อเปิด:ref:พาวเวอร์บ็อกซ์ <essentials/html_editor/commands> จากนั้นพิมพ์ชื่อคำสั่งหรือเลือกจากรายการ
หากต้องการเพิ่มข้อความคงที่ลงในรายงาน ให้พิมพ์ข้อความในตำแหน่งที่ต้องการ
สำหรับการเปลี่ยนแปลงขั้นสูงเพิ่มเติม คุณสามารถ:ref:แก้ไขรายงานใน XML โดยตรง <studio/pdf-reports/XML-editing>
เพิ่มฟิลด์¶
หากต้องการเพิ่มฟิลด์ ให้พิมพ์ / และเลือกคำสั่ง Field ในรายการที่เปิดขึ้น ให้เลือกหรือค้นหาฟิลด์ คลิกลูกศรขวาถัดจากชื่อฟิลด์เพื่อเข้าถึงรายการฟิลด์ที่เกี่ยวข้องหากจำเป็น จากนั้นระบุค่าเริ่มต้นที่จะแสดงหากฟิลด์ไม่ได้กรอกในรายการบันทึก แล้วกด Enter
เพิ่มหรือแก้ไขตาราง¶
มีตารางสองประเภทในรายงาน:
ตารางคงที่ ซึ่งใช้สำหรับแสดงข้อความคงที่หรือฟิลด์ สำหรับตารางประเภทนี้ คุณจะกำหนดจำนวนคอลัมน์และแถวเมื่อเพิ่มตาราง
ตารางไดนามิก ซึ่งใช้สำหรับแสดงข้อมูลจาก:ref:
ฟิลด์เชิงสัมพันธ์ <studio/fields/relational-fields>สำหรับตารางประเภทนี้ คุณจะกำหนดเฉพาะจำนวนคอลัมน์เมื่อเพิ่มตาราง จำนวนแถวในรายงานที่สร้างขึ้นจะถูกกำหนดโดยจำนวนรายการบันทึกในโมเดลที่เกี่ยวข้องซึ่งเชื่อมโยงกับโมเดลปัจจุบันExample
ในรายงานคำสั่งขาย ตารางไดนามิกจะใช้เพื่อแสดงรายการคำสั่งซื้อที่เกี่ยวข้องกับคำสั่งขาย หากคำสั่งขายมีรายการคำสั่งซื้อ 10 รายการ ตารางในรายงานที่สร้างขึ้นจะมี 10 แถว หากมีรายการคำสั่งซื้อสองรายการ ตารางจะมีสองแถว
เพิ่มหรือแก้ไขตารางคงที่¶
หากต้องการเพิ่มตารางคงที่ ให้พิมพ์ / และเลือกคำสั่ง Table กำหนดจำนวนคอลัมน์และแถวสำหรับตาราง เมื่อเพิ่มตารางแล้ว คุณสามารถเริ่มแก้ไขได้
คุณสามารถแทรก ย้าย และลบคอลัมน์และแถวโดยใช้เครื่องมือตาราง วางเคอร์เซอร์ไว้ด้านบนของคอลัมน์หรือทางซ้ายของแถว จากนั้นคลิกสี่เหลี่ยมสีม่วงและเลือกตัวเลือก
หากต้องการปรับขนาดคอลัมน์ ให้ลากขอบคอลัมน์ไปยังตำแหน่งที่ต้องการ รีเซ็ตคอลัมน์ทั้งหมดให้เป็นขนาดมาตรฐานโดยเลือก Reset Size จากเครื่องมือตาราง
เพิ่ม:ref:`ฟิลด์ที่คุณเลือก <studio/pdf-reports/add-field>`ในเซลล์ หรือเพิ่มข้อความคงที่โดยการพิมพ์
Tip
หากต้องการเพิ่มข้อความในรูปแบบที่มีโครงสร้างโดยไม่ใช้ตาราง คุณสามารถใช้คอลัมน์ได้ เพิ่มคอลัมน์โดยพิมพ์ / และเลือกคำสั่งที่เหมาะสม: 2 columns, 3 columns หรือ 4 columns
เพิ่มหรือแก้ไขตารางไดนามิก¶
Note
เฉพาะความสัมพันธ์ประเภท
one2manyหรือmany2manyเท่านั้นที่สามารถแสดงเป็นตารางไดนามิกได้ตารางแบบไดนามิกที่มีอยู่ในรายงานมาตรฐานมีโครงสร้างที่ซับซ้อนกว่าตารางแบบไดนามิกที่คุณเพิ่มเอง สำหรับตารางเหล่านี้ สามารถแทรกหรือลบคอลัมน์ได้ แต่ไม่สามารถย้ายคอลัมน์หรือแทรก ย้าย หรือลบแถวได้
เพื่อเพิ่มตารางแบบไดนามิก พิมพ์ / แล้วเลือกคำสั่ง Dynamic Table ในรายการที่เปิดขึ้น เลือกหรือค้นหาความสัมพันธ์ที่ตารางจะอิงจากแล้วกด Enter เมื่อเพิ่มตารางแล้ว คุณสามารถเริ่มแก้ไขได้
คุณสามารถแทรก ย้าย และลบคอลัมน์โดยใช้เครื่องมือตารางเช่นเดียวกับ ตารางแบบคงที่ นอกจากนี้ยังสามารถแทรกแถวคงที่ที่จะปรากฏเหนือหรือใต้แถวที่สร้างขึ้น
เพื่อเพิ่มฟิลด์ลงในเซลล์ ให้ลบข้อความตัวยึดตำแหน่งแล้ว เพิ่มฟิลด์ที่คุณเลือก กล่องโต้ตอบที่เปิดขึ้นจะแสดงออบเจ็กต์ต้นทางสำหรับฟิลด์ (เช่น โมเดล Order Lines) และรายการฟิลด์ที่ใช้ได้
แทนที่ป้ายกำกับ Column name ด้วยป้ายกำกับที่คุณเลือก
Note
แถวเริ่มต้นจะวนซ้ำเนื้อหาของฟิลด์โดยอัตโนมัติ สร้างแถวในรายงานสำหรับค่าฟิลด์แต่ละค่า (เช่น หนึ่งแถวต่อหนึ่งรายการคำสั่งซื้อ)
การจัดรูปแบบ¶
เพื่อจัดรูปแบบข้อความในรายงาน ให้เลือกข้อความ จากนั้นจัดรูปแบบโดยใช้ตัวเลือกใน เครื่องมือแก้ไขข้อความ
การแก้ไข XML ของรายงาน¶
Warning
การแก้ไข XML โดยตรงอาจทำให้เกิดปัญหาในรายงานระหว่าง การอัปเกรด หากเกิดเหตุการณ์นี้ เพียงคัดลอกการเปลี่ยนแปลงของคุณจากฐานข้อมูลเดิมไปยังฐานข้อมูลที่อัปเกรดแล้ว
เพื่อแก้ไข XML ของรายงาน ให้คลิก Edit sources ในบานหน้าต่างด้านซ้าย
ตัวอย่าง¶
เพื่อเปลี่ยนวิธีการนำเสนอข้อมูลในรายงาน คุณสามารถแก้ไข วิดเจ็ต เริ่มต้นของฟิลด์ได้ด้วยตนเอง ในตัวอย่างด้านล่าง วันที่สั่งซื้อแสดงวันที่และเวลาตามค่าเริ่มต้น ในขณะที่ราคาต่อหน่วยมีค่าเริ่มต้นเป็นทศนิยมสองตำแหน่ง
<div class="oe_structure"> <span t-field="doc.date_order"/> <span t-field="doc.price_unit"/> </div>
โดยใช้ t-options ในกรณีนี้คือตัวเลือก widget ฟิลด์เหล่านี้สามารถแก้ไขเพื่อแสดงเฉพาะวันที่และทศนิยมสี่ตำแหน่งตามลำดับ:
<div class="oe_structure"> <span t-field="doc.date_order" t-options="{'widget': 'date'}"/> <span t-field="doc.price_unit" t-options="{'widget': 'float', 'precision': 4}"/> </div>
หากคุณต้องการแสดง/ซ่อนเนื้อหาตามเงื่อนไขเฉพาะ คุณสามารถเพิ่มคำสั่งควบคุม if/else ใน XML รายงานด้วยตนเอง
ตัวอย่างเช่น หากคุณต้องการซ่อนตารางข้อมูลที่กำหนดเองหากไม่มีแท็ก คุณสามารถใช้แอตทริบิวต์ t-if เพื่อกำหนดเงื่อนไข ซึ่งจะถูกประเมินเป็น True หรือ False ตารางจะไม่แสดงหากไม่มีแท็กในใบเสนอราคา
<!-- table root element -->
<table class="table" t-if="len(doc.tag_ids) > 0">
<!-- thead = table header, the row with column titles -->
<thead>
<!-- table row element -->
<tr>
<!-- table header element -->
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<!-- table body, the main content -->
<tbody>
<!-- we create a row for each subrecord with t-foreach -->
<tr t-foreach="doc.tag_ids" t-as="tag">
<!-- for each line, we output the name and price as table cells -->
<td t-out="tag.id"/>
<td t-out="tag.name"/>
</tr>
</tbody>
</table>
หากคุณต้องการแสดงบล็อกอื่นในกรณีที่คำสั่ง t-if ถูกประเมินว่าเป็น 'False' คุณสามารถระบุได้โดยใช้คำสั่ง 't-else` บล็อก 't-else' ต้องอยู่หลังบล็อก 't-if' โดยตรงในโครงสร้างเอกสาร ไม่จำเป็นต้องระบุเงื่อนไขใดๆ ในแอตทริบิวต์ "t-else" เป็นตัวอย่าง เรามาแสดงข้อความสั้นๆ ที่อธิบายว่าไม่มีแท็กในใบเสนอราคา:
<!-- table root element -->
<table class="table" t-if="len(doc.tag_ids) > 0">
<!-- thead = table header, the row with column titles -->
<thead>
<!-- table row element -->
<tr>
<!-- table header element -->
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<!-- table body, the main content -->
<tbody>
<!-- we create a row for each subrecord with t-foreach -->
<tr t-foreach="doc.tag_ids" t-as="tag">
<!-- for each line, we output the name and price as table cells -->
<td t-out="tag.id"/>
<td t-out="tag.name"/>
</tr>
</tbody>
</table>
<div class="text-muted" t-else="">No tag present on this document.</div>
โดยใช้สัญกรณ์ t-if/t-else ตัวแก้ไขรายงานจะรู้ว่าส่วนเหล่านี้แยกออกจากกันและควรแสดงเป็นบลอกเงื่อนไข:
คุณสามารถสลับเงื่อนไขโดยใช้เครื่องมือแก้ไขเพื่อดูตัวอย่างผลลัพธ์:
หากคุณต้องการมีตัวเลือกหลายรายการ คุณสามารถใช้คำสั่ง t-elif เพื่อเพิ่มเงื่อนไขระหว่างกลางได้ ตัวอย่างเช่น นี่คือวิธีที่หัวเรื่องของรายงานคำสั่งขายเปลี่ยนแปลงตามเงื่อนไขของเอกสารพื้นฐาน
<h2 class="mt-4">
<span t-if="env.context.get('proforma', False) or is_pro_forma">Pro-Forma Invoice # </span>
<span t-elif="doc.state in ['draft','sent']">Quotation # </span>
<span t-else="">Order # </span>
<span t-field="doc.name">SO0000</span>
</h2>
หัวเรื่อง Pro-Forma Invoice จะถูกใช้ขึ้นอยู่กับเงื่อนไขตามบริบท หากเงื่อนไขเหล่านี้ไม่เป็นไปตามและสถานะของเอกสารเป็น draft หรือ sent จะใช้ Quotation แทน หากไม่มีเงื่อนไขใดเป็นไปตาม หัวเรื่องของรายงานจะเป็น Order
การทำงานกับรูปภาพในรายงานอาจเป็นเรื่องท้าทาย เนื่องจากการควบคุมขนาดและพฤติกรรมของรูปภาพอย่างแม่นยำไม่ได้ชัดเจนเสมอไป คุณสามารถแทรกฟิลด์รูปภาพโดยใช้ตัวแก้ไขรายงาน (โดยใช้ คำสั่ง Field) แต่การแทรกใน XML โดยใช้คำสั่ง t-field และแอตทริบิวต์ t-options ที่มาพร้อมจะให้การควบคุมขนาดและตำแหน่งได้ดีกว่า
ตัวอย่างเช่น โค้ดต่อไปนี้จะแสดงฟิลด์ image_128 ของสินค้าของรายการเป็นรูปภาพกว้าง 64px (โดยมีความสูงอัตโนมัติตามอัตราส่วนภาพ)
<span t-field="line.product_id.image_128" t-options-widget="image" t-options-width="64px"/>
ตัวเลือกต่อไปนี้พร้อมใช้งานสำหรับวิดเจ็ตรูปภาพ:
width: ความกว้างของรูปภาพ โดยปกติเป็นพิกเซลหรือหน่วยความยาว CSS (เช่นrem) (เว้นว่างไว้สำหรับความกว้างอัตโนมัติ)height: ความสูงของรูปภาพ โดยปกติเป็นพิกเซลหรือหน่วยความยาว CSS (เช่นrem) (เว้นว่างไว้สำหรับความสูงอัตโนมัติ)class: คลาส CSS ที่ใช้กับแท็กimgสามารถใช้ Bootstrap classes ได้alt: ข้อความทางเลือกของรูปภาพstyle: แอตทริบิวต์สไตล์ ช่วยให้คุณสามารถแทนที่สไตล์ได้อย่างอิสระมากกว่าการใช้ Bootstrap classes
แอตทริบิวต์เหล่านี้ต้องมีสตริง คือข้อความที่อยู่ในเครื่องหมายคำพูดภายในเครื่องหมายคำพูด เช่น t-options-width="'64px'" (หรือทางเลือกอื่น นิพจน์ Python ที่ถูกต้อง)
Note
วิดเจ็ตรูปภาพไม่สามารถใช้กับแท็ก img ได้ ให้ตั้งค่าคำสั่ง t-field บนโหนด span (สำหรับเนื้อหาแบบอินไลน์) หรือ div (สำหรับเนื้อหาแบบบลอก) แทน
ตัวอย่างเช่น ให้เพิ่มคอลัมน์พร้อมรูปภาพสินค้าในตารางใบเสนอราคา:
<table class="table table-sm o_main_table table-borderless mt-4">
<thead style="display: table-row-group">
<tr>
<th>Image</th>
<th name="th_description" class="text-start">Description</th>
<th>Product Category</th>
<th name="th_quantity" class="text-end">Quantity</th>
<th name="th_priceunit" class="text-end">Unit Price</th>
[...]
<t t-foreach="lines_to_report" t-as="line">
<t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal"/>
<tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
<t t-if="not line.display_type">
<td>
<span t-field="line.product_template_id.image_128"
t-options-widget="'image'"
t-options-width="'64px'"
t-options-class="'rounded-3 shadow img-thumbnail'"
/>
</td>
<td name="td_name"><span t-field="line.name">Bacon Burger</span></td>
<td t-out="line.product_id.categ_id.display_name"/>
แอตทริบิวต์ t-options-width จำกัดความกว้างของรูปภาพเป็น 64 พิกเซล และคลาส Bootstrap ที่ใช้ใน t-options-class จะสร้างเส้นขอบแบบภาพขนาดย่อพร้อมมุมมนและเงา