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

Ví dụ về thẻ tiện ích bổ sung

Tiện ích bổ sung của Google Workspace trình bày thông tin và người dùng trong thanh bên của ứng dụng lưu trữ Giao diện người dùng. Một 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ể của giao diện người dùng của tiện ích bổ sung và việc di chuyển đến thẻ mới thường chỉ là một vấn đề về việc tạo thẻ và đẩy thẻ này 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ể là thẻ không theo ngữ cảnh hoặc theo ngữ cảnh. Thẻ theo bối cảnh được trình bày cho người dùng khi ứng dụng lưu trữ trong một ngữ cảnh cụ thể. Ví dụ: khi mở một 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ủ) được hiển thị cho người dùng bên ngoài bối cảnh cụ thể của máy chủ lưu trữ. Ví dụ: khi người dùng xem hộp thư đến trong Gmail, thư mục chính trên Drive hoặc Lịch của họ.

Tiện ích bổ sung của Google Workspace tích hợp sẵn 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 là bao gồm một tập hợp tiện ích. Tiện ích hiển thị thông tin cho người dùng hoặc cung cấp các chế độ kiểm soát tương tác như nút.

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

  • Bạn không cần phải có 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à họ 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ẻ, điều quan trọng là phải hiểu các 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 tạo 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 của giao diện người dùng. Bạn cũng có thể thấy các mẫu bổ sung sau hữu ích để khi triển khai tiện ích bổ sung:

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

    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 cho phép người dùng dịch văn bản từ 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 cho thấy một giao diện phức tạp hơn Mẫu Tiện ích bổ sung của Google Workspace, trong đó cho thấy thông tin người dùng về người nhận thư trong 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 miền, vì nó sẽ sử dụng API Thư mục để truy xuất thông tin người dùng.