Cards v1

การ์ด

การ์ดคือองค์ประกอบ UI ที่มีวิดเจ็ต UI เช่น ข้อความและรูปภาพได้

การแสดง JSON 
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string
}
ช่อง
header

object (CardHeader)

ส่วนหัวของการ์ด โดยปกติแล้วส่วนหัวจะมีชื่อและรูปภาพ

sections[]

object (Section)

โดยแต่ละส่วนจะคั่นด้วยเส้นแบ่ง

cardActions[]

object (CardAction)

การดำเนินการของการ์ดนี้

name

string

ชื่อบัตร

CardHeader

การแสดง JSON 
{
  "title": string,
  "subtitle": string,
  "imageStyle": enum (ImageStyle),
  "imageUrl": string
}
ช่อง
title

string

ต้องระบุชื่อ ส่วนหัวมีความสูงคงที่ โดยหากมีการระบุทั้งชื่อและคำบรรยาย แต่ละรายการจะใช้พื้นที่ 1 บรรทัด หากระบุเฉพาะชื่อ ชื่อจะใช้ทั้ง 2 บรรทัด

subtitle

string

คำบรรยายของส่วนหัวของการ์ด

imageStyle

enum (ImageStyle)

ประเภทของรูปภาพ (เช่น เส้นขอบสี่เหลี่ยมจัตุรัสหรือเส้นขอบวงกลม)

imageUrl

string

URL ของรูปภาพในส่วนหัวของการ์ด

ImageStyle

Enum
IMAGE_STYLE_UNSPECIFIED
IMAGE เส้นขอบสี่เหลี่ยมจัตุรัส
AVATAR เส้นขอบวงกลม

ส่วน

ส่วนประกอบด้วยคอลเล็กชันวิดเจ็ตที่แสดงผล (แนวตั้ง) ตามลำดับที่ระบุไว้ การ์ดมีความกว้างคงที่แคบในทุกแพลตฟอร์ม จึงไม่จำเป็นต้องใช้พร็อพเพอร์ตี้เลย์เอาต์ (เช่น float) ในขณะนี้

การแสดง JSON 
{
  "header": string,
  "widgets": [
    {
      object (WidgetMarkup)
    }
  ]
}
ช่อง
header

string

ส่วนหัวของส่วน รองรับข้อความที่จัดรูปแบบ ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace

widgets[]

object (WidgetMarkup)

ส่วนต้องมีวิดเจ็ตอย่างน้อย 1 รายการ

WidgetMarkup

วิดเจ็ตคือองค์ประกอบ UI ที่แสดงข้อความและรูปภาพ

การแสดง JSON 
{
  "buttons": [
    {
      object (Button)
    }
  ],

  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "keyValue": {
    object (KeyValue)
  }
}
ช่อง
buttons[]

object (Button)

รายการปุ่ม Buttons ยังเป็น oneof data และควรตั้งค่าช่องเหล่านี้เพียงช่องเดียว

WidgetMarkup มีได้เพียงรายการเดียวต่อไปนี้ คุณสามารถใช้ช่อง WidgetMarkup หลายช่องเพื่อแสดงรายการเพิ่มเติมได้ ต่อไปนี้คือรายการช่องที่แยกกันโดยสิ้นเชิง ระบบจะตั้งค่าช่องอย่างน้อย 1 ช่องในการตอบกลับ ดังนี้
textParagraph

object (TextParagraph)

แสดงย่อหน้าข้อความในวิดเจ็ตนี้

image

object (Image)

แสดงรูปภาพในวิดเจ็ตนี้

keyValue

object (KeyValue)

แสดงรายการคีย์-ค่าในวิดเจ็ตนี้

สิ้นสุดฟิลด์ที่แยกกัน

TextParagraph

ย่อหน้าของข้อความ รองรับข้อความที่จัดรูปแบบ ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "text": string
}
ช่อง
text

string

รูปภาพ

รูปภาพที่ระบุโดย URL และมีการดำเนินการ onclick ได้

การแสดง JSON 
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "aspectRatio": number
}
ช่อง
imageUrl

string

URL ของรูปภาพ

onClick

object (OnClick)

การดำเนินการ onclick

aspectRatio

number

