CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-com-google-api-grpc--proto-google-common-protos

Java Protocol Buffer classes for Google's common protos, providing type-safe access to core Google Cloud API structures and gRPC service definitions

Pending
Overview
Eval results
Files

apps-cards.mddocs/

Google Apps Card Framework

UI components and interactions for building interactive cards in Google Workspace applications. This framework enables rich user interfaces within Gmail, Google Chat, Google Calendar, and other Workspace apps.

Core Card Components

Card

Main card container that holds all other UI components.

class Card {
  repeated CardSection getSectionsList();
  CardHeader getHeader();
  String getName();
  CardFixedFooter getFixedFooter();
  DisplayStyle getDisplayStyle();
  
  static Card.Builder newBuilder();
  int getSectionsCount();
  CardSection getSections(int index);
  boolean hasHeader();
  boolean hasFixedFooter();
}

enum DisplayStyle {
  DISPLAY_STYLE_UNSPECIFIED(0),
  PEEK(1),
  REPLACE(2);
  
  int getNumber();
  static DisplayStyle forNumber(int value);
}

CardHeader

Header section of a card with title, subtitle, and image.

class CardHeader {
  String getTitle();
  String getSubtitle();
  ImageStyle getImageStyle();
  String getImageUrl();
  ImageAltTextType getImageAltText();
  
  static CardHeader.Builder newBuilder();
}

enum ImageStyle {
  IMAGE_STYLE_UNSPECIFIED(0),
  IMAGE(1),
  AVATAR(2);
  
  int getNumber();
  static ImageStyle forNumber(int value);
}

CardSection

Individual section within a card containing widgets.

class CardSection {
  String getHeader();
  repeated Widget getWidgetsList();
  boolean getCollapsible();
  int getUncollapsibleWidgetsCount();
  
  static CardSection.Builder newBuilder();
  int getWidgetsCount();
  Widget getWidgets(int index);
}

Widget Types

Widget

Base widget container that can hold different types of UI components.

class Widget {
  TextParagraph getTextParagraph();
  Image getImage();
  DecoratedText getDecoratedText();
  ButtonList getButtonList();
  TextInput getTextInput();
  SelectionInput getSelectionInput();
  DateTimePicker getDateTimePicker();
  Divider getDivider();
  Grid getGrid();
  Columns getColumns();
  HorizontalAlignment getHorizontalAlignment();
  
  static Widget.Builder newBuilder();
  // Has methods for each widget type
  boolean hasTextParagraph();
  boolean hasImage();
  boolean hasDecoratedText();
  // ... etc
}

enum HorizontalAlignment {
  HORIZONTAL_ALIGNMENT_UNSPECIFIED(0),
  START(1),
  CENTER(2),
  END(3);
  
  int getNumber();
  static HorizontalAlignment forNumber(int value);
}

Text and Display Components

TextParagraph

Simple text display widget.

class TextParagraph {
  String getText();
  int getMaxLines();
  
  static TextParagraph.Builder newBuilder();
}

DecoratedText

Text with optional icons, buttons, and formatting.

class DecoratedText {
  Icon getIcon();
  String getTopLabel();
  String getText();
  boolean getWrapText();
  String getBottomLabel();
  OnClick getOnClick();
  Button getButton();
  SwitchControl getSwitchControl();
  
  static DecoratedText.Builder newBuilder();
  boolean hasIcon();
  boolean hasOnClick();
  boolean hasButton();
  boolean hasSwitchControl();
}

Image

Image display widget with various styling options.

class Image {
  String getImageUrl();
  OnClick getOnClick();
  double getAspectRatio();
  String getAltText();
  
  static Image.Builder newBuilder();
  boolean hasOnClick();
}

Icon

Icon representation with various sources.

class Icon {
  String getKnownIcon();
  String getIconUrl();
  String getAltText();
  ImageType getImageType();
  
  static Icon.Builder newBuilder();
}

enum ImageType {
  IMAGE_TYPE_UNSPECIFIED(0),
  SQUARE(1),
  CIRCLE(2);
  
