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

ส่วนเสริมของ Google Workspace จะอิงตามการ์ด ส่วนเสริมของเอดิเตอร์ใช้ HTML

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

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

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

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

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

อินเทอร์เฟซแบบการ์ดมีประโยชน์ดังนี้

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

Gmail เป็นแอปพลิเคชันโฮสต์เพียงแอปเดียวที่ส่วนเสริม Google Workspace สามารถขยายการทำงานได้บนอุปกรณ์เคลื่อนที่

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

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

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

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

• คู่มือเริ่มใช้งานส่วนเสริม "Cats" ของ Google Workspace ฉบับย่อ

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

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

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

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

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