Cards v2

{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}

object (CardHeader)

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

object (Section)

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

enum (DividerStyle)

รูปแบบตัวแบ่งระหว่างส่วนต่างๆ

object (CardAction)

การดำเนินการของการ์ด ระบบจะเพิ่มการทำงานลงในเมนูแถบเครื่องมือของการ์ด

เนื่องจากการ์ดของแอป Chat ไม่มีแถบเครื่องมือ แอป Chat จึงไม่รองรับcardActions[]

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างเมนูการทำงานของการ์ดที่มีตัวเลือก Settings และ Send Feedback

"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"
      }
    }
  }
]

string

ชื่อบัตร ใช้เป็นตัวระบุการ์ดในการนำทางการ์ด

เนื่องจากแอปใน Chat ไม่รองรับการนำทางด้วยการ์ด จึงไม่สนใจช่องนี้

object (CardFixedFooter)

ส่วนท้ายแบบคงที่ซึ่งแสดงอยู่ที่ด้านล่างของการ์ดนี้

การตั้งค่า fixedFooter โดยไม่ระบุ primaryButton หรือ secondaryButton จะทําให้เกิดข้อผิดพลาด

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

enum (DisplayStyle)

ในส่วนเสริมของ Google Workspace ให้กำหนดพร็อพเพอร์ตี้การแสดงผลของ peekCardHeader

ไม่รองรับในแอป Chat

object (CardHeader)

เมื่อแสดงเนื้อหาตามบริบท ส่วนหัวของการ์ด Peek จะทำหน้าที่เป็นตัวยึดตําแหน่งเพื่อให้ผู้ใช้เดินหน้าไปมาระหว่างการ์ดในหน้าแรกและการ์ดบริบทได้

ไม่รองรับในแอป Chat

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

string

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

string

ชื่อรองของส่วนหัวของการ์ด หากระบุไว้ จะแสดงในบรรทัดของตัวเองใต้ title

enum (ImageType)

รูปร่างที่ใช้ครอบตัดรูปภาพ

string

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

string

ข้อความสำรองของรูปภาพนี้ที่ใช้สำหรับการเข้าถึง

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

string

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

object (Widget)

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

boolean

ระบุว่าส่วนนี้ยุบได้หรือไม่

ส่วนที่ยุบได้จะซ่อนวิดเจ็ตบางส่วนหรือทั้งหมด แต่ผู้ใช้จะขยายส่วนดังกล่าวเพื่อแสดงวิดเจ็ตที่ซ่อนอยู่ได้โดยคลิกแสดงเพิ่มเติม ผู้ใช้จะซ่อนวิดเจ็ตอีกครั้งได้โดยคลิกแสดงน้อยลง

หากต้องการทราบว่าวิดเจ็ตใดซ่อนอยู่ ให้ระบุ uncollapsibleWidgetsCount

integer

จำนวนวิดเจ็ตที่ไม่สามารถยุบได้ซึ่งยังคงมองเห็นได้แม้ว่าจะยุบส่วนอยู่

ตัวอย่างเช่น เมื่อส่วนมีวิดเจ็ต 5 รายการและตั้งค่า uncollapsibleWidgetsCount เป็น 2 ระบบจะแสดงวิดเจ็ต 2 รายการแรกเสมอ และวิดเจ็ต 3 รายการสุดท้ายจะยุบโดยค่าเริ่มต้น ระบบจะพิจารณา uncollapsibleWidgetsCount ต่อเมื่อ collapsible มีค่าเป็น true เท่านั้น

{
  "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)
  },
  "columns": {
    object (Columns)
  }
  // End of list of possible types for union field data.
}

enum (HorizontalAlignment)

ระบุว่าจะให้วิดเจ็ตอยู่ทางซ้าย ขวา หรือตรงกลางของคอลัมน์

object (TextParagraph)

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

เช่น JSON ต่อไปนี้จะสร้างข้อความตัวหนา

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

object (Image)

