Cards v2

Card

A card is a UI element that can contain UI widgets such as text and images. For more information, see Cards . For example, the following JSON creates a card that has a header with the name, position, icons, and link for a contact, followed by a section with contact information like email and phone number. 

{
  "header": {
    "title": "Sasha",
    "subtitle": "Software Engineer",
    "imageStyle": "ImageStyle.AVATAR",
    "imageUrl": "https://example.com/sasha.png",
    "imageAltText": "Avatar for Sasha"
  },
  "sections" : [
    {
      "header": "Contact Info",
      "widgets": [
        {
          "decoratedText": {
            "icon": {
              "knownIcon": "EMAIL"
            },
            "content": "sasha@example.com"
          }
        },
        {
          "decoratedText": {
            "icon": {
              "knownIcon": "PERSON"
            },
            "content": "<font color=\"#80e27e\">Online</font>"
          }
        },
        {
          "decoratedText": {
            "icon": {
              "knownIcon": "PHONE"
            },
            "content": "+1 (555) 555-1234"
          }
        },
        {
          "buttons": [
            {
              "textButton": {
                "text": "Share",
              },
              "onClick": {
                "openLink": {
                  "url": "https://example.com/share"
                }
              }
            },
            {
              "textButton": {
                "text": "Edit",
              },
              "onClick": {
                "action": {
                  "function": "goToView",
                  "parameters": [
                    {
                      "key": "viewType",
                      "value": "EDIT"
                    }
                  ],
                  "loadIndicator": "LoadIndicator.SPINNER"
                }
              }
            }
          ]
        }
      ],
      "collapsible": true,
      "uncollapsibleWidgetsCount": 3
    }
  ],
  "cardActions": [
    {
      "actionLabel": "Send Feedback",
      "onClick": {
        "openLink": {
          "url": "https://example.com/feedback"
        }
      }
    }
  ],
  "name": "contact-card-K3wB6arF2H9L"
}
JSON representation 
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Fields
header

object ( CardHeader )

The header of the card. A header usually contains a title and an image.

sections[]

object ( Section )

Sections are separated by a line divider.

cardActions[]

object ( CardAction )

The card's actions. Actions are added to the card's generated toolbar menu. For example, the following JSON constructs a card action menu with Settings and Send Feedback options: 

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

Name of the card. Used as a card identifier in card navigation.

displayStyle

enum ( DisplayStyle )

The peekCardHeader display style. Not supported by Google Chat apps.

peekCardHeader

object ( CardHeader )

When displaying contextual content, the peek card header acts as a placeholder so that the user can navigate forward between the homepage cards and the contextual cards.

Not supported by Google Chat apps.

CardHeader

Represents a card header.

JSON representation 
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Fields
title

string

Required. The title of the card header. The header has a fixed height: if both a title and subtitle are specified, each takes up one line. If only the title is specified, it takes up both lines.

subtitle

string

The subtitle of the card header.

imageType

enum ( ImageType )

The image's type.

imageUrl

string

The URL of the image in the card header.

imageAltText

string

The alternative text of this image which is used for accessibility.

ImageType

The image type determines the cropping of the image that it is applied to. SQUARE means that no cropping is applied, CIRCLE applies a circular mask to the image.

Enums
SQUARE Applies no cropping to the image.
CIRCLE Applies a circular mask to the image.

Section

A section contains a collection of widgets that are rendered vertically in the order that they are specified. Across all platforms, cards have a narrow fixed width, so there is currently no need for layout properties, for example, float.

JSON representation 
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Fields
header

string

The header of the section. Formatted text is supported.

widgets[]

object ( Widget )

A section must contain at least 1 widget.

collapsible

boolean

Indicates whether this section is collapsible. If a section is collapsible, the description must be given.

uncollapsibleWidgetsCount

integer

The number of uncollapsible widgets. For example, when a section contains five widgets and the uncollapsibleWidgetsCount is set to 2 , the first two widgets are always shown and the last three are collapsed as default. The uncollapsibleWidgetsCount is taken into account only when collapsible is true .

Widget

A widget is a UI element that presents texts, images, etc.

JSON representation 
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  }
  // End of list of possible types for union field data.
}
Fields
horizontalAlignment

enum ( HorizontalAlignment )

The horizontal alignment of this widget.

Union field data . A widget can only have one of the following items. You can use multiple widget fields to display more items. data can be only one of the following:
textParagraph

