การ์ด

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

องค์ประกอบของการ์ด

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

• ส่วนหัวของการ์ด ซึ่งจะระบุการ์ด โดยจะมีข้อความชื่อ และอาจมีชื่อรองและไอคอน (ไม่บังคับ)

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

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

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

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

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

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

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