อินเทอร์เฟซที่ใช้การ์ด

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

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

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

การ์ดแต่ละใบจะแสดง UI ของส่วนเสริม ##39; บางรายการ และ การไปยังการ์ดใหม่เป็นเพียงกรณีหนึ่งในการสร้างการ์ดและพุชไปยังสแต็กการ์ดภายใน คุณกําหนดขั้นตอนการนําทางระหว่างการ์ดต่างๆ เพื่อประสบการณ์การโต้ตอบที่สมบูรณ์ได้

การ์ดอาจเป็นแบบไม่ใช่บริบทหรือตามบริบท การ์ดบริบทจะปรากฏต่อผู้ใช้เมื่อแอปพลิเคชันของโฮสต์อยู่ในบริบทเฉพาะ เช่น เมื่อเปิดข้อความ Gmail หรือกิจกรรมในปฏิทิน การ์ดที่ไม่ใช่บริบท (เช่น หน้าแรก) แสดงต่อผู้ใช้นอกบริบทเฉพาะของโฮสต์ เช่น เมื่อผู้ใช้ดูกล่องจดหมาย Gmail โฟลเดอร์ไดรฟ์หลัก หรือปฏิทิน

ส่วนเสริมของ Google Workspace ที่สร้างใน Apps Script จะใช้บริการการ์ดเพื่อสร้างอินเทอร์เฟซผู้ใช้จากการ์ด ส่วนเสริมที่สร้างในภาษาอื่นๆ ต้องแสดงผล JSON ที่มีการจัดรูปแบบอย่างถูกต้องเพื่อให้อินเทอร์เฟซแสดงผลเป็นการ์ด

การ์ดแต่ละใบประกอบด้วยส่วนหัวและส่วนการ์ดอย่างน้อย 1 ส่วน แต่ละส่วนประกอบด้วยชุดวิดเจ็ต วิดเจ็ตจะแสดงข้อมูลแก่ผู้ใช้ หรือให้ผู้ใช้ควบคุมการโต้ตอบต่างๆ เช่น ปุ่ม

อินเทอร์เฟซแบบการ์ดมีข้อดีดังต่อไปนี้

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

การสร้างอินเทอร์เฟซแบบการ์ด

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

อ้างอิงหน้าเหล่านี้เมื่อสร้างการ์ดและนําลักษณะการทํางานของ UI ไปใช้ คุณอาจดูตัวอย่างเพิ่มเติมต่อไปนี้ซึ่งใช้อ้างอิงได้เมื่อเพิ่มส่วนเสริม

  • ส่วนเสริม Google Workspace "Cats"quickstart

    ตัวอย่างส่วนเสริมนี้แสดง UI ส่วนเสริมของ Google Workspace แบบง่ายที่มีหลายหน้าและหน้าแรก

  • ส่วนเสริม Google Workspace: "แปลภาษา"

    ตัวอย่างส่วนเสริมนี้แสดงส่วนเสริมของ Google Workspace ซึ่งช่วยให้ผู้ใช้แปลข้อความจากภายในเอกสาร ชีต และสไลด์ได้

  • ส่วนเสริม Google Workspace: "รายชื่อทีม&quot

    ตัวอย่างส่วนเสริมนี้แสดงตัวอย่างส่วนเสริมที่ซับซ้อนของ Google Workspace ซึ่งแสดงข้อมูลผู้ใช้เกี่ยวกับผู้รับข้อความ Gmail, เครื่องมือแก้ไขไฟล์ในไดรฟ์ หรือผู้เข้าร่วมกิจกรรมในปฏิทิน คุณใช้ส่วนเสริมนี้ภายในโดเมนได้เท่านั้น เนื่องจากใช้ Admin SDK Directory API ในการเรียกข้อมูลผู้ใช้