สัดส่วนภาพของรูปภาพนี้ (ความกว้างและความสูง) ช่องนี้ช่วยให้คุณจองความสูงที่เหมาะสมสำหรับรูปภาพขณะรอให้โหลด แต่ไม่ได้มีไว้เพื่อลบล้างสัดส่วนภาพในตัวของรูปภาพ หากไม่ได้ตั้งค่า เซิร์ฟเวอร์จะเติมข้อมูลโดยการดึงข้อมูลรูปภาพล่วงหน้า

OnClick

การดำเนินการ onclick (เช่น เปิดลิงก์)

การแสดง JSON 
{

  "action": {
    object (FormAction)
  },
  "openLink": {
    object (OpenLink)
  }
}
ช่อง
ต่อไปนี้คือรายการช่องที่แยกกันโดยสิ้นเชิง ระบบจะตั้งค่าช่องอย่างน้อย 1 ช่องในการตอบกลับ ดังนี้
action

object (FormAction)

การดำเนินการของแบบฟอร์มจะทริกเกอร์โดยการดำเนินการ onclick นี้หากระบุไว้

สิ้นสุดฟิลด์ที่แยกกัน

FormAction

การดำเนินการของแบบฟอร์มจะอธิบายลักษณะการทำงานเมื่อมีการส่งแบบฟอร์ม เช่น คุณสามารถเรียกใช้ Apps Script เพื่อจัดการแบบฟอร์มได้

การแสดง JSON 
{
  "actionMethodName": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ]
}
ช่อง
actionMethodName

string

ชื่อเมธอดใช้เพื่อระบุว่าส่วนใดของแบบฟอร์มที่ทริกเกอร์การส่งแบบฟอร์ม ระบบจะส่งข้อมูลนี้กลับไปยังแอปใน Chat โดยเป็นส่วนหนึ่งของกิจกรรมการคลิกการ์ด คุณสามารถใช้ชื่อเมธอดเดียวกันสำหรับองค์ประกอบหลายรายการที่ทริกเกอร์ลักษณะการทำงานทั่วไปได้

parameters[]

object (ActionParameter)

รายการพารามิเตอร์การดำเนินการ

ActionParameter

รายการพารามิเตอร์สตริงที่จะระบุเมื่อมีการเรียกใช้เมธอดการดำเนินการ ตัวอย่างเช่น ลองพิจารณาปุ่มเลื่อนการแจ้งเตือน 3 ปุ่ม ได้แก่ เลื่อนการแจ้งเตือนตอนนี้ เลื่อนการแจ้งเตือน 1 วัน เลื่อนการแจ้งเตือนเป็นสัปดาห์หน้า คุณอาจใช้ action method = snooze() โดยส่งประเภทการเลื่อนการปลุกและเวลาเลื่อนการปลุกในรายการพารามิเตอร์สตริง

การแสดง JSON 
{
  "key": string,
  "value": string
}
ช่อง
key

string

ชื่อพารามิเตอร์สำหรับสคริปต์การดำเนินการ

value

string

ค่าของพารามิเตอร์

KeyValue

องค์ประกอบ UI ประกอบด้วยคีย์ (ป้ายกำกับ) และค่า (เนื้อหา) องค์ประกอบนี้ยังมีการดำเนินการบางอย่างได้ด้วย เช่น ปุ่ม onclick

การแสดง JSON 
{
  "topLabel": string,
  "content": string,
  "contentMultiline": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  "icon": enum (Icon),
  "iconUrl": string

  "button": {
    object (Button)
  }
}
ช่อง
topLabel

string

ข้อความของป้ายกำกับด้านบน รองรับข้อความที่จัดรูปแบบ ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace

content

string

ข้อความของเนื้อหา รองรับข้อความที่จัดรูปแบบและจำเป็นต้องระบุเสมอ ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace

contentMultiline

boolean

เนื้อหาควรมีหลายบรรทัดหรือไม่

bottomLabel

string

ข้อความของป้ายกำกับด้านล่าง รองรับข้อความที่จัดรูปแบบ ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace

onClick

object (OnClick)

การดำเนินการ onclick โดยจะคลิกได้เฉพาะป้ายกำกับด้านบน ป้ายกำกับด้านล่าง และบริเวณเนื้อหาเท่านั้น

ต้องกำหนดไอคอน, top_label และ bottom_label อย่างน้อย 1 รายการ ต่อไปนี้คือรายการช่องที่แยกกันโดยสิ้นเชิง ระบบจะตั้งค่าช่องอย่างน้อย 1 ช่องในการตอบกลับ ดังนี้
icon

enum (Icon)

