บทช่วยสอน BOS Document Designer

BOS Document Designer เป็นนักออกแบบที่ยืดหยุ่นซึ่งช่วยให้องค์กรสามารถสร้างและปรับแต่งแบบฟอร์มของตนเอง เช่น ใบแจ้งหนี้และใบเสนอราคา แบบฟอร์มเหล่านี้สามารถส่งออกเป็น JSON, HTML หรือ PDF ผลลัพธ์จะถูกสร้างขึ้นผ่านแอปแยกต่างหากที่ทํางานบน AWS แอปเดสก์ท็อปจะสร้าง JSON และส่งไปยัง Document Creator ซึ่งจะแยกวิเคราะห์และส่งคืนไฟล์ PDF หรือ HTML หากแอป Document Creator ไม่พร้อมใช้งาน ระบบจะส่งคืนข้อผิดพลาด JSON ไม่ถูกต้อง

Document Designer สามารถเชื่อมโยงไปยังธุรกรรมหรือข้อเสนอ

เอกสารได้รับการออกแบบโดยการวางแถบซ้อนกันจากบนลงล่างภายในกลุ่ม สามารถลากวงดนตรีเพื่อจัดลําดับใหม่ หรือย้ายไปยังกลุ่มอื่นได้ บางแบนด์ใช้ไม่ได้กับ HTML เนื่องจากอาศัยหน้าเว็บ (เช่น ส่วนท้ายของหน้า)

แบบอักษรโอเพ่นซอร์สสองแบบได้รับการสนับสนุนโดยแต่ละแบบมีสามสไตล์:

• Roboto Light, Regular และ Bold
• Roboto Serif, เบา, ปกติ และตัวหนา

หากข้อความมีตัวอักษรไทย ฟอนต์จะถูกแทนที่ด้วยฟอนต์เหล่านี้:

• Roboto Serif > Noto Sans Thai Looped
• โรโบโต้ > โนโต ซานไทย

บทช่วยสอนเหล่านี้อธิบายวิธีใช้ตัวออกแบบเอกสาร และควรอ่านร่วมกับอินเทอร์เฟซตัว ออกแบบเอกสาร ซึ่งจะอธิบายแถบและเขตข้อมูลโดยละเอียด

การนําทาง: เมนู > หลัก การตั้งค่า > ตัวออกแบบ > แบบฟอร์ม ตัวออกแบบเอกสาร BOS

---

วิธีการออกแบบเอกสาร

• การออกแบบมีความยืดหยุ่น
• คุณสามารถย้ายวงดนตรีไปรอบๆ และแก้ไขได้บ่อยเท่าที่คุณต้องการ
• สําหรับวัตถุประสงค์ของบทช่วยสอนนี้ จะใช้ทั้งสามกลุ่ม อย่างไรก็ตาม คุณสามารถแทรกเขตข้อมูลทั้งหมดลงในกลุ่มเนื้อหาและใช้เฉพาะกลุ่มนั้นเท่านั้น
• ดูบทความ ส่วนติดต่อตัวออกแบบเอกสาร BOS สําหรับตัวอย่างวิธีการใช้กลุ่ม

1. นําทางไปยังตัว ออกแบบเอกสาร
2. คลิก ใหม่ (ปุ่ม)
3. กรอกข้อมูลในฟิลด์ส่วนหัวดังนี้:
   1. คําอธิบาย = พิมพ์คําอธิบายสําหรับเอกสาร (เช่น ใบเสนอราคา)
   2. รหัส = พิมพ์คําอธิบายสั้น ๆ สําหรับเอกสาร (เช่น QT)
   3. ขนาดหน้า – ลึก x กว้าง (มม.) = พิมพ์ขนาดของหน้าเป็นมม. ในบล็อกด้านล่าง
      • หมายเหตุ ขนาดหน้ายอดนิยม:
        • A3: 420 มม. x 297 มม.
        • A4: 297 มม. x 210 มม.
        • A5: 210 มม. x 148 มม.
