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 เส้นขอบวงกลม

ส่วน

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

การแสดง 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)

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

A WidgetMarkup ต้องมีรายการใดรายการหนึ่งต่อไปนี้เท่านั้น คุณใช้ฟิลด์ WidgetMarkup ได้หลายรายการ เพื่อแสดงรายการเพิ่มเติม ต่อไปนี้คือรายการฟิลด์ที่แยกกัน ระบบจะตั้งค่าช่องใดช่องหนึ่งต่อไปนี้ในการตอบกลับ
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)
  }
}
ช่อง
ต่อไปนี้คือรายการฟิลด์ที่แยกกัน ระบบจะตั้งค่าช่องใดช่องหนึ่งต่อไปนี้ในการตอบกลับ
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 รายการ ต่อไปนี้คือรายการฟิลด์ที่แยกกัน ระบบจะตั้งค่าช่องใดช่องหนึ่งต่อไปนี้ในการตอบกลับ
icon

enum (Icon)

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

iconUrl

string

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

สิ้นสุดฟิลด์ที่แยกกัน
วิดเจ็ตควบคุม คุณตั้งค่า button หรือ switch_widget ได้อย่างใดอย่างหนึ่ง แต่จะตั้งค่าทั้ง 2 อย่างพร้อมกันไม่ได้ ต่อไปนี้คือรายการฟิลด์ที่แยกกัน ระบบจะตั้งค่าช่องใดช่องหนึ่งต่อไปนี้ในการตอบกลับ
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

ปุ่ม

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

การแสดง JSON 
{

  "textButton": {
    object (TextButton)
  },
  "imageButton": {
    object (ImageButton)
  }
}
ช่อง
ต่อไปนี้คือรายการฟิลด์ที่แยกกัน ระบบจะตั้งค่าช่องใดช่องหนึ่งต่อไปนี้ในการตอบกลับ
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 ต่อไปนี้คือรายการฟิลด์ที่แยกกัน ระบบจะตั้งค่าช่องใดช่องหนึ่งต่อไปนี้ในการตอบกลับ
icon

enum (Icon)

ไอคอนที่ระบุโดย enum ซึ่งจัดทำดัชนีไปยังไอคอนที่ API ของ Chat ระบุ

iconUrl

string

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

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

CardAction

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

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

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

string

โดยก่อนหน้านี้ป้ายกำกับจะแสดงในรายการเมนูการดำเนินการ

onClick

object (OnClick)

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