object ( TextParagraph )

Displays a text paragraph in this widget. For example, the following JSON creates a bolded text: 

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object ( Image )

Displays an image in this widget. For example, the following JSON creates an image with alternative text: 

"image": {
  "imageUrl": "https://example.com/sasha.png"
  "altText": "Avatar for Sasha"
}
decoratedText

object ( DecoratedText )

Displays a decorated text item in this widget. For example, the following JSON creates a decorated text widget showing email address: 

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "content": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchWidget": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "ControlType.CHECKBOX"
  }
}
buttonList

object ( ButtonList )

A list of buttons. For example, the following JSON creates two buttons. The first is a filled text button and the second is an image button that opens a link: 

"buttonList": {
  "buttons": [
    "button": {
      "text": "Edit",
      "Color": {
        "Red": 255
        "Green": 255
        "Blue": 255
       }
      "disabled": true
    },
    "button": {
      "icon": {
        "knownIcon": "INVITE"
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    },
  ]
}
textInput

object ( TextInput )

Displays a text input in this widget. For example, the following JSON creates a text input for mail address: 

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

As another example, the following JSON creates a text input for programming language with static suggestions: 

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object ( SelectionInput )

Displays a switch control in this widget. For example, the following JSON creates a dropdown selection for size: 

"switchControl": {
  "name": "size",
  "label": "Size"
  "type": "SelectionType.DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object ( DateTimePicker )

Displays a selection/input widget for date/time. For example, the following JSON creates a date/time picker for an appointment time: 

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DateTimePickerType.DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object ( Divider )

Displays a divider. For example, the following JSON creates a divider: 

"divider": {
}
grid

object ( Grid )

Displays a grid with a collection of items. For example, the following JSON creates a 2 column grid with a single item: 

"grid": {
  "title": "A fine collection of items",
  "numColumns": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4.0
  },
  "items": [
    "image": {
      "imageUri": "https://www.example.com/image.png",
      "cropStyle": {
        "type": "SQUARE"
      },
      "borderStyle": {
        "type": "STROKE"
      }
    },
    "title": "An item",
    "textAlignment": "CENTER"
  ],
  "onClick": {
    "openLink": {
      "url":"https://www.example.com"
    }
  }
}

TextParagraph

A paragraph of text that supports formatting. See Text formatting for details.

JSON representation 
{
  "text": string
}
Fields
text

string

The text that's shown in the widget.

Image

An image that is specified by a URL and can have an onClick action.

JSON representation 
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Fields
imageUrl

string

An image URL.

onClick

object ( OnClick )

The action triggered by an onClick event.

altText

string

The alternative text of this image, used for accessibility.

OnClick

Represents the response to an onClick event.

JSON representation 
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
Fields

Union field data .

data can be only one of the following:

action

object ( Action )

If specified, an action is triggered by this onClick .

card

object ( Card )

A new card is pushed to the card stack after clicking if specified.

Action

An action that describes the behavior when the form is submitted. For example, an Apps Script can be invoked to handle the form.

JSON representation 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean
}
Fields
function

string

Apps Script function to invoke when the containing element is clicked/activated.

parameters[]

object ( ActionParameter )

List of action parameters.

loadIndicator

enum ( LoadIndicator )

Specifies the loading indicator that the action displays while making the call to the action.

persistValues

boolean

Indicates whether form values persist after the action. The default value is false .

If true , form values remain after the action is triggered. When using LoadIndicator.NONE for actions, persistValues = true is recommended, as it ensures that any changes made by the user after form or on change actions are sent to the server are not overwritten by the response.

If false , the form values are cleared when the action is triggered. When persistValues is set to false , it is strongly recommended that the card use LoadIndicator.SPINNER for all actions, as this locks the UI to ensure no changes are made by the user while the action is being processed.

Not supported by Google Chat apps.

ActionParameter

List of string parameters to supply when the action method is invoked. For example, consider three snooze buttons: snooze now, snooze 1 day, snooze next week. You might use action method = snooze(), passing the snooze type and snooze time in the list of string parameters.

JSON representation 
{
  "key": string,
  "value": string
}
Fields
key

string

The name of the parameter for the action script.

value

string

The value of the parameter.

LoadIndicator

Specifies the loading indicator that the action displays while making the call to the action.

Enums
SPINNER Displays a spinner to indicate that content is loading.
NONE Nothing is displayed.