4. คลิก กลุ่ม (ปุ่ม) > ส่วนหัว
5. ยอมรับค่าเริ่มต้นเพื่อแสดงส่วนหัวในทุกหน้าทางด้านซ้าย (เช่น ไม่จําเป็นต้องเปลี่ยนแปลง)
6. คลิกขวาที่ ส่วนหัว แล้วคลิกช่องต่อไปนี้บนเมนูบริบท
   • รูปภาพและข้อความ
   • ไลน์
   • ส่วนหัวของธุรกรรม
   • หัวข้อ
   • ไลน์
7. ยอมรับค่าเริ่มต้นสําหรับรายการและกรอกรายการอื่นๆ โดยไปที่ลิงก์
8. คลิก กลุ่ม (ปุ่ม) > ร่างกาย.
9. ยอมรับค่าเริ่มต้นถัดจาก เนื้อหา ทางด้านซ้าย (เช่น เริ่มหน้าใหม่ = ไม่เลือก เก็บไว้ด้วยกัน = เลือก)
10. คลิกขวาที่เนื้อหา แล้วคลิกช่องต่อไปนี้บนเมนูบริบท
    • รายการธุรกรรม
    • ภาพ
    • ไลน์
11. ยอมรับค่าเริ่มต้นสําหรับรายการและกรอกรายการอื่นๆ โดยไปที่ลิงก์
12. คลิก กลุ่ม (ปุ่ม) > ส่วนท้าย
13. คลิกขวาที่ ส่วนท้าย แล้วคลิกฟิลด์ต่อไปนี้บนเมนูบริบท:
    • ยอดรวมธุรกรรม
    • ไลน์
    • ส่วนท้ายของหน้า
14. ยอมรับค่าเริ่มต้นสําหรับรายการและกรอกรายการอื่นๆ ตามที่อธิบายไว้ด้านล่าง
15. คลิก บันทึก (ปุ่ม)
16. คลิก การกระทํา (ปุ่ม) > PDF เพื่อดูตัวอย่างเอกสาร
17. ทําการเปลี่ยนแปลงตามต้องการ

---

วิธีทําให้เสร็จสมบูรณ์: รูปภาพและข้อความ

1. คําบรรยายภาพ

1. มองเห็นได้ = ยกเลิกการเลือกช่องทําเครื่องหมาย
2. ยอมรับค่าเริ่มต้นสําหรับฟิลด์อื่นๆ

2. ภาพ

1. URL รูปภาพ = วาง URL จากโลโก้ของคุณในคอลัมน์ ค่า (เช่น คัดลอกลิงก์จากโมดูลไฟล์แนบ)
2. ตําแหน่ง = เลือก ซ้าย จากรายการดรอปดาวน์
3. ความกว้าง (มม.) = 70
4. ความสูง (มม.) = 70

3. ข้อความ

1. เนื้อหา = คลิกดินสอแล้วพิมพ์หรือวางข้อมูลบริษัททั้งหมด
   • หมายเหตุ ดูภาพหน้าจอสําหรับตัวอย่าง ข้อมูลถูกนํามาจากแท็บ ผลลัพธ์ ของเอนทิตี และวางในบล็อกที่ให้ไว้
2. การจัดตําแหน่ง = เลือก ขวา จากรายการแบบเลื่อนลง
3. ชื่อแบบอักษร = เลือก Roboto – Regular จากรายการแบบเลื่อนลง
4. ขนาดตัวอักษร = 8
5. ความสูงของเส้น (em) = 1.4

4. เค้าโครง

1. ช่องว่างคอลัมน์ = 50
   • หมายเหตุ ช่องว่างนี้คือช่องว่างระหว่างรูปภาพและข้อความ

5. ระยะขอบ

1. ด้านบน (มม.) = 10
   • หมายเหตุ ระยะขอบนี้แสดงถึงพื้นที่ว่างที่ด้านบนของหน้า และจําเป็นเพื่อชดเชยพื้นที่ที่พิมพ์ได้ของเครื่องพิมพ์ (เช่น หากลูกค้าของคุณต้องการพิมพ์เอกสาร)
2. ด้านล่าง (มม.) = 0
3. ซ้าย (มม.) = 10
4. ขวา (มม.) = 10

6. การผูกข้อมูล