  int getNumber();
  static ImageType forNumber(int value);
}

Input Components

TextInput

Text input field for user data entry.

class TextInput {
  String getName();
  String getLabel();
  String getHintText();
  String getValue();
  Type getType();
  OnChangeAction getOnChangeAction();
  Suggestions getSuggestions();
  boolean getMultiline();
  
  static TextInput.Builder newBuilder();
  
  enum Type {
    SINGLE_LINE(0),
    MULTIPLE_LINE(1);
    
    int getNumber();
    static Type forNumber(int value);
  }
  
  boolean hasOnChangeAction();
  boolean hasSuggestions();
}

SelectionInput

Selection input with various selection types.

class SelectionInput {
  String getName();
  String getLabel();
  Type getType();
  repeated SelectionItem getItemsList();
  OnChangeAction getOnChangeAction();
  PlatformDataSource getPlatformDataSource();
  
  static SelectionInput.Builder newBuilder();
  
  enum Type {
    CHECK_BOX(0),
    RADIO_BUTTON(1),
    SWITCH(2),
    DROPDOWN(3);
    
    int getNumber();
    static Type forNumber(int value);
  }
  
  int getItemsCount();
  SelectionItem getItems(int index);
  boolean hasOnChangeAction();
  boolean hasPlatformDataSource();
}

class SelectionItem {
  String getText();
  String getValue();
  boolean getSelected();
  
  static SelectionItem.Builder newBuilder();
}

DateTimePicker

Date and time picker input.

class DateTimePicker {
  String getName();
  String getLabel();
  Type getType();
  long getValueMsEpoch();
  int getTimezoneOffsetDate();
  OnChangeAction getOnChangeAction();
  
  static DateTimePicker.Builder newBuilder();
  
  enum Type {
    DATE_AND_TIME(0),
    DATE_ONLY(1),
    TIME_ONLY(2);
    
    int getNumber();
    static Type forNumber(int value);
  }
  
  boolean hasOnChangeAction();
}

Suggestions

Auto-complete suggestions for text inputs.

class Suggestions {
  repeated SuggestionItem getItemsList();
  
  static Suggestions.Builder newBuilder();
  int getItemsCount();
  SuggestionItem getItems(int index);
}

class SuggestionItem {
  String getText();
  
  static SuggestionItem.Builder newBuilder();
}

Interactive Components

Button

Interactive button with various styles and actions.

class Button {
  String getText();
  Icon getIcon();
  Color getColor();
  OnClick getOnClick();
  boolean getDisabled();
  String getAltText();
  
  static Button.Builder newBuilder();
  boolean hasIcon();
  boolean hasColor();
  boolean hasOnClick();
}

enum Color {
  COLOR_UNSPECIFIED(0),
  RED(1),
  GREEN(2),
  BLUE(3),
  GREY(4);
  
  int getNumber();
  static Color forNumber(int value);
}

ButtonList

List of buttons arranged horizontally or vertically.

class ButtonList {
  repeated Button getButtonsList();
  
  static ButtonList.Builder newBuilder();
  int getButtonsCount();
  Button getButtons(int index);
}

SwitchControl

Toggle switch control.

class SwitchControl {
  String getName();
  String getValue();
  boolean getSelected();
  OnChangeAction getOnChangeAction();
  ControlType getControlType();
  
  static SwitchControl.Builder newBuilder();
  boolean hasOnChangeAction();
  
  enum ControlType {
    SWITCH(0),
    CHECKBOX(1);
    
    int getNumber();
    static ControlType forNumber(int value);
  }
}

Layout Components

Grid

Grid layout for organizing widgets in rows and columns.

class Grid {
  String getTitle();
  repeated GridItem getItemsList();
  int getColumnCount();
  OnClick getOnClick();
  BorderStyle getBorderStyle();
  
  static Grid.Builder newBuilder();
  int getItemsCount();
  GridItem getItems(int index);
  boolean hasOnClick();
  boolean hasBorderStyle();
}

class GridItem {
  String getId();
  Image getImage();
  String getTitle();
  String getSubtitle();
  GridItemLayout getLayout();
  