แสดงรูปภาพ

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างรูปภาพที่มีข้อความสำรอง

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}

object (DecoratedText)

แสดงรายการข้อความที่มีการตกแต่ง

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างวิดเจ็ตข้อความที่ตกแต่งอย่างสวยงามซึ่งแสดงอีเมล

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

object (ButtonList)

รายการปุ่ม

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างปุ่ม 2 ปุ่ม ปุ่มแรกคือปุ่มข้อความสีฟ้า และปุ่มที่สองเป็นปุ่มรูปภาพที่เปิดลิงก์ดังต่อไปนี้

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}

object (TextInput)

แสดงกล่องข้อความที่ผู้ใช้พิมพ์ลงไปได้

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างอินพุตข้อความสำหรับอีเมล

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

อีกตัวอย่างหนึ่งคือ JSON ต่อไปนี้จะสร้างอินพุตข้อความสำหรับภาษาโปรแกรมที่มีคำแนะนำแบบคงที่

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

object (SelectionInput)

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

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างเมนูแบบเลื่อนลงที่ให้ผู้ใช้เลือกขนาดได้

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "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
    }
  ]
}

object (DateTimePicker)

แสดงวิดเจ็ตที่ให้ผู้ใช้ป้อนวันที่ เวลา หรือวันที่และเวลา

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างเครื่องมือเลือกวันที่และเวลาเพื่อกำหนดเวลาการนัดหมาย

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

object (Divider)

แสดงเส้นแบ่งแนวนอนระหว่างวิดเจ็ต

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างตัวแบ่ง

"divider": {
}

object (Grid)

แสดงตารางกริดที่มีคอลเล็กชันรายการ

ตารางกริดรองรับคอลัมน์และรายการกี่รายการก็ได้ จำนวนแถวจะกำหนดโดยขอบเขตบนของจำนวนรายการหารด้วยจำนวนคอลัมน์ ตารางกริดที่มี 10 รายการ 2 คอลัมน์จะมี 5 แถว ตารางกริดที่มี 11 รายการ 2 คอลัมน์จะมี 6 แถว

เช่น JSON ต่อไปนี้จะสร้างตารางกริดแบบ 2 คอลัมน์ที่มีรายการเดียว

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "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"
    }
  }
}

object (Columns)

แสดงได้สูงสุด 2 คอลัมน์

หากต้องการรวมมากกว่า 2 คอลัมน์หรือใช้แถว ให้ใช้วิดเจ็ต Grid

ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างคอลัมน์ 2 คอลัมน์โดยที่แต่ละคอลัมน์มีย่อหน้าข้อความ

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}

{
  "text": string
}

string

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

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

string

HTTPS URL ที่โฮสต์รูปภาพ

เช่น

https://developers.google.com/chat/images/quickstart-app-avatar.png

object (OnClick)

เมื่อผู้ใช้คลิกรูปภาพ การคลิกจะทริกเกอร์การดำเนินการนี้

string

ข้อความสำรองของรูปภาพนี้ที่ใช้สำหรับการเข้าถึง