1. ปล่อยฟิลด์ว่างไว้ สําหรับวัตถุประสงค์ของตัวอย่างนี้ ส่วนหัวจะไม่เปลี่ยนแปลง ดังนั้น ส่วนนี้จึงไม่เสร็จสมบูรณ์

---

วิธีดําเนินการให้เสร็จสมบูรณ์: ส่วนหัวของธุรกรรม

1. ข้อความ

1. ป้ายชื่อ – ตัวเลข = ไม่
2. ป้ายชื่อ – วันที่ = วันที่
3. ป้ายชื่อ – วันครบกําหนด = ดูธุรกรรมหรือชนิดธุรกรรมที่เกี่ยวข้องเพื่อดูว่าคําบรรยายนี้ใช้ทําอะไร พิมพ์คําบรรยายที่เหมาะสม (ในตัวอย่างนี้ เว้นว่างไว้)
4. ฉลาก – VAT No. = หมายเลขภาษีมูลค่าเพิ่ม
5. ฉลาก – ตัวแทน = ตัวแทน
6. ชื่อแบบอักษร = เลือก Roboto Regular จากรายการแบบเลื่อนลง
7. ขนาดตัวอักษร = 10
8. ความสูงของเส้น (em) = 1.4

2. ระยะขอบ

1. ด้านบน (มม.) = 10
2. ด้านล่าง (มม.) = 0
3. ซ้าย (มม.) = 10
4. ขวา (มม.) = 10

---

วิธีการกรอกข้อมูล: คําบรรยายภาพ

1. คําบรรยายภาพ

1. เนื้อหา =
   1. คลิกดินสอแล้วพิมพ์ QUOTATION บนตัวแก้ไขบันทึกย่อ
   2. หรือใช้ฟิลด์ข้อมูล (เช่น ใบเสนอราคาสําหรับ [transaction_reference]) เพื่อแสดงข้อมูลเพิ่มเติม
   3. คลิก บันทึก (ปุ่ม) บนป๊อปอัป
      • หมายเหตุ คุณสามารถพิมพ์รูปแบบใดก็ได้ของชื่อ (เช่น Q U O T A T I O N, ~~ Quotation ~~)
      • หมายเหตุ ฟิลด์ข้อมูลที่พร้อมใช้งานจะแสดงอยู่ทางด้านซ้าย ดับเบิลคลิกที่รายการเพื่อเพิ่ม