  static GridItem.Builder newBuilder();
  boolean hasImage();
  
  enum GridItemLayout {
    GRID_ITEM_LAYOUT_UNSPECIFIED(0),
    TEXT_BELOW(1),
    TEXT_ABOVE(2);
    
    int getNumber();
    static GridItemLayout forNumber(int value);
  }
}

Columns

Column-based layout for widgets.

class Columns {
  repeated Column getColumnsList();
  
  static Columns.Builder newBuilder();
  int getColumnsCount();
  Column getColumns(int index);
}

class Column {
  HorizontalSizeStyle getHorizontalSizeStyle();
  HorizontalAlignment getHorizontalAlignment();
  VerticalAlignment getVerticalAlignment();
  repeated Widget getWidgetsList();
  
  static Column.Builder newBuilder();
  int getWidgetsCount();
  Widget getWidgets(int index);
  
  enum HorizontalSizeStyle {
    HORIZONTAL_SIZE_STYLE_UNSPECIFIED(0),
    FILL_AVAILABLE_SPACE(1),
    FILL_MINIMUM_SPACE(2);
    
    int getNumber();
    static HorizontalSizeStyle forNumber(int value);
  }
  
  enum VerticalAlignment {
    VERTICAL_ALIGNMENT_UNSPECIFIED(0),
    CENTER(1),
    TOP(2),
    BOTTOM(3);
    
    int getNumber();
    static VerticalAlignment forNumber(int value);
  }
}

Divider

Visual divider between sections.

class Divider {
  // Divider has no configurable properties
  static Divider.Builder newBuilder();
}

Actions and Events

OnClick

Click event handler for interactive elements.

class OnClick {
  Action getAction();
  OpenLink getOpenLink();
  Card getCard();
  
  static OnClick.Builder newBuilder();
  boolean hasAction();
  boolean hasOpenLink();
  boolean hasCard();
}

Action

Defines an action to be performed.

class Action {
  String getFunction();
  repeated ActionParameter getParametersList();
  String getLoadIndicator();
  boolean getPersistValues();
  String getInteraction();
  
  static Action.Builder newBuilder();
  int getParametersCount();
  ActionParameter getParameters(int index);
  
  enum LoadIndicator {
    SPINNER(0),
    NONE(1);
    
    int getNumber();
    static LoadIndicator forNumber(int value);
  }
  
  enum Interaction {
    INTERACTION_UNSPECIFIED(0),
    OPEN_DIALOG(1);
    
    int getNumber();
    static Interaction forNumber(int value);
  }
}

class ActionParameter {
  String getKey();
  String getValue();
  
  static ActionParameter.Builder newBuilder();
}

OnChangeAction

Action triggered when input values change.

class OnChangeAction {
  Action getAction();
  
  static OnChangeAction.Builder newBuilder();
  boolean hasAction();
}

OpenLink

Action to open a URL.

class OpenLink {
  String getUrl();
  OpenAs getOpenAs();
  OnClose getOnClose();
  
  static OpenLink.Builder newBuilder();
  
  enum OpenAs {
    FULL_SIZE(0),
    OVERLAY(1);
    
    int getNumber();
    static OpenAs forNumber(int value);
  }
  
  enum OnClose {
    NOTHING(0),
    RELOAD(1);
    
    int getNumber();
    static OnClose forNumber(int value);
  }
}

Styling Components

BorderStyle

Border styling options for grid and other components.

class BorderStyle {
  Type getType();
  Color getStrokeColor();
  int getCornerRadius();
  
  static BorderStyle.Builder newBuilder();
  boolean hasStrokeColor();
  
  enum Type {
    TYPE_UNSPECIFIED(0),
    NO_BORDER(1),
    STROKE(2);
    
    int getNumber();
    static Type forNumber(int value);
  }
}

CardFixedFooter

Fixed footer for cards with primary and secondary buttons.

class CardFixedFooter {
  Button getPrimaryButton();
  Button getSecondaryButton();
  
  static CardFixedFooter.Builder newBuilder();
  boolean hasPrimaryButton();
  boolean hasSecondaryButton();
}