{

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

object (Action)

หากระบุไว้ onClick นี้จะทริกเกอร์การดำเนินการ

object (OpenLink)

หากระบุไว้ onClick นี้จะทริกเกอร์การดำเนินการลิงก์แบบเปิด

object (Action)

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

object (Card)

การ์ดใหม่จะพุชไปยังสแต็กการ์ดหลังจากคลิกระบุไว้แล้ว

รองรับส่วนเสริมของ Google Workspace แต่ใช้ไม่ได้กับแอป Google Chat

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

string

ฟังก์ชันที่กำหนดเองที่จะเรียกใช้เมื่อมีการคลิกองค์ประกอบที่มีหรือเปิดใช้งานไม่ถูกพร้อมกัน

ตัวอย่างการใช้งานได้ที่สร้างการ์ดแบบอินเทอร์แอกทีฟ

object (ActionParameter)

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

enum (LoadIndicator)

ระบุสัญญาณบอกสถานะการโหลดที่การดำเนินการจะแสดงขณะเรียกใช้การดำเนินการ

boolean

ระบุว่าค่าของแบบฟอร์มจะยังคงอยู่หลังจากการดำเนินการหรือไม่ โดยมีค่าเริ่มต้นเป็น false

หากเป็น true ค่าของแบบฟอร์มจะยังคงอยู่หลังจากเรียกใช้การดำเนินการ หากต้องการให้ผู้ใช้ทำการเปลี่ยนแปลงได้ในขณะที่ระบบกำลังประมวลผลการดำเนินการ ให้ตั้งค่า LoadIndicator เป็น NONE สำหรับข้อความในการ์ด ในแอป Chat คุณต้องตั้งค่าการดำเนินการ ResponseType เป็น UPDATE_MESSAGE และใช้ cardId เดียวกันจากการ์ดที่มีการดำเนินการดังกล่าวด้วย

หากเป็น false ระบบจะล้างค่าของแบบฟอร์มเมื่อทริกเกอร์การดำเนินการ หากต้องการป้องกันไม่ให้ผู้ใช้ทำการเปลี่ยนแปลงระหว่างการดำเนินการ ให้ตั้งค่า LoadIndicator เป็น SPINNER

enum (Interaction)

ไม่บังคับ ต้องระบุเมื่อเปิดกล่องโต้ตอบ

สิ่งที่ควรทำเพื่อตอบสนองการโต้ตอบกับผู้ใช้ เช่น ผู้ใช้คลิกปุ่มในข้อความการ์ด

หากไม่ระบุ แอปจะตอบสนองด้วยการเรียกใช้ action เช่น การเปิดลิงก์หรือเรียกใช้ฟังก์ชัน ตามปกติ

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

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

{
  "key": string,
  "value": string
}

string

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

string

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

{
  "url": string,
  "openAs": enum (OpenAs),
  "onClose": enum (OnClose)
}

string

URL ที่จะเปิด

enum (OpenAs)

วิธีเปิดลิงก์ ไม่รองรับในแอป Chat

enum (OnClose)

ลูกค้าลืมลิงก์หลังจากที่เปิดลิงก์นั้น หรือสังเกตการณ์จนกว่าหน้าต่างจะปิดลง ไม่รองรับในแอป Chat

{
  "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.
}

object (Icon)

เลิกใช้งานเพื่อใช้ startIcon แทน

object (Icon)

ไอคอนที่แสดงด้านหน้าข้อความ

string

ข้อความที่ปรากฏด้านบน text ตัดออกเสมอ

string

ต้องระบุ ข้อความหลัก

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

boolean

การตั้งค่าตัดข้อความขึ้นบรรทัดใหม่ หากเป็น true ข้อความจะถูกตัดและแสดงเป็นหลายบรรทัด มิฉะนั้นระบบจะตัดข้อความให้สั้นลง

ใช้เฉพาะกับ text เท่านั้น ไม่ใช้กับ topLabel และ bottomLabel

string

ข้อความที่ปรากฏด้านล่าง text ตัดข้อความเสมอ

object (OnClick)

ระบบจะทริกเกอร์การดำเนินการนี้เมื่อผู้ใช้คลิก topLabel หรือ bottomLabel

object (Button)

ปุ่มที่ผู้ใช้สามารถคลิกเพื่อทริกเกอร์การทำงาน

object (SwitchControl)

วิดเจ็ตสวิตช์ที่ผู้ใช้สามารถคลิกเพื่อเปลี่ยนสถานะและทริกเกอร์การดำเนินการ

object (Icon)

ไอคอนที่แสดงหลังข้อความ

รองรับไอคอนในตัวและไอคอนแบบกำหนดเอง

{
  "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.
}

string

ไม่บังคับ คำอธิบายไอคอนที่ใช้สำหรับการเข้าถึง หากไม่ระบุ ระบบจะระบุค่าเริ่มต้น Button แนวทางปฏิบัติแนะนำคือคุณควรกำหนดคำอธิบายที่เป็นประโยชน์เกี่ยวกับสิ่งที่ไอคอนแสดง และสิ่งที่ไอคอนแสดง (หากมี) เช่น A user's account portrait หรือ Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat

หากตั้งค่าไอคอนไว้ใน Button altText จะปรากฏเป็นข้อความช่วยเหลือเมื่อผู้ใช้วางเมาส์เหนือปุ่ม แต่หากปุ่มตั้งค่า text ด้วย ระบบจะละเว้น altText ของไอคอน

enum (ImageType)

รูปแบบการครอบตัดที่ใช้กับรูปภาพ ในบางกรณี การใช้การครอบตัด CIRCLE จะทำให้รูปภาพวาดมีขนาดใหญ่กว่าไอคอนในตัว

string

แสดงไอคอนในตัวที่ Google Workspace มีให้

ตัวอย่างเช่น หากต้องการแสดงไอคอนรูปเครื่องบิน ให้ระบุ AIRPLANE สำหรับรถประจำทาง ให้ระบุ BUS

ดูรายการไอคอนทั้งหมดที่รองรับได้ที่ไอคอนในตัว

string

แสดงไอคอนที่กำหนดเองซึ่งโฮสต์ที่ URL แบบ HTTPS

เช่น

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

ประเภทไฟล์ที่รองรับ ได้แก่ .png และ .jpg

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

string

ข้อความที่แสดงภายในปุ่ม

object (Icon)

รูปภาพไอคอน หากตั้งค่าทั้ง icon และ text ไว้ ไอคอนจะปรากฏก่อนข้อความ

object (Color)

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

หากไม่ได้ตั้งค่า พื้นหลังของรูปภาพจะเป็นสีขาวและสีแบบอักษรจะเป็นสีน้ำเงิน

สำหรับสีแดง เขียว และน้ำเงิน ค่าของแต่ละช่องคือตัวเลข float ที่คุณแสดงได้ 2 แบบ ได้แก่ เป็นตัวเลขระหว่าง 0 ถึง 255 หารด้วย 255 (153/255) หรือเป็นค่าระหว่าง 0 ถึง 1 (0.6) 0 หมายถึงไม่มีสี และ 1 หรือ 255/255 หมายถึงมีสีนั้นอยู่ในสเกล RGB

เลือกตั้งค่า alpha ซึ่งจะตั้งค่าระดับความโปร่งใสโดยใช้สมการนี้ (ไม่บังคับ)

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

สำหรับ alpha ค่า 1 จะสอดคล้องกับสีทึบและค่า 0 จะสอดคล้องกับสีที่โปร่งใสโดยสมบูรณ์

ตัวอย่างเช่น สีต่อไปนี้แสดงสีแดงโปร่งแสงครึ่งหนึ่ง

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}