OpenAs

When an OnClick opens a link, then the client can either open it as a full size window (if that is the frame used by the client), or an overlay (such as a pop-up). The implementation depends on the client platform capabilities, and the value selected might be ignored if the client doesn't support it. FULL_SIZE is supported by all clients. Not supported by Chat apps.

Enums
FULL_SIZE The link opens as a full size window (if that's the frame used by the client.
OVERLAY The link opens as an overlay, such as a pop-up.

OnClose

When an OnClick opens a link, then the client either forgets about it or observes until the window closes. The implementation depends on the client platform capabilities.

OnClose might cause OpenAs to be ignored; if the client platform can't support both selected values together, OnClose takes precedence. Not supported by Chat apps.

Enums
NOTHING Doesn’t reload the card after the child window closes.
RELOAD

Reloads the card after the child window closes.

If used in conjunction with OpenAs.OVERLAY , the child window acts as a modal dialog and the main card is blocked until the child window closes.

DecoratedText

A widget that displays text with optional decorations such as a label above or below the text, an icon in front of the text, a selection widget or a button after the text.

JSON representation 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Fields
icon
(deprecated)

object ( Icon )

Deprecated in favor of startIcon.

startIcon

object ( Icon )

The icon displayed in front of the text.

topLabel

string

The formatted text label that shows above the main text.

text

string

Required. The main widget formatted text. See Text formatting for details.

wrapText

boolean

The wrap text setting. If true , the text is wrapped and displayed in multiline. Otherwise, the text is truncated.

bottomLabel

string

The formatted text label that shows below the main text.

onClick

object ( OnClick )

Only the top and bottom label and content region are clickable.

Union field control . A control widget or image that appears after the text. You can set a button, switch control, or image, but not more than one. control can be only one of the following:
button

object ( Button )

A button that can be clicked to trigger an action.

switchControl

object ( SwitchControl )

A switch widget can be clicked to change its state or trigger an action.

endIcon

object ( Icon )

An icon displayed after the text.

Icon

JSON representation 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Fields
altText

string

The description of the icon, used for accessibility. The default value is provided if you don't specify one.

imageType

enum ( ImageType )

The crop style applied to the image. In some cases, applying a CIRCLE crop causes the image to be drawn larger than a standard icon.

Union field icons . The icon, can be specified by KnownIcon string or a URL. icons can be only one of the following:
knownIcon

string

The icon specified by the string name of a list of known icons.

iconUrl

string

The icon specified by a URL.

Button

A button. Can be a text button or an image button.

JSON representation 
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Fields
text

string

The text of the button.

icon

object ( Icon )

The icon image.

color

object ( Color )

If set, the button is filled with a solid background.

onClick

object ( OnClick )

The action to perform when the button is clicked.

disabled

boolean

If true , the button is displayed in a disabled state and doesn't respond to user actions.

altText

string

The alternative text used for accessibility. Has no effect when an icon is set; use icon.alt_text instead.

Color

Represents a color in the RGBA color space. This representation is designed for simplicity of conversion to/from color representations in various languages over compactness. For example, the fields of this representation can be trivially provided to the constructor of java.awt.Color in Java; it can also be trivially provided to UIColor's +colorWithRed:green:blue:alpha method in iOS; and, with just a little work, it can be easily formatted into a CSS rgba() string in JavaScript.

This reference page doesn't carry information about the absolute color space that should be used to interpret the RGB value (e.g. sRGB, Adobe RGB, DCI-P3, BT.2020, etc.). By default, applications should assume the sRGB color space.

When color equality needs to be decided, implementations, unless documented otherwise, treat two colors as equal if all their red, green, blue, and alpha values each differ by at most 1e-5.

Example (Java): 

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Example (iOS / Obj-C): 

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Example (JavaScript): 

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
JSON representation 
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Fields
red

number

The amount of red in the color as a value in the interval [0, 1].

green

number

The amount of green in the color as a value in the interval [0, 1].

blue

number

The amount of blue in the color as a value in the interval [0, 1].

alpha

number

The fraction of this color that should be applied to the pixel. That is, the final pixel color is defined by the equation:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

This means that a value of 1.0 corresponds to a solid color, whereas a value of 0.0 corresponds to a completely transparent color. This uses a wrapper message rather than a simple float scalar so that it is possible to distinguish between a default value and the value being unset. If omitted, this color object is rendered as a solid color (as if the alpha value had been explicitly given a value of 1.0).

SwitchControl

Either a toggle-style switch or a checkbox.

JSON representation 
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Fields
name

string

The name of the switch widget that's used in formInput .

value

string

The value is what is passed back in the callback.

selected

boolean

If the switch is selected.

onChangeAction

object ( Action )

The action when the switch state is changed.

controlType

enum ( ControlType )

The control type, either switch or checkbox.

ControlType

The switch type shown in client.

Enums
SWITCH A toggle-style switch.
CHECKBOX Deprecated in favor of CHECK_BOX .
CHECK_BOX A checkbox.

ButtonList

A list of buttons layed out horizontally.

JSON representation 
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Fields
buttons[]

object ( Button )

An array of buttons.

TextInput

A text input is a UI item where users can input text. A text input can also have an onChange action and suggestions.

JSON representation 
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  }
}
Fields
name