Usage Examples

Creating a Basic Card

import com.google.apps.card.v1.*;

Card basicCard = Card.newBuilder()
    .setHeader(CardHeader.newBuilder()
        .setTitle("Project Status")
        .setSubtitle("Development Update")
        .setImageStyle(ImageStyle.AVATAR)
        .setImageUrl("https://example.com/project-icon.png")
        .build())
    .addSections(CardSection.newBuilder()
        .setHeader("Current Status")
        .addWidgets(Widget.newBuilder()
            .setTextParagraph(TextParagraph.newBuilder()
                .setText("The project is 85% complete. All major features have been implemented.")
                .build())
            .build())
        .addWidgets(Widget.newBuilder()
            .setDecoratedText(DecoratedText.newBuilder()
                .setTopLabel("Progress")
                .setText("85%")
                .setIcon(Icon.newBuilder()
                    .setKnownIcon("STAR")
                    .build())
                .build())
            .build())
        .build())
    .build();

Form Input Card

Card formCard = Card.newBuilder()
    .setHeader(CardHeader.newBuilder()
        .setTitle("User Registration")
        .build())
    .addSections(CardSection.newBuilder()
        .addWidgets(Widget.newBuilder()
            .setTextInput(TextInput.newBuilder()
                .setName("firstName")
                .setLabel("First Name")
                .setHintText("Enter your first name")
                .setType(TextInput.Type.SINGLE_LINE)
                .build())
            .build())
        .addWidgets(Widget.newBuilder()
            .setTextInput(TextInput.newBuilder()
                .setName("email")
                .setLabel("Email Address")
                .setHintText("you@example.com")
                .setType(TextInput.Type.SINGLE_LINE)
                .build())
            .build())
        .addWidgets(Widget.newBuilder()
            .setSelectionInput(SelectionInput.newBuilder()
                .setName("department")
                .setLabel("Department")
                .setType(SelectionInput.Type.DROPDOWN)
                .addItems(SelectionItem.newBuilder()
                    .setText("Engineering")
                    .setValue("eng")
                    .build())
                .addItems(SelectionItem.newBuilder()
                    .setText("Marketing")
                    .setValue("marketing")
                    .build())
                .build())
            .build())
        .build())
    .setFixedFooter(CardFixedFooter.newBuilder()
        .setPrimaryButton(Button.newBuilder()
            .setText("Submit")
            .setColor(Button.Color.BLUE)
            .setOnClick(OnClick.newBuilder()
                .setAction(Action.newBuilder()
                    .setFunction("submitRegistration")
                    .build())
                .build())
            .build())
        .setSecondaryButton(Button.newBuilder()
            .setText("Cancel")
            .build())
        .build())
    .build();

Interactive Grid Card

Card gridCard = Card.newBuilder()
    .setHeader(CardHeader.newBuilder()
        .setTitle("Project Gallery")
        .build())
    .addSections(CardSection.newBuilder()
        .addWidgets(Widget.newBuilder()
            .setGrid(Grid.newBuilder()
                .setTitle("Recent Projects")
                .setColumnCount(2)
                .setBorderStyle(BorderStyle.newBuilder()
                    .setType(BorderStyle.Type.STROKE)
                    .setCornerRadius(8)
                    .build())
                .addItems(GridItem.newBuilder()
                    .setId("project1")
                    .setTitle("Mobile App")
                    .setSubtitle("iOS & Android")
                    .setImage(Image.newBuilder()
                        .setImageUrl("https://example.com/mobile-icon.png")
                        .build())
                    .setLayout(GridItem.GridItemLayout.TEXT_BELOW)
                    .build())
                .addItems(GridItem.newBuilder()
                    .setId("project2")
                    .setTitle("Web Dashboard")
                    .setSubtitle("React Application")
                    .setImage(Image.newBuilder()
                        .setImageUrl("https://example.com/web-icon.png")
                        .build())
                    .setLayout(GridItem.GridItemLayout.TEXT_BELOW)
                    .build())
                .setOnClick(OnClick.newBuilder()
                    .setAction(Action.newBuilder()
                        .setFunction("openProject")
                        .addParameters(ActionParameter.newBuilder()
                            .setKey("projectId")
                            .setValue("${selectedItem.id}")
                            .build())
                        .build())
                    .build())
                .build())
            .build())
        .build())
    .build();