ค่า enum ที่ Chat API แทนที่ด้วยรูปภาพไอคอนที่เกี่ยวข้อง

iconUrl

string

ไอคอนที่ระบุโดย URL

สิ้นสุดฟิลด์ที่แยกกัน
วิดเจ็ตควบคุม คุณสามารถตั้งค่า button หรือ switch_widget ได้ แต่จะตั้งค่าทั้ง 2 อย่างไม่ได้ ต่อไปนี้คือรายการช่องที่แยกกันโดยสิ้นเชิง ระบบจะตั้งค่าช่องอย่างน้อย 1 ช่องในการตอบกลับ ดังนี้
button

object (Button)

ปุ่มที่คลิกได้เพื่อเรียกให้แสดงการดำเนินการ

สิ้นสุดฟิลด์ที่แยกกัน

ไอคอน

ชุดไอคอนที่รองรับ

Enum
ICON_UNSPECIFIED
AIRPLANE
BOOKMARK
BUS
CAR
CLOCK
CONFIRMATION_NUMBER_ICON
DOLLAR
DESCRIPTION
EMAIL
EVENT_PERFORMER
EVENT_SEAT
FLIGHT_ARRIVAL
FLIGHT_DEPARTURE
HOTEL
HOTEL_ROOM_TYPE
INVITE
MAP_PIN
MEMBERSHIP
MULTIPLE_PEOPLE
OFFER
PERSON
PHONE
RESTAURANT_ICON
SHOPPING_CART
STAR
STORE
TICKET
TRAIN
VIDEO_CAMERA
VIDEO_PLAY

ปุ่ม

ปุ่ม A อาจเป็นปุ่มข้อความหรือปุ่มรูปภาพ

การแสดง JSON 
{

  "textButton": {
    object (TextButton)
  },
  "imageButton": {
    object (ImageButton)
  }
}
ช่อง
ต่อไปนี้คือรายการช่องที่แยกกันโดยสิ้นเชิง ระบบจะตั้งค่าช่องอย่างน้อย 1 ช่องในการตอบกลับ ดังนี้
textButton

object (TextButton)

ปุ่มที่มีข้อความและการดำเนินการ onclick

imageButton

object (ImageButton)

ปุ่มที่มีรูปภาพและการดำเนินการ onclick

สิ้นสุดฟิลด์ที่แยกกัน

TextButton

ปุ่มที่มีข้อความและการดำเนินการ onclick

การแสดง JSON 
{
  "text": string,
  "onClick": {
    object (OnClick)
  }
}
ช่อง
text

string

ข้อความของปุ่ม

onClick

object (OnClick)

การดำเนินการ onclick ของปุ่ม

ImageButton

ปุ่มรูปภาพที่มีการดำเนินการ onclick

การแสดง JSON 
{
  "onClick": {
    object (OnClick)
  },
  "name": string,

  "icon": enum (Icon),
  "iconUrl": string
}
ช่อง
onClick

object (OnClick)

การดำเนินการ onclick

name

string

ชื่อของ imageButton นี้ที่ใช้สำหรับการช่วยเหลือพิเศษ ระบบจะระบุค่าเริ่มต้นหากไม่ได้ระบุชื่อนี้

ไอคอนสามารถระบุได้โดยใช้ Icon enum หรือ URL ต่อไปนี้คือรายการช่องที่แยกกันโดยสิ้นเชิง ระบบจะตั้งค่าช่องอย่างน้อย 1 ช่องในการตอบกลับ ดังนี้
icon

enum (Icon)

ไอคอนที่ระบุโดย enum ซึ่งชี้ไปยังไอคอนที่ Chat API มีให้

iconUrl

string

ไอคอนที่ระบุโดย URL

สิ้นสุดฟิลด์ที่แยกกัน

CardAction

การดำเนินการกับการ์ดคือการดำเนินการที่เชื่อมโยงกับการ์ด สำหรับการ์ดใบแจ้งหนี้ การดำเนินการทั่วไปคือลบใบแจ้งหนี้ ส่งอีเมลใบแจ้งหนี้ หรือเปิดใบแจ้งหนี้ในเบราว์เซอร์

แอป Google Chat ไม่รองรับ

การแสดง JSON 
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
ช่อง
actionLabel

string

ป้ายกำกับที่ใช้แสดงในรายการเมนูการดำเนินการ

onClick

object (OnClick)

การดำเนินการ onclick สำหรับรายการการทำงานนี้