การ์ด

ส่วนเสริม Google Workspace ที่อิงตามการ์ดจะปรากฏเป็นบานหน้าต่างในแถบด้านข้าง (หรือในอุปกรณ์เคลื่อนที่เป็นหน้าต่างกิจกรรมอื่นที่เข้าถึงได้ผ่านเมนู) ส่วนเสริมจะมีแถบเครื่องมือด้านบนที่ระบุส่วนเสริมและแสดง การ์ด ซึ่งโดยพื้นฐานแล้วคือ "หน้า" ของ UI ของส่วนเสริม Google Apps Script จะแสดง การ์ดในโค้ดโปรเจ็กต์โดยใช้ออบเจ็กต์ Card

กายวิภาคของการ์ด

ตัวอย่างบัตรเสริมที่แสดงรายละเอียดการติดต่อ

การ์ดคือกลุ่มขององค์ประกอบ UI ที่คุณออกแบบ การ์ดประกอบด้วยส่วนต่างๆ ดังนี้

  • ส่วนหัวของการ์ด ส่วนนี้จะระบุการ์ด โดยมีข้อความชื่อ และอาจมีข้อความชื่อรองและไอคอนด้วยก็ได้
  • ส่วนของการ์ดอย่างน้อย 1 ส่วน ส่วนเหล่านี้เป็นส่วนย่อยของพื้นที่ UI ของการ์ด ส่วนหนึ่งๆ อาจมีส่วนหัวของส่วนที่เป็นข้อความ ส่วนของการ์ดจะแยกออกจากกันในการ์ดด้วยเส้นแนวนอน หากส่วนของการ์ดมีขนาดใหญ่เป็นพิเศษ ระบบจะแสดงส่วนดังกล่าวเป็นส่วนที่ยุบได้โดยอัตโนมัติ ซึ่งผู้ใช้สามารถขยายหรือยุบได้ตามต้องการ การ์ดหนึ่งๆ มี ส่วนของการ์ดได้ไม่เกิน 100 ส่วน และควรมีเพียงไม่กี่ส่วนเพื่อให้ประสิทธิภาพดีขึ้น

  • ส่วนของการ์ดแต่ละส่วนจะมี UI widgetอย่างน้อย 1 รายการ วิดเจ็ตจะให้ข้อมูลหรือส่วนควบคุมแบบโต้ตอบแก่ผู้ใช้ การ์ดและส่วนของการ์ดเป็นวิดเจ็ต เชิงโครงสร้าง คุณจึงเพิ่มวิดเจ็ตดังกล่าวลงในส่วนของการ์ดไม่ได้ ส่วนของการ์ด หนึ่งๆ มีวิดเจ็ตได้ ไม่เกิน 100 รายการ, และควรมีวิดเจ็ตให้น้อยที่สุดเพื่อให้ประสิทธิภาพดีที่สุด

คุณควรออกแบบการ์ดโดยอิงตามกิจกรรมของผู้ใช้หรือชุดข้อมูลที่เฉพาะเจาะจง ตัวอย่างเช่น ส่วนเสริม Google Workspace ที่แสดงข้อมูลที่ดึงมาจาก Google ชีตอาจมีการ์ดแยกต่างหากสำหรับชีตแต่ละรายการที่ดึงข้อมูลมา

ใช้การ์ดหลายใบ

การ์ดส่วนเสริมตัวอย่างที่แสดง UI แบบง่าย

โดยปกติแล้วส่วนเสริมจะประกอบด้วยการ์ดมากกว่า 1 ใบ คุณสามารถ กำหนดค่าการ์ดเหล่านี้เป็นรายการสำหรับการนำทางพื้นฐาน หรือกำหนดค่าวิธีการนำทางที่ซับซ้อนมากขึ้น เพื่อควบคุมวิธีที่ผู้ใช้ย้ายไปมาระหว่างการ์ด ดูรายละเอียดได้ที่ การนำทางพื้นฐานด้วยการ์ดหลายใบ

หากส่วนเสริมใช้การนำทางพื้นฐาน เมื่อเปิดส่วนเสริมเป็นครั้งแรก แอปพลิเคชัน Google Workspace ที่ส่วนเสริมขยายจะสร้างรายการส่วนหัวของการ์ดและแสดงรายการดังกล่าวแก่ผู้ใช้ การคลิกส่วนหัวของการ์ดจะเป็นการเปิดการ์ดนั้น นอกจากนี้ยังมีลูกศรย้อนกลับเพื่อให้กลับไปที่รายการส่วนหัวของการ์ดได้ คุณไม่จำเป็นต้องเขียนโค้ดฟังก์ชันการทำงานของส่วนหัวและลูกศรย้อนกลับ เนื่องจากระบบจะดำเนินการให้โดยอัตโนมัติเมื่อคุณกำหนดการ์ดในส่วนเสริม

เมื่อออกแบบส่วนเสริม คุณควร จำกัดจำนวนการ์ด ที่จะแสดงพร้อมกัน เนื่องจากพื้นที่หน้าจอมีจำกัด นอกจากนี้ คุณควรหลีกเลี่ยงความซับซ้อนที่ไม่จำเป็นในการ์ด

คุณไม่สามารถเพิ่มวิดเจ็ตหรือส่วนของการ์ดมากกว่า 100 รายการลงในการ์ดหนึ่งๆ ได้ด้วยเหตุผลด้านประสิทธิภาพ