string

The name of the text input which is used in formInput .

label

string

At least one of label and hintText must be specified.

hintText

string

The hint text.

value

string

The default value when there is no input from the user.

type

enum ( Type )

The style of the text, for example, a single line or multiple lines.

onChangeAction

object ( Action )

The onChange action, for example, invoke a function.

initialSuggestions

object ( Suggestions )

The initial suggestions made before any user input.

autoCompleteAction

object ( Action )

The refresh function that returns suggestions based on the user's input text. If the callback is not specified, autocomplete is done in client side based on the initial suggestion items.

Type

The style of the text, for example, a single line or multiple lines.

Enums
SINGLE_LINE The text is put into a single line.
MULTIPLE_LINE The text is put into multiple lines.

Suggestions

A container wrapping elements necessary for showing suggestion items used in text input autocomplete.

JSON representation 
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
Fields
items[]

object ( SuggestionItem )

A list of suggestions used for autocomplete recommendations.

SuggestionItem

A suggestion item.

JSON representation 
{
  "text": string
}
Fields
text

string

The suggested autocomplete result.

SelectionInput

A widget that creates a UI item with options for users to select. For example, a dropdown menu.

JSON representation 
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  }
}
Fields
name

string

The name of the text input which is used in formInput .

label

string

The label displayed ahead of the switch control.

type

enum ( SelectionType )

The type of the selection.

items[]

object ( SelectionItem )

An array of the selected items.

onChangeAction

object ( Action )

If specified, the form is submitted when the selection changes. If not specified, you must specify a separate button.

SelectionType

The type of the selection.

Enums
CHECK_BOX A checkbox.
RADIO_BUTTON A radio button.
SWITCH A switch.
DROPDOWN A dropdown menu.

SelectionItem

A selectable item in the switch control.

JSON representation 
{
  "text": string,
  "value": string,
  "selected": boolean
}
Fields
text

string

The text to be displayed.

value

string

The value associated with this item. The client should use this as a form input value.

selected

boolean

If more than one item is selected for RADIO_BUTTON and DROPDOWN , the first selected item is treated as selected and the ones after are ignored.

DateTimePicker

The widget that lets users to specify a date and time. Not supported by Google Chat apps.

JSON representation 
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
Fields
name

string

The name of the text input that's used in formInput , and uniquely identifies this input.

label

string

The label for the field that displays to the user.

type

enum ( DateTimePickerType )

The type of the date/time picker.

valueMsEpoch

string ( int64 format)

The value to display as the default value before user input or previous user input. It is represented in milliseconds (Epoch time). For DATE_AND_TIME type, the full epoch value is used. For DATE_ONLY type, only date of the epoch time is used. For TIME_ONLY type, only time of the epoch time is used. For example, you can set epoch time to 3 * 60 * 60 * 1000 to represent 3am.

timezoneOffsetDate

integer

The number representing the time zone offset from UTC, in minutes. If set, the valueMsEpoch is displayed in the specified time zone. If not set, it uses the user's time zone setting on the client side.

onChangeAction

object ( Action )

Triggered when the user clicks Save or Clear from the date/time picker dialog. This is only triggered if the value changed as a result of the Save/Clear operation.

DateTimePickerType

The type of the date/time picker.

Enums
DATE_AND_TIME The user can select a date and time.
DATE_ONLY The user can only select a date.
TIME_ONLY The user can only select a time.

Divider

A divider that appears in between widgets.

