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