การ์ด

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

ส่วนต่างๆ ของการ์ด

ตัวอย่างการ์ดส่วนเสริม

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

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

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

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

การใช้บัตรหลายใบ

ตัวอย่างการ์ดส่วนเสริม

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

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

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