그리드

대화상자에서만 지원됩니다. 카드 메시지도 곧 지원됩니다.

Grid 위젯은 항목 컬렉션이 있는 그리드를 표시합니다.

위젯은 사용자가 동일한 데이터를 입력할 수 있는 추천 기능 및 사용자가 텍스트를 추가하거나 삭제하는 등 텍스트 입력란에서 변경사항이 발생할 때 실행되는 Actions 작업 시 이를 지원합니다.

그리드는 모든 열과 항목을 지원합니다. 행 수는 열을 기준으로 나눈 값입니다. 항목이 10개이고 열이 2개인 그리드에는 행이 5개 있습니다. 항목 11개와 열 2개가 있는 그리드에는 행이 6개 있습니다.

채팅 앱은 양식 입력 이벤트 중에 선택한 항목의 값을 수신하고 처리할 수 있습니다. 양식 입력 작업에 대한 자세한 내용은 양식 데이터 수신을 참고하세요.

예: 단일 항목이 있는 2열 그리드

다음 이미지는 grid 위젯으로 구성된 대화상자를 보여줍니다. 단일 항목이 있는 2열 그리드를 만듭니다.

카드의 JSON은 다음과 같습니다.

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "grid": {
                  "title": "A fine collection of items",
                  "numColumns": 2,
                  "borderStyle": {
                    "type": "STROKE",
                    "cornerRadius": 4.0
                  },
                  "items": [
                    {
                      "image": {
                        "imageUri": "https://developers.google.com/static/chat/images/chat-app-hero-image_1440.png",
                        "cropStyle": {
                          "type": "SQUARE"
                        },
                        "borderStyle": {
                          "type": "STROKE"
                        }
                      },
                      "title": "An item",
                      "textAlignment": "CENTER"
                    }
                  ],
                  "onClick": {
                    "openLink": {
                      "url": "https://developers.google.com/chat"
                    }
                  }
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Grid JSON 표현 및 필드

JSON 표현 
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
필드
title

string

그리드 헤더에 표시되는 텍스트입니다.

items[]

object ( GridItem )

그리드에 표시할 항목입니다.

borderStyle

object ( BorderStyle )

각 그리드 항목에 적용할 테두리 스타일입니다.

columnCount

integer

그리드에 표시할 열의 개수입니다. 이 필드를 지정하지 않으면 기본값이 사용되며 그리드가 표시되는 위치 (대화상자 또는 컴패니언)에 따라 기본값이 달라집니다.

onClick

object ( OnClick )

이 콜백은 각 개별 그리드 항목에서 재사용되지만 항목 식별자와 항목 목록의 색인은 콜백의 매개변수에 추가됩니다.

GridItem

JSON 표현 
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
필드
id

string

이 그리드 항목의 사용자 지정 식별자입니다. 이 식별자는 상위 그리드의 onClick 콜백 매개변수에 반환됩니다.

image

object ( ImageComponent )

그리드 항목에 표시되는 이미지입니다.

title

string

그리드 항목의 제목입니다.

subtitle

string

그리드 항목의 부제목입니다.

layout

enum ( GridItemLayout )

그리드 항목에 사용할 레이아웃입니다.

BorderStyle

JSON 표현 
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
필드
type

enum ( BorderType )

테두리 유형입니다.

strokeColor

object ( Color )

유형이 BORDER_TYPE_STROKE 인 경우에 사용할 색상입니다.

cornerRadius

integer

테두리의 모서리 반경입니다.

BorderType

열거형
BORDER_TYPE_UNSPECIFIED 값이 지정되지 않았습니다.
NO_BORDER 기본값 테두리 없음
STROKE Outline을 선택합니다.

Onclick

사용자가 카드에서 버튼과 같은 상호작용 요소를 클릭할 때 응답하는 방법을 나타냅니다.

JSON 표현 
{

  // 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.
}
필드

공용체 필드 data .

data 는 다음 중 하나여야 합니다.

action

object ( Action )

지정하면 작업이 이 onClick 에 의해 트리거됩니다.

card

object ( Card )

지정된 경우 카드 카드를 클릭하면 새 카드가 카드 스택으로 푸시됩니다.

Google Workspace 부가기능에서는 지원되지만 Chat 앱에서는 지원되지 않습니다.

Action

양식 제출 시의 동작을 설명하는 작업입니다. 예를 들어 Apps Script를 호출하여 양식을 처리할 수 있습니다. 작업이 트리거되면 양식 값이 서버로 전송됩니다.

JSON 표현 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
필드
function

string

포함하는 요소가 클릭되거나 부정확하게 활성화된 경우 호출할 맞춤 함수입니다.

사용 예는 대화형 카드 만들기 를 참조하세요.

parameters[]

object ( ActionParameter )

작업 매개변수 목록입니다.

loadIndicator

enum ( LoadIndicator )

작업을 호출하는 동안 작업에 표시되는 로드 표시기를 지정합니다.

persistValues

boolean

작업 후 양식 값이 유지되는지 여부를 나타냅니다. 기본값은 false 입니다.

true 인 경우 작업이 트리거된 후에도 양식 값이 유지됩니다. 작업이 처리되는 동안 사용자가 변경할 수 있도록 하려면 LoadIndicator 를 NONE 로 설정합니다. 채팅 앱의 카드 메시지 의 경우 작업의 ResponseType 을 UPDATE_MESSAGE 로 설정하고 작업이 포함된 카드에서 cardId 를 동일하게 사용해야 합니다.

false 인 경우 작업이 트리거될 때 양식 값이 삭제됩니다. 작업이 처리되는 동안 사용자가 변경하지 못하도록 하려면 LoadIndicator 를 SPINNER 로 설정합니다.

interaction

enum ( Interaction )

선택사항입니다. 대화상자 를 열 때 필요합니다.

사용자와의 상호작용에 따른 조치(예: 사용자가 카드 메시지의 버튼을 클릭하는 경우)

지정하지 않으면 앱은 정상적으로 링크 열기 또는 함수 실행과 같은 action 를 실행하여 응답합니다.

interaction 를 지정하면 앱이 특별한 대화형 방식으로 응답할 수 있습니다. 예를 들어 interaction 를 OPEN_DIALOG 로 설정하면 앱이 대화상자 를 열 수 있습니다.

지정된 경우 로드 표시기는 표시되지 않습니다.

Chat 앱에서는 지원되지만 Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

ActionParameter

작업 메서드가 호출될 때 제공할 문자열 매개변수의 목록입니다. 예를 들어 다시 알림 버튼 3개(지금 일시중지, 1일 일시중지, 다음 주 다시 알림)를 사용하는 것이 좋습니다. 문자열 매개변수 목록에 다시 알림 유형 및 다시 알림 시간을 전달하여 작업 메서드 = pause()를 사용할 수 있습니다.

자세한 내용은 CommonEventObject 를 참조하세요.

JSON 표현 
{
  "key": string,
  "value": string
}
필드
key

string

액션 스크립트에 해당하는 매개변수의 이름입니다.

value

string

매개변수 값입니다.

LoadIndicator

작업을 호출하는 동안 작업에 표시되는 로드 표시기를 지정합니다.

열거형
SPINNER 콘텐츠가 로드 중임을 나타내는 스피너를 표시합니다.
NONE 아무것도 표시되지 않습니다.

Interaction

선택사항입니다. 대화상자 를 열 때 필요합니다.

사용자와의 상호작용에 따른 조치(예: 사용자가 카드 메시지의 버튼을 클릭하는 경우)

지정하지 않으면 앱은 정상적으로 링크 열기 또는 함수 실행과 같은 action 를 실행하여 응답합니다.

interaction 를 지정하면 앱이 특별한 대화형 방식으로 응답할 수 있습니다. 예를 들어 interaction 를 OPEN_DIALOG 로 설정하면 앱이 대화상자 를 열 수 있습니다.

지정된 경우 로드 표시기는 표시되지 않습니다.

Chat 앱에서는 지원되지만 Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

열거형
INTERACTION_UNSPECIFIED 기본값 action 는 정상적으로 실행됩니다.
OPEN_DIALOG

채팅 앱이 사용자와 상호작용하는 데 사용하는 창 형식의 카드 기반 인터페이스인 대화상자 를 엽니다.

카드 메시지의 버튼 클릭에 응답하여 채팅 앱에서만 지원됩니다.

Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.