object (OnClick)

ต้องระบุ การดำเนินการที่จะทำเมื่อผู้ใช้คลิกปุ่ม เช่น การเปิดไฮเปอร์ลิงก์หรือเรียกใช้ฟังก์ชันที่กำหนดเอง

boolean

หากตั้งค่าเป็น true ปุ่มจะแสดงในสถานะไม่ใช้งานและไม่ตอบสนองต่อการดำเนินการของผู้ใช้

string

ข้อความสำรองที่ใช้สำหรับการช่วยเหลือพิเศษ

กำหนดข้อความอธิบายที่แจ้งให้ผู้ใช้ทราบถึงการทำงานของปุ่ม เช่น หากปุ่มเปิดไฮเปอร์ลิงก์ คุณอาจเขียนว่า "เปิดแท็บเบราว์เซอร์ใหม่แล้วไปยังเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat ที่ https://developers.google.com/chat"

{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}

number

ปริมาณของสีแดงในสีเป็นค่าในช่วง [0, 1]

number

ปริมาณสีเขียวในสีเป็นค่าในช่วง [0, 1]

number

ปริมาณของสีน้ำเงินในสีเป็นค่าในช่วง [0, 1]

number

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

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

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

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

string

ชื่อที่ใช้ในการระบุวิดเจ็ตสวิตช์ในเหตุการณ์การป้อนฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