Grid

Represents a Grid widget that displays items in a configurable grid layout.

JSON representation 
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Fields
title

string

The text that displays in the grid header.

items[]

object ( GridItem )

The items to display in the grid.

borderStyle

object ( BorderStyle )

The border style to apply to each grid item.

columnCount

integer

The number of columns to display in the grid. A default value is used if this field isn't specified, and that default value is different depending on where the grid is shown (dialog versus companion).

onClick

object ( OnClick )

This callback is reused by each individual grid item, but with the item's identifier and index in the items list added to the callback's parameters.

GridItem

Represents a single item in the grid layout.

JSON representation 
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "textAlignment": enum (HorizontalAlignment),
  "layout": enum (GridItemLayout)
}
Fields
id

string

A user-specified identifier for this grid item. This identifier is returned in the parent Grid's onClick callback parameters.

image

object ( ImageComponent )

The image that displays in the grid item.

title

string

The grid item's title.

subtitle

string

The grid item's subtitle.

textAlignment

enum ( HorizontalAlignment )

The horizontal alignment of the grid item's text.

layout

enum ( GridItemLayout )

The layout to use for the grid item.

ImageComponent

Represents an image.

JSON representation 
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Fields
imageUri

string

The image URL.

altText

string

The accessibility label for the image.

cropStyle

object ( ImageCropStyle )

The crop style to apply to the image.

borderStyle

object ( BorderStyle )

The border style to apply to the image.

ImageCropStyle

Represents the crop style applied to an image.

JSON representation 
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Fields
type

enum ( ImageCropType )

The crop type.

aspectRatio

number

The aspect ratio to use if the crop type is RECTANGLE_CUSTOM .

ImageCropType

Represents the crop style applied to an image.

Enums
IMAGE_CROP_TYPE_UNSPECIFIED No value specified.
SQUARE Applies a square crop.
CIRCLE Applies a circular crop.
RECTANGLE_CUSTOM Applies a rectangular crop with a custom aspect ratio.
RECTANGLE_4_3 Applies a rectangular crop with a 4:3 aspect ratio.

BorderStyle

Represents the complete border style applied to widgets.

JSON representation 
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Fields
type

enum ( BorderType )

The border type.

strokeColor

object ( Color )

The colors to use when the type is BORDER_TYPE_STROKE .

cornerRadius

integer

The corner radius for the border.

BorderType

Represents the border types applied to widgets.

Enums
BORDER_TYPE_UNSPECIFIED No value specified.
NO_BORDER No border.
STROKE Outline.

HorizontalAlignment

The horizontal alignment determines the placement of the widget. By default, a widget is shown using alignment corresponding to the START value, where START corresponds to the left in left-to-right layouts, and the right in right-to-left layouts. The END value corresponds to the right in left-to-right layouts, and the left in right-to-left layouts.

Enums
HORIZONTAL_ALIGNMENT_UNSPECIFIED Unspecified alignment.
START Alignment to the start position.
CENTER Alignment to the center position.
END Alignment to the end position.

GridItemLayout

Represents the various layout options available for a grid item.

Enums
GRID_ITEM_LAYOUT_UNSPECIFIED No layout specified.
TEXT_BELOW The title and subtitle are shown below the grid item's image.
TEXT_ABOVE The title and subtitle are shown above the grid item's image.

CardAction

A card action is the action associated with the card. For example, an invoice card might include actions such as delete invoice, email invoice, or open the invoice in a browser.

JSON representation 
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Fields
actionLabel

string

The label that displays as the action menu item.

onClick

object ( OnClick )

The onClick action for this action item.

CardFixedFooter

A persistent (sticky) footer that is added to the bottom of the card.

JSON representation 
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Fields
primaryButton

object ( Button )

The primary button of the fixed footer. The button must be a text button with text and color set.

secondaryButton

object ( Button )

The secondary button of the fixed footer. The button must be a text button with text and color set. primaryButton must be set if secondaryButton is set.

DisplayStyle

Determines how a card is displayed. Not supported by Google Chat apps.

Enums
DISPLAY_STYLE_UNSPECIFIED Do not use.
PEEK The header of the card appears at the bottom of the sidebar, partially covering the current top card of the stack. Clicking the header pops the card into the card stack. If the card has no header, a generated header is used instead.
REPLACE Default value. The card is shown by replacing the view of the top card in the card stack.