2. การจัดตําแหน่ง = เลือก กึ่งกลาง จากรายการดรอปดาวน์
3. ชื่อแบบอักษร = เลือก Roboto – ตัวหนา จากรายการแบบเลื่อนลง
4. ขนาดตัวอักษร = 14 (หรือค่าอื่นใดหากคุณต้องการให้ข้อความใหญ่ขึ้นหรือเล็กลง (เช่น 12 หรือ 16)

2. ระยะขอบ

1. ด้านบน (มม.) = 0
   • หมายเหตุ ในตัวอย่างนี้ ระยะขอบถูกตั้งค่าโดยฟิลด์ส่วน หัวของธุรกรรม ก่อนหน้า
2. ด้านล่าง (มม.) = 0
   • หมายเหตุ ในตัวอย่างนี้ มาร์จิ้นถูกกําหนดโดยฟิลด์ รายการธุรกรรม ที่ตามมา
3. ซ้าย (มม.) = 10
4. ขวา (มม.) = 10

3. การผูกข้อมูล

1. ทดสอบ – รายการ (ID): เว้นว่างไว้
2. ทดสอบ = ธุรกรรม (ID): หากมีการเลือกช่องข้อมูลใด ๆ ภายใต้ 1 เนื้อหา ให้พิมพ์รหัสของใบเสนอราคาใดๆ ในฟิลด์นี้ที่มีการกรอกฟิลด์ที่เกี่ยวข้อง ไม่สําคัญว่าคุณจะเลือกอันไหน เนื่องจาก ID ใช้เพื่อสร้างตัวอย่างเพื่อวัตถุประสงค์ในการทดสอบเท่านั้น

---

วิธีดําเนินการให้เสร็จสมบูรณ์: รายการธุรกรรม

01. คอลัมน์ – หมายเลขสินค้า

1. ฉลาก = ไม่
2. การจัดตําแหน่ง = เลือก ซ้าย จากรายการดรอปดาวน์
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 10

02. คอลัมน์ – คําอธิบาย

1. ฉลาก = คําอธิบาย
2. การจัดตําแหน่ง = เลือก ซ้าย จากรายการดรอปดาวน์
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 63

03. คอลัมน์ – ปริมาณ

1. ฉลาก = จํานวน
2. การจัดตําแหน่ง = เลือก ขวา จากรายการแบบเลื่อนลง
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 12

04. คอลัมน์ – หน่วย

1. ฉลาก = หน่วย
2. การจัดตําแหน่ง = เลือก ซ้าย จากรายการดรอปดาวน์
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 15

05. คอลัมน์ – ราคาต่อหน่วย

1. ฉลาก = ราคาต่อหน่วย
2. การจัดตําแหน่ง = เลือก ขวา จากรายการแบบเลื่อนลง
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 20

06. คอลัมน์ – รวม ไม่รวม

1. ฉลาก = รวม (ไม่รวมภาษีมูลค่าเพิ่ม)
2. การจัดตําแหน่ง = เลือก ขวา จากรายการแบบเลื่อนลง
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 25

07. คอลัมน์ – ภาษีมูลค่าเพิ่ม

1. ฉลาก = ภาษีมูลค่าเพิ่ม
2. การจัดตําแหน่ง = เลือก ขวา จากรายการแบบเลื่อนลง
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 20

08. คอลัมน์ – Total Inc

1. ฉลาก = รวม (รวมภาษีมูลค่าเพิ่ม)
2. การจัดตําแหน่ง = เลือก ขวา จากรายการแบบเลื่อนลง
3. มองเห็นได้ = ทําเครื่องหมายที่ช่องทําเครื่องหมาย
4. ความกว้าง (มม.) = 25

09. ข้อความ

1. ชื่อแบบอักษร = เลือก Roboto – Regular จากรายการแบบเลื่อนลง
2. ขนาดตัวอักษร = 8

10. ระยะขอบ

1. ด้านบน (มม.) = 10
2. ด้านล่าง (มม.) = 0
3. ซ้าย (มม.) = 10
4. ขวา (มม.) = 10

---

วิธีดําเนินการให้เสร็จสมบูรณ์: ภาพ

1. คําบรรยายภาพ

1. มองเห็นได้ = ยกเลิกการเลือกช่องทําเครื่องหมาย (เว้นแต่คุณต้องการแสดงคําบรรยาย)
2. ยอมรับค่าเริ่มต้นสําหรับฟิลด์อื่นๆ

2. ภาพ

1. URL รูปภาพ = เว้นว่างไว้
   • หมายเหตุ URL ใดๆ ที่ป้อนที่นี่จะปรากฏบนเอกสารทุกฉบับ เราต้องการรูปภาพที่กําหนดเอง ดังนั้นจะป้อนในส่วนที่ 5: การผูกข้อมูล
2. ตําแหน่ง = เลือก กึ่งกลาง จากรายการดรอปดาวน์
3. ความกว้าง = 150
4. ความสูง = 150
   • หมายเหตุ: การตั้งค่านี้ถือว่ารูปภาพเป็นสี่เหลี่ยมจัตุรัส
   • เปลี่ยนอัตราส่วนสําหรับรูปภาพสี่เหลี่ยมผืนผ้า (เช่น 150 x 100)
   • เท่าที่เป็นไปได้ BOS Document Designer จะรักษาอัตราส่วนภาพไว้โดยไม่คํานึงถึงการตั้งค่าที่ป้อนที่นี่
   • หากเค้าโครงบิดเบี้ยว ให้ลดจํานวนความสูง

3. ระยะขอบ

1. ด้านบน (มม.) = 0
2. ด้านล่าง (มม.) = 10
3. ซ้าย (มม.) = 0
4. ขวา (มม.) = 0

5. การผูกข้อมูล

1. สินค้า (ID) = ป้อน ID ของสินค้าใดๆ รหัสนี้ใช้เพื่อแสดงตัวอย่างเอกสารและปรับแต่งเค้าโครงเท่านั้น
   1. หากต้องการค้นหารหัสของรายการ ให้ไปที่มุมมองรายการ ของรายการ
   2. คลิก มุมมอง (ปุ่ม) ถ้ารายการไม่ถูกเติม
   3. คลิกตัวเลือกฟิลด์ (*) แล้วคลิกช่องทําเครื่องหมายถัดจาก ID
   4. พิมพ์ส่วนหนึ่งของชื่อรายการที่คุณต้องการในบล็อกการค้นหา
   5. ค้นหาสินค้าและจดบันทึกหมายเลขที่แสดงในคอลัมน์ ID
2. สิ่งที่แนบมา (ชื่อ) = เลือกชื่อที่มีรูปภาพที่คุณต้องการแสดงจากรายการดรอปดาวน์

---

วิธีดําเนินการให้เสร็จสมบูรณ์: ยอดรวมของธุรกรรม

1. คอลัมน์ – ซ้าย

1. ข้อความ = พิมพ์ข้อความที่คุณต้องการแสดงต่อลูกค้าของคุณ ดูภาพหน้าจอด้านล่างสําหรับตัวอย่าง
2. ความกว้าง (มม.) = 60
   • หมายเหตุ คุณสามารถเพิ่มความกว้างได้หากไม่มีข้อความกึ่งกลาง

2. คอลัมน์ – ตรงกลาง

1. ข้อความ = พิมพ์ข้อความที่คุณต้องการแสดงต่อลูกค้าของคุณหรือเว้นว่างไว้โดยไม่มีข้อความ

3. คอลัมน์ – ขวา

1. ป้ายกํากับ – ผลรวมย่อย = ผลรวมย่อย
2. ฉลาก – VAT = VAT
3. ป้ายกํากับ – รวม = รวม
4. ความกว้าง (มม.) = 45
5. ความกว้างของฉลาก (มม.) = 20

4. ข้อความ

1. ชื่อแบบอักษร = เลือก Roboto – Regular จากรายการแบบเลื่อนลง
2. ขนาดตัวอักษร = 8
3. ความสูงของเส้น (em) = 1.4

5. ระยะขอบ

1. ด้านบน (มม.) = 10
2. ด้านล่าง (มม.) = 10
3. ซ้าย (มม.) = 10
4. ขวา (มม.) = 10

---

วิธีดําเนินการให้เสร็จสมบูรณ์: ส่วนท้ายของหน้า

1. คอลัมน์ – ซ้าย

1. ซ้าย = เลือก วันที่พิมพ์ จากรายการดรอปดาวน์เพื่อแสดงวันที่และเวลาที่เอกสารถูกสร้างขึ้น
2. ข้อความที่กําหนดเอง = เว้นว่างไว้

2. คอลัมน์ – ตรงกลาง

1. ตรงกลาง = เลือก ข้อความที่กําหนดเอง จากรายการแบบเลื่อนลง
2. ข้อความที่กําหนดเอง = พิมพ์ข้อความที่คุณต้องการแสดงมิฉะนั้นให้เว้นช่องว่างไว้

3. คอลัมน์ – ขวา

1. ขวา = เลือก ชุดหน้า จากรายการดรอปดาวน์เพื่อแสดงจํานวนหน้า
2. ข้อความที่กําหนดเอง = เว้นว่างไว้

4. ข้อความ

1. ชื่อแบบอักษร = เลือก Roboto – Regular จากรายการแบบเลื่อนลง
2. ขนาดตัวอักษร = 8

5. ระยะขอบ

1. ด้านบน (มม.) = 5
2. ด้านล่าง (มม.) = 15
   • หมายเหตุ ระยะขอบนี้แสดงถึงพื้นที่ว่างที่ด้านล่างของหน้า และจําเป็นเพื่อชดเชยพื้นที่ที่พิมพ์ได้ของเครื่องพิมพ์พื้นฐาน (เช่น หากลูกค้าของคุณต้องการพิมพ์เอกสาร)
3. ซ้าย (มม.) = 10
4. ขวา (มม.) = 10

---

---

เรียนรู้เพิ่มเติม

---