Multi-Column Layout

Card columnsCard = Card.newBuilder()
    .setHeader(CardHeader.newBuilder()
        .setTitle("Dashboard")
        .build())
    .addSections(CardSection.newBuilder()
        .addWidgets(Widget.newBuilder()
            .setColumns(Columns.newBuilder()
                .addColumns(Column.newBuilder()
                    .setHorizontalSizeStyle(Column.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
                    .setVerticalAlignment(Column.VerticalAlignment.TOP)
                    .addWidgets(Widget.newBuilder()
                        .setTextParagraph(TextParagraph.newBuilder()
                            .setText("Left Column Content")
                            .build())
                        .build())
                    .addWidgets(Widget.newBuilder()
                        .setButton(Button.newBuilder()
                            .setText("Action 1")
                            .setColor(Button.Color.BLUE)
                            .build())
                        .build())
                    .build())
                .addColumns(Column.newBuilder()
                    .setHorizontalSizeStyle(Column.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
                    .setVerticalAlignment(Column.VerticalAlignment.TOP)
                    .addWidgets(Widget.newBuilder()
                        .setTextParagraph(TextParagraph.newBuilder()
                            .setText("Right Column Content")
                            .build())
                        .build())
                    .addWidgets(Widget.newBuilder()
                        .setButton(Button.newBuilder()
                            .setText("Action 2")
                            .setColor(Button.Color.GREEN)
                            .build())
                        .build())
                    .build())
                .build())
            .build())
        .build())
    .build();

Date/Time Picker Example

Card schedulingCard = Card.newBuilder()
    .setHeader(CardHeader.newBuilder()
        .setTitle("Schedule Meeting")
        .build())
    .addSections(CardSection.newBuilder()
        .addWidgets(Widget.newBuilder()
            .setDateTimePicker(DateTimePicker.newBuilder()
                .setName("meetingDate")
                .setLabel("Meeting Date")
                .setType(DateTimePicker.Type.DATE_AND_TIME)
                .setOnChangeAction(OnChangeAction.newBuilder()
                    .setAction(Action.newBuilder()
                        .setFunction("validateDate")
                        .build())
                    .build())
                .build())
            .build())
        .addWidgets(Widget.newBuilder()
            .setTextInput(TextInput.newBuilder()
                .setName("agenda")
                .setLabel("Meeting Agenda")
                .setMultiline(true)
                .setSuggestions(Suggestions.newBuilder()
                    .addItems(SuggestionItem.newBuilder()
                        .setText("Project Review")
                        .build())
                    .addItems(SuggestionItem.newBuilder()
                        .setText("Budget Discussion")
                        .build())
                    .build())
                .build())
            .build())
        .build())
    .build();

Best Practices

Card Design

  1. Keep it simple: Avoid overwhelming users with too many widgets in a single card
  2. Logical grouping: Use sections to group related content
  3. Consistent styling: Use consistent colors and icons throughout your cards
  4. Clear labels: Provide clear, descriptive labels for all input fields

Performance

  1. Lazy loading: Load card content incrementally for better performance
  2. Image optimization: Use appropriately sized images and consider caching
  3. Action debouncing: Debounce user input actions to avoid excessive API calls

Accessibility

  1. Alt text: Always provide alt text for images and icons
  2. Keyboard navigation: Ensure all interactive elements are keyboard accessible
  3. Screen readers: Test with screen readers to ensure good accessibility
  4. Color contrast: Use sufficient color contrast for text and backgrounds

Install with Tessl CLI

npx tessl i tessl/maven-com-google-api-grpc--proto-google-common-protos

docs

api-infrastructure.md

apps-cards.md

cloud-platform.md

common-types.md

index.md

longrunning-operations.md

rpc-status.md

tile.json