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