Giao diện dựa trên thẻ

Thẻ tiện ích bổ sung mẫu

Tiện ích bổ sung của Google Workspace hiển thị thông tin và quyền kiểm soát của người dùng trong thanh bên của giao diện người dùng ứng dụng lưu trữ. Tiện ích bổ sung bao gồm một thanh công cụ nhận dạng chính cùng với một hoặc nhiều thẻ.

Mỗi thẻ đại diện cho một "trang" cụ thể trên giao diện người dùng của tiện ích bổ sung, và việc chuyển sang thẻ mới thường chỉ là việc tạo thẻ và đẩy thẻ vào ngăn xếp thẻ nội bộ. Bạn có thể xác định luồng điều hướng giữa các thẻ để có trải nghiệm tương tác phong phú.

Thẻ có thể không theo ngữ cảnh hoặc theo ngữ cảnh. Thẻ theo bối cảnh hiển thị cho người dùng khi ứng dụng lưu trữ nằm trong một ngữ cảnh cụ thể. Ví dụ: khi mở thư Gmail hoặc sự kiện trên Lịch. Thẻ không theo ngữ cảnh (chẳng hạn như trang chủ) hiển thị cho người dùng bên ngoài một ngữ cảnh cụ thể của máy chủ. Ví dụ: khi người dùng đang xem hộp thư đến trong Gmail, thư mục Drive chính hoặc Lịch.

Tiện ích bổ sung của Google Workspace tích hợp trong Apps Script sử dụng Dịch vụ thẻ để tạo giao diện người dùng từ thẻ. Tiện ích bổ sung được tích hợp bằng các ngôn ngữ khác phải trả về JSON có định dạng đúng để giao diện hiển thị dưới dạng thẻ.

Mỗi thẻ bao gồm một tiêu đề và một hoặc nhiều phần thẻ. Mỗi phần được bao gồm một tập hợp các tiện ích. Tiện ích cho người dùng thấy thông tin hoặc cung cấp các chế độ điều khiển tương tác như các nút.

Giao diện dựa trên thẻ có các lợi ích sau:

  • Không cần kiến thức về HTML hoặc CSS để tạo giao diện dựa trên thẻ.
  • Thẻ và tiện ích được tự động tạo kiểu để hoạt động tốt với các ứng dụng Google Workspace mà chúng mở rộng.

  • Giao diện dựa trên thẻ hoạt động trên cả máy tính và thiết bị di động, nhưng bạn chỉ cần xác định giao diện một lần.

Tạo giao diện dựa trên thẻ

Khi xây dựng tiện ích bổ sung dựa trên thẻ, bạn cần phải hiểu một số khái niệm và mẫu thiết kế. Các hướng dẫn sau đây cung cấp thông tin bạn cần để xây dựng các tiện ích bổ sung hiệu quả dựa trên thẻ:

Hãy tham khảo các trang này khi tạo thẻ và triển khai hành vi trên giao diện người dùng. Bạn cũng có thể tham khảo các mẫu bổ sung sau đây khi triển khai tiện ích bổ sung:

  • Bắt đầu nhanh về tiện ích bổ sung "Mèo" của Google Workspace

    Mẫu tiện ích bổ sung này cho thấy một giao diện người dùng đơn giản của Tiện ích bổ sung của Google Workspace, trong đó có nhiều trang và trang chủ.

  • Tiện ích bổ sung của Google Workspace: "Dịch"

    Mẫu tiện ích bổ sung này cho thấy một tiện ích bổ sung của Google Workspace, giúp người dùng dịch văn bản ngay trong Tài liệu, Trang tính và Trang trình bày.

  • Tiện ích bổ sung của Google Workspace: "Danh sách nhóm"

    Mẫu tiện ích bổ sung này hiển thị một mẫu Tiện ích bổ sung của Google Workspace phức tạp hơn. Mẫu này hiển thị thông tin người dùng về những người nhận thư trên Gmail, trình chỉnh sửa tệp trên Drive hoặc người tham dự sự kiện trên Lịch. Bạn chỉ có thể sử dụng tiện ích bổ sung này trong một miền, vì tiện ích bổ sung này sử dụng API Thư mục để truy xuất thông tin người dùng.