string

ค่าที่ผู้ใช้ป้อนซึ่งแสดงเป็นส่วนหนึ่งของเหตุการณ์อินพุตแบบฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

boolean

เมื่อ true ระบบจะเลือกสวิตช์

object (Action)

การดําเนินการที่ทําเมื่อเปลี่ยนสถานะสวิตช์ เช่น ฟังก์ชันที่จะเรียกใช้

enum (ControlType)

ลักษณะที่สวิตช์จะปรากฏในอินเทอร์เฟซผู้ใช้

{
  "buttons": [
    {
      object (Button)
    }
  ]
}

object (Button)

อาร์เรย์ของปุ่ม

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

string

ชื่อที่ใช้ระบุการป้อนข้อความในเหตุการณ์การป้อนข้อมูลแบบฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

string

ข้อความที่ปรากฏเหนือช่องป้อนข้อความในอินเทอร์เฟซผู้ใช้

ระบุข้อความที่ช่วยให้ผู้ใช้ป้อนข้อมูลที่แอปของคุณต้องการ ตัวอย่างเช่น หากคุณกำลังถามชื่อบุคคล แต่ต้องการนามสกุลโดยเฉพาะ ให้เขียน surname แทน name

ต้องระบุหากไม่ได้ระบุ hintText หรือไม่บังคับ

string

ข้อความที่ปรากฏใต้ช่องป้อนข้อความซึ่งมีไว้เพื่อช่วยเหลือผู้ใช้ด้วยการแจ้งให้ป้อนค่าที่ต้องการ ระบบจะแสดงข้อความนี้เสมอ

ต้องระบุหากไม่ได้ระบุ label หรือไม่บังคับ

string

ค่าที่ผู้ใช้ป้อนซึ่งแสดงเป็นส่วนหนึ่งของเหตุการณ์อินพุตแบบฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

enum (Type)

ลักษณะที่ช่องป้อนข้อความจะปรากฏในอินเทอร์เฟซผู้ใช้ เช่น ช่องนี้เป็นแบบบรรทัดเดียวหรือหลายบรรทัด

object (Action)

สิ่งที่ต้องทำเมื่อมีการเปลี่ยนแปลงในช่องป้อนข้อความ เช่น ผู้ใช้เพิ่มช่องหรือลบข้อความ

ตัวอย่างการดำเนินการที่ต้องทำ เช่น การเรียกใช้ฟังก์ชันที่กำหนดเอง หรือการเปิดกล่องโต้ตอบใน Google Chat

object (Suggestions)

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

เช่น ช่องป้อนข้อความสำหรับภาษาโปรแกรมอาจแนะนำ Java, JavaScript, Python และ C++ เมื่อผู้ใช้เริ่มพิมพ์ Jav รายการตัวกรองคำแนะนำจะแสดงแค่ Java และ JavaScript

ค่าที่แนะนำจะช่วยแนะนำให้ผู้ใช้ป้อนค่าที่แอปเข้าใจได้ เมื่อกล่าวถึง JavaScript ผู้ใช้บางคนอาจป้อน javascript และอื่นๆ java script การแนะนำ JavaScript จะช่วยให้กำหนดวิธีที่ผู้ใช้โต้ตอบกับแอปของคุณได้

เมื่อระบุ TextInput.type จะเป็น SINGLE_LINE เสมอ แม้ว่าจะตั้งค่าเป็น MULTIPLE_LINE ก็ตาม

object (Action)

ไม่บังคับ ระบุการดำเนินการที่ควรทำเมื่อช่องป้อนข้อความให้คำแนะนำแก่ผู้ใช้ที่โต้ตอบกับช่อง

หากไม่ระบุ ระบบจะกำหนดคำแนะนำโดย initialSuggestions และไคลเอ็นต์จะประมวลผลคำแนะนำ

หากระบุไว้ แอปจะดำเนินการที่ระบุไว้ที่นี่ เช่น เรียกใช้ฟังก์ชันที่กำหนดเอง

รองรับส่วนเสริมของ Google Workspace แต่ใช้ไม่ได้กับแอป Google Chat

string

ข้อความที่ปรากฏในช่องป้อนข้อความเมื่อช่องว่างเปล่า ใช้ข้อความนี้เพื่อแจ้งให้ผู้ใช้ป้อนค่า เช่น Enter a number from 0 to 100

รองรับในแอป Google Chat แต่ไม่รองรับส่วนเสริมของ Google Workspace

{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}

object (SuggestionItem)

รายการคําแนะนําที่ใช้สําหรับคําแนะนําที่เติมข้อความอัตโนมัติในช่องป้อนข้อความ

{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}

string

ค่าของอินพุตที่แนะนำในช่องป้อนข้อความ ซึ่งจะเท่ากับสิ่งที่ผู้ใช้ป้อนเอง

{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}

string

ชื่อที่ระบุอินพุตการเลือกในเหตุการณ์อินพุตแบบฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

string

ข้อความที่ปรากฏเหนือช่องป้อนข้อมูลการเลือกในอินเทอร์เฟซผู้ใช้

ระบุข้อความที่ช่วยให้ผู้ใช้ป้อนข้อมูลที่แอปของคุณต้องการ เช่น หากผู้ใช้เลือกความเร่งด่วนของตั๋วงานจากเมนูแบบเลื่อนลง ป้ายกำกับอาจเป็น "ความเร่งด่วน" หรือ "เลือกความเร่งด่วน"

enum (SelectionType)

ประเภทของรายการที่แสดงต่อผู้ใช้ในวิดเจ็ต SelectionInput ประเภทการเลือกรองรับการโต้ตอบประเภทต่างๆ ตัวอย่างเช่น ผู้ใช้สามารถเลือกช่องทำเครื่องหมายได้ตั้งแต่ 1 ช่องขึ้นไป แต่จะเลือกได้เพียงค่าเดียวจากเมนูแบบเลื่อนลง

object (SelectionItem)

อาร์เรย์ของรายการที่เลือกได้ เช่น ปุ่มตัวเลือกหรือช่องทำเครื่องหมายต่างๆ รองรับสูงสุด 100 รายการ

object (Action)

หากระบุไว้ ระบบจะส่งฟอร์มเมื่อการเลือกมีการเปลี่ยนแปลง หากไม่ได้ระบุไว้ คุณต้องระบุปุ่มแยกต่างหากที่ใช้ส่งแบบฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

integer

สำหรับเมนูแบบเลือกหลายรายการ คือจำนวนรายการสูงสุดที่ผู้ใช้เลือกได้ ค่าต่ำสุดคือ 1 รายการ หากไม่ระบุ ระบบจะใช้ 3 รายการเป็นค่าเริ่มต้น

integer

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

หากไม่ระบุ ค่าเริ่มต้นจะเป็น 0 อักขระสำหรับแหล่งข้อมูลแบบคงที่ และ 3 อักขระสำหรับแหล่งข้อมูลภายนอก

object (Action)

แหล่งข้อมูลภายนอก เช่น ฐานข้อมูลเชิงสัมพันธ์

object (PlatformDataSource)

แหล่งข้อมูลจาก Google Workspace

{
  "text": string,
  "value": string,
  "selected": boolean,
  "startIconUri": string,
  "bottomText": string
}

string

ข้อความที่ระบุหรืออธิบายรายการให้ผู้ใช้ทราบ

string

ค่าที่เชื่อมโยงกับรายการนี้ โดยไคลเอ็นต์ควรใช้ค่านี้เป็นค่าอินพุตฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

boolean

เลือกรายการนั้นโดยค่าเริ่มต้นหรือไม่ หากอินพุตการเลือกยอมรับเพียงค่าเดียว (เช่น สําหรับปุ่มตัวเลือกหรือเมนูแบบเลื่อนลง) ให้ตั้งค่าช่องนี้สําหรับรายการเดียวเท่านั้น

string

สำหรับเมนูแบบเลือกหลายรายการ URL สำหรับไอคอนที่แสดงถัดจากช่อง text ของรายการ รองรับไฟล์ PNG และ JPEG ต้องเป็น URL HTTPS เช่น https://developers.google.com/chat/images/quickstart-app-avatar.png

string

สำหรับเมนูแบบเลือกหลายรายการ คำอธิบายข้อความหรือป้ายกำกับที่แสดงใต้ช่อง text ของรายการ

{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}

enum (CommonDataSource)

แหล่งข้อมูลที่แชร์โดยแอปพลิเคชัน Google Workspace ทั้งหมด เช่น ผู้ใช้ในองค์กร Google Workspace

object (HostAppDataSourceMarkup)

แหล่งข้อมูลเฉพาะสําหรับแอปพลิเคชันโฮสต์ของ Google Workspace เช่น พื้นที่ใน Google Chat

{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}

object (ChatClientDataSourceMarkup)

แหล่งข้อมูลจาก Google Chat

{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}

object (SpaceDataSource)

พื้นที่ใน Google Chat ที่ผู้ใช้เป็นสมาชิก

{
  "defaultToCurrentSpace": boolean
}

boolean

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

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

string

ชื่อที่ใช้ระบุ DateTimePicker ในเหตุการณ์อินพุตแบบฟอร์ม

ดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มได้ที่รับข้อมูลแบบฟอร์ม

string

ข้อความที่แจ้งให้ผู้ใช้ป้อนวันที่ เวลา หรือวันที่และเวลา เช่น หากผู้ใช้กำลังกำหนดเวลาการนัดหมาย ให้ใช้ป้ายกำกับอย่าง Appointment date หรือ Appointment date and time

enum (DateTimePickerType)

วิดเจ็ตรองรับการป้อนข้อมูลวันที่ เวลา หรือวันที่และเวลาหรือไม่

string (int64 format)

ค่าเริ่มต้นที่แสดงในวิดเจ็ตเป็นมิลลิวินาทีตั้งแต่เวลา Epoch ของ Unix

ระบุค่าตามประเภทของเครื่องมือเลือก (DateTimePickerType) ดังนี้

• DATE_AND_TIME : วันที่และเวลาในปฏิทินตามเขตเวลา UTC เช่น ใช้ 1672574400000 เพื่อแสดงวันที่ 1 มกราคม 2023 เวลา 12:00 น. UTC
• DATE_ONLY : วันที่ในปฏิทินเวลา 00:00:00 น. UTC เช่น ใช้ 1672531200000 แทนวันที่ 1 มกราคม 2023
• TIME_ONLY : เวลาในเขตเวลา UTC เช่น หากต้องการแสดงเวลา 12:00 น. ให้ใช้ 43200000 (หรือ 12 * 60 * 60 * 1000)

integer

ตัวเลขที่แสดงค่าออฟเซ็ตของเขตเวลาจาก UTC ในหน่วยนาที หากตั้งค่าแล้ว valueMsEpoch จะแสดงในเขตเวลาที่ระบุ หากไม่ได้ตั้งค่า ค่าเริ่มต้นจะเป็นการตั้งค่าเขตเวลาของผู้ใช้

object (Action)

ทริกเกอร์เมื่อผู้ใช้คลิก บันทึก หรือ ล้าง จากอินเทอร์เฟซ DateTimePicker

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

string

ข้อความที่แสดงในส่วนหัวของตารางกริด

object (GridItem)

รายการที่จะแสดงในตาราง

object (BorderStyle)

รูปแบบเส้นขอบที่จะใช้กับแต่ละรายการในตาราง

integer

จำนวนคอลัมน์ที่จะแสดงในตารางกริด ระบบจะใช้ค่าเริ่มต้นหากไม่ได้ระบุช่องนี้ และค่าเริ่มต้นนั้นจะต่างกันไปตามตำแหน่งที่แสดงตารางกริด (กล่องโต้ตอบเทียบกับโฆษณาที่แสดงร่วม)

object (OnClick)

โค้ดเรียกกลับนี้จะนำมาใช้ซ้ำสำหรับรายการแบบตารางกริดแต่ละรายการ แต่จะใช้ตัวระบุและดัชนีของรายการในรายการที่เพิ่มลงในพารามิเตอร์ของโค้ดเรียกกลับ

{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}

string

ตัวระบุที่ผู้ใช้ระบุสำหรับรายการในตารางกริดนี้ ตัวระบุนี้จะแสดงอยู่ในพารามิเตอร์เรียกกลับ onClick ของตารางกริดระดับบนสุด

object (ImageComponent)

รูปภาพที่แสดงในรายการตารางกริด

string

ชื่อของรายการตารางกริด

string

คำบรรยายของรายการในตาราง

enum (GridItemLayout)

เลย์เอาต์ที่จะใช้สำหรับรายการในตาราง

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

string

URL รูปภาพ

string

ป้ายกำกับการช่วยเหลือพิเศษของรูปภาพ

object (ImageCropStyle)

รูปแบบการครอบตัดที่จะใช้กับรูปภาพ

object (BorderStyle)

รูปแบบเส้นขอบที่จะใช้กับรูปภาพ

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

enum (ImageCropType)

ประเภทการครอบตัด

number

สัดส่วนภาพที่จะใช้หากประเภทการครอบตัดคือ RECTANGLE_CUSTOM

ตัวอย่างเช่น วิธีใช้สัดส่วนภาพ 16:9

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

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

enum (BorderType)

ประเภทเส้นขอบ

object (Color)

สีที่จะใช้เมื่อเป็นประเภท BORDER_TYPE_STROKE

integer

รัศมีมุมสำหรับเส้นขอบ

{
  "columnItems": [
    {
      object (Column)
    }
  ]
}

object (Column)

อาร์เรย์ของคอลัมน์ คุณใส่คอลัมน์ได้สูงสุด 2 คอลัมน์ในการ์ดหรือกล่องโต้ตอบ

{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}

enum (HorizontalSizeStyle)

ระบุวิธีที่คอลัมน์เติมความกว้างของการ์ด

enum (HorizontalAlignment)

ระบุว่าจะให้วิดเจ็ตอยู่ทางซ้าย ขวา หรือตรงกลางของคอลัมน์

enum (VerticalAlignment)

ระบุว่าวิดเจ็ตจะปรับแนวอยู่ด้านบน ด้านล่าง หรือตรงกลางของคอลัมน์

object (Widgets)

อาร์เรย์ของวิดเจ็ตที่รวมอยู่ในคอลัมน์ วิดเจ็ตจะปรากฏตามลำดับที่ระบุไว้

{

  // 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)
  }
  // End of list of possible types for union field data.
}

object (TextParagraph)

วิดเจ็ต TextParagraph

object (Image)

วิดเจ็ต Image

object (DecoratedText)

วิดเจ็ต DecoratedText

object (ButtonList)

วิดเจ็ต ButtonList

object (TextInput)

วิดเจ็ต TextInput

object (SelectionInput)

วิดเจ็ต SelectionInput

object (DateTimePicker)

วิดเจ็ต DateTimePicker

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

string

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

object (OnClick)

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

{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}

object (Button)

ปุ่มหลักของส่วนท้ายแบบคงที่ ปุ่มต้องเป็นปุ่มข้อความที่มีข้อความและชุดสี

object (Button)

ปุ่มรองของส่วนท้ายแบบคงที่ ปุ่มต้องเป็นปุ่มข้อความที่มีข้อความและชุดสี หากตั้งค่า secondaryButton ไว้ คุณต้องตั้งค่า primaryButton ด้วย