Cards v2

การ์ด

อินเทอร์เฟซการ์ดที่แสดงในข้อความ Google Chat หรือส่วนเสริมของ Google Workspace

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

ออกแบบและดูตัวอย่างการ์ดด้วยเครื่องมือสร้างการ์ด

เปิดเครื่องมือสร้างการ์ด

ดูวิธีสร้างการ์ดได้ที่เอกสารประกอบต่อไปนี้

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

ตัวอย่าง: ข้อความการ์ดสำหรับแอป Google Chat

ตัวอย่างการ์ดรายชื่อติดต่อ

หากต้องการสร้างข้อความการ์ดตัวอย่างใน Google Chat ให้ใช้ JSON ต่อไปนี้ 

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
           "imageType": "CIRCLE",
           "imageAltText": "Avatar for Sasha"
         },
         "sections": [
           {
             "header": "Contact Info",
             "collapsible": true,
             "uncollapsibleWidgetsCount": 1,
             "widgets": [
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "EMAIL"
                   },
                   "text": "sasha@example.com"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "+1 (555) 555-1234"
                 }
               },
               {
                 "buttonList": {
                   "buttons": [
                     {
                       "text": "Share",
                       "onClick": {
                        "openLink": {
                           "url": "https://example.com/share"
                         }
                       }
                     },
                     {
                       "text": "Edit",
                       "onClick": {
                         "action": {
                           "function": "goToView",
                           "parameters": [
                             {
                               "key": "viewType",
                               "value": "EDIT"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
การแสดง JSON 
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
ช่อง
header

object (CardHeader)

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

sections[]

object (Section)

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

sectionDividerStyle

enum (DividerStyle)

รูปแบบเส้นแบ่งระหว่างส่วนหัว ส่วน และส่วนท้าย

cardActions[]

object (CardAction)

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

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

ตัวอย่างเช่น 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"
      }
    }
  }
]
name

string

ชื่อของการ์ด ใช้เป็นตัวระบุการ์ดในการไปยังส่วนต่างๆ ของการ์ด

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

displayStyle

enum (DisplayStyle)

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

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

peekCardHeader

object (CardHeader)

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

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

CardHeader

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

string

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

subtitle

string

คำบรรยายของส่วนหัวของการ์ด หากระบุไว้ จะปรากฏในบรรทัดของตัวเองใต้ title

imageType

enum (ImageType)

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

imageUrl

string

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

imageAltText

string

ข้อความแสดงแทนของรูปภาพนี้ที่ใช้เพื่อการช่วยเหลือพิเศษ

ImageType

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
SQUARE ค่าเริ่มต้น ใช้มาสก์สี่เหลี่ยมจัตุรัสกับรูปภาพ เช่น รูปภาพ 4x3 จะกลายเป็น 3x3
CIRCLE ใช้มาสก์วงกลมกับรูปภาพ เช่น รูปภาพ 4x3 จะกลายเป็นวงกลมที่มีเส้นผ่านศูนย์กลาง 3

ส่วน

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer,
  "collapseControl": {
    object (CollapseControl)
  }
}
ช่อง
header

string

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

widgets[]

object (Widget)

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

collapsible

boolean

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

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

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

uncollapsibleWidgetsCount

integer

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

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

collapseControl

object (CollapseControl)

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

วิดเจ็ต

การ์ดแต่ละใบประกอบด้วยวิดเจ็ต

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

การแสดง JSON 
{
  "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)
  },
  "carousel": {
    object (Carousel)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
ช่อง
horizontalAlignment

enum (HorizontalAlignment)

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

ฟิลด์สหภาพ data วิดเจ็ตมีได้เพียงรายการใดรายการหนึ่งต่อไปนี้ คุณใช้ฟิลด์วิดเจ็ตหลายรายการเพื่อแสดงรายการเพิ่มเติมได้ data ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
textParagraph

object (TextParagraph)

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

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

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

object (Image)

แสดงรูปภาพ

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

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

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

object (ButtonList)

รายการปุ่ม

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

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

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

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

object (DateTimePicker)

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

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

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

object (Divider)

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

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

"divider": {
}
grid

object (Grid)

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

ตัวอย่างเช่น 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"
    }
  }
}
columns

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

object (Carousel)

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

{
  "widgets": [
    {
      "textParagraph": {
        "text": "First text paragraph in the carousel."
      }
    },
    {
      "textParagraph": {
        "text": "Second text paragraph in the carousel."
      }
    }
  ]
}
chipList

object (ChipList)

รายการชิป

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

"chipList": {
  "chips": [
    {
      "text": "Edit",
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}

TextParagraph

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "text": string,
  "maxLines": integer,
  "textSyntax": enum (TextSyntax)
}
ช่อง
text

string

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

maxLines

integer

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

ค่าเริ่มต้นคือ 0 ซึ่งในกรณีนี้ระบบจะแสดงบริบททั้งหมด ระบบจะไม่สนใจค่าที่เป็นลบ

textSyntax

enum (TextSyntax)

ไวยากรณ์ของข้อความ หากไม่ได้ตั้งค่าไว้ ระบบจะแสดงข้อความเป็น HTML

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

TextSyntax

ไวยากรณ์ที่ใช้ในการจัดรูปแบบข้อความ

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

Enum
TEXT_SYNTAX_UNSPECIFIED ระบบจะแสดงข้อความเป็น HTML หากไม่ได้ระบุ
HTML ข้อความจะแสดงผลเป็น HTML นี่คือค่าเริ่มต้น
MARKDOWN ข้อความจะแสดงผลเป็นมาร์กดาวน์

รูปภาพ

รูปภาพที่ระบุโดย URL และอาจมี onClick การดำเนินการ ดูตัวอย่างได้ที่ เพิ่มรูปภาพ

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

string

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

เช่น 

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

object (OnClick)

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

altText

string

ข้อความแสดงแทนของรูปภาพนี้ที่ใช้เพื่อการช่วยเหลือพิเศษ

OnClick

แสดงวิธีตอบกลับเมื่อผู้ใช้คลิกองค์ประกอบแบบอินเทอร์แอกทีฟในการ์ด เช่น ปุ่ม

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{

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

ฟิลด์สหภาพ data

data ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น

action

object (Action)

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

card

object (Card)

ระบบจะพุชการ์ดใหม่ไปยังกองการ์ดหลังจากคลิกหากมีการระบุ

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

overflowMenu

object (OverflowMenu)

หากระบุไว้ ตัวเลือกนี้จะ onClick เปิดเมนูรายการเพิ่มเติม

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction),
  "requiredWidgets": [
    string
  ],
  "allWidgetsAreRequired": boolean
}
ช่อง
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จะทำให้แอปเปิดกล่องโต้ตอบได้ เมื่อระบุไว้ ระบบจะไม่แสดงตัวบ่งชี้การโหลด หากระบุไว้สำหรับส่วนเสริม ระบบจะนำการ์ดทั้งหมดออกและไม่แสดงสิ่งใดในไคลเอ็นต์

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

requiredWidgets[]

string

ไม่บังคับ กรอกรายการนี้ด้วยชื่อของวิดเจ็ตที่การดำเนินการนี้ต้องใช้สำหรับการส่งที่ถูกต้อง

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

allWidgetsAreRequired

boolean

ไม่บังคับ หากเป็นจริง การดำเนินการนี้จะถือว่าวิดเจ็ตทั้งหมดเป็นวิดเจ็ตที่จำเป็น

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

ActionParameter

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

ดูข้อมูลเพิ่มเติมได้ที่ CommonEventObject

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

string

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

value

string

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

LoadIndicator

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
SPINNER แสดงวงกลมหมุนเพื่อระบุว่าระบบกำลังโหลดเนื้อหา
NONE ไม่มีการแสดงผล

การโต้ตอบ

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

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

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

การระบุ interaction จะช่วยให้แอปตอบสนองด้วยวิธีโต้ตอบพิเศษได้ เช่น การตั้งค่า interaction เป็น OPEN_DIALOGจะทำให้แอปเปิดกล่องโต้ตอบได้

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

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

Enum
INTERACTION_UNSPECIFIED ค่าเริ่มต้น โดย action จะทำงานตามปกติ
OPEN_DIALOG

เปิดกล่องโต้ตอบ ซึ่งเป็นอินเทอร์เฟซแบบการ์ดในหน้าต่างที่แอป Chat ใช้เพื่อโต้ตอบกับผู้ใช้

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

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

OpenAs

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

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

Enum
FULL_SIZE ลิงก์จะเปิดเป็นหน้าต่างขนาดเต็ม (หากเป็นเฟรมที่ไคลเอ็นต์ใช้)
OVERLAY ลิงก์จะเปิดเป็นภาพซ้อนทับ เช่น ป๊อปอัป

OnClose

สิ่งที่ไคลเอ็นต์ทำเมื่อปิดลิงก์ที่เปิดโดย OnClick การดำเนินการ

การติดตั้งใช้งานขึ้นอยู่กับความสามารถของแพลตฟอร์มไคลเอ็นต์ เช่น เว็บเบราว์เซอร์อาจเปิดลิงก์ในหน้าต่างป๊อปอัปที่มีตัวแฮนเดิล OnClose

หากตั้งค่าทั้งแฮนเดิลอร์ OnOpen และ OnClose และแพลตฟอร์มไคลเอ็นต์ไม่รองรับทั้ง 2 ค่า แฮนเดิลอร์ OnClose จะมีความสำคัญเหนือกว่า

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

Enum
NOTHING ค่าเริ่มต้น บัตรไม่โหลดซ้ำและไม่มีอะไรเกิดขึ้น
RELOAD

โหลดการ์ดซ้ำหลังจากปิดหน้าต่างย่อย

หากใช้ร่วมกับ OpenAs.OVERLAY หน้าต่างย่อยจะทำหน้าที่เป็นกล่องโต้ตอบแบบโมดัลและระบบจะบล็อกการ์ดหลักจนกว่าหน้าต่างย่อยจะปิด

OverflowMenu

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "items": [
    {
      object (OverflowMenuItem)
    }
  ]
}
ช่อง
items[]

object (OverflowMenuItem)

ต้องระบุ รายการตัวเลือกเมนู

OverflowMenuItem

ตัวเลือกที่ผู้ใช้เรียกใช้ได้ในเมนูรายการเพิ่มเติม

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

object (Icon)

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

text

string

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

onClick

object (OnClick)

ต้องระบุ การดำเนินการที่เรียกใช้เมื่อเลือกตัวเลือกเมนู โดย OnClick ต้องไม่มี OverflowMenu หากมี OverflowMenu ระบบจะทิ้งและปิดใช้รายการเมนู

disabled

boolean

ตัวเลือกเมนูถูกปิดใช้หรือไม่ ค่าเริ่มต้นคือ false

Icon

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string,
  "materialIcon": {
    object (MaterialIcon)
  }
  // End of list of possible types for union field icons.
}
ช่อง
altText

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/workspace/chat

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

imageType

enum (ImageType)

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

ฟิลด์สหภาพ icons ไอคอนที่แสดงในวิดเจ็ตบนการ์ด icons ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
knownIcon

string

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

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

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

iconUrl

string

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

เช่น 

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

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

materialIcon

object (MaterialIcon)

แสดงไอคอน Material ของ Google อย่างใดอย่างหนึ่ง

เช่น หากต้องการแสดงไอคอนช่องทําเครื่องหมาย ให้ใช้ 

"materialIcon": {
  "name": "check_box"
}

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

MaterialIcon

ก ไอคอน Material ของ Google ซึ่งมีตัวเลือกมากกว่า 2, 500 รายการ

ตัวอย่างเช่น หากต้องการแสดงไอคอนช่องทําเครื่องหมาย ที่มีน้ำหนักและเกรดที่กำหนดเอง ให้เขียนดังนี้ 

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

การแสดง JSON 
{
  "name": string,
  "fill": boolean,
  "weight": integer,
  "grade": integer
}
ช่อง
name

string

ชื่อไอคอนที่กำหนดไว้ใน ไอคอน Material ของ Google เช่น check_box ชื่อที่ไม่ถูกต้องจะถูกละทิ้งและแทนที่ด้วยสตริงว่างเปล่า ซึ่งจะส่งผลให้ไอคอนแสดงผลไม่สำเร็จ

fill

boolean

ไอคอนแสดงผลเป็นแบบทึบไหม ค่าเริ่มต้นคือ false

หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ให้ไปที่ ไอคอนแบบอักษรของ Google แล้วปรับการตั้งค่าในส่วน ปรับแต่ง

weight

integer

ความหนาของเส้นของไอคอน เลือกจาก {100, 200, 300, 400, 500, 600, 700} หากไม่มี ค่าเริ่มต้นคือ 400 หากระบุค่าอื่น ระบบจะใช้ค่าเริ่มต้น

หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ให้ไปที่ ไอคอนแบบอักษรของ Google แล้วปรับการตั้งค่าในส่วน ปรับแต่ง

grade

integer

น้ำหนักและเกรดจะส่งผลต่อความหนาของสัญลักษณ์ การปรับคะแนนจะละเอียดกว่าการปรับน้ำหนัก และมีผลเพียงเล็กน้อยต่อขนาดของสัญลักษณ์ เลือกจาก {-25, 0, 200} หากไม่มี ค่าเริ่มต้นจะเป็น 0 หากระบุค่าอื่น ระบบจะใช้ค่าเริ่มต้น

หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ให้ไปที่ ไอคอนแบบอักษรของ Google แล้วปรับการตั้งค่าในส่วน ปรับแต่ง

DecoratedText

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "startIconVerticalAlignment": enum (VerticalAlignment),
  "topLabel": string,
  "topLabelText": {
    object (TextParagraph)
  },
  "text": string,
  "contentText": {
    object (TextParagraph)
  },
  "wrapText": boolean,
  "bottomLabel": string,
  "bottomLabelText": {
    object (TextParagraph)
  },
  "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.
}
ช่อง
icon
(deprecated)

object (Icon)

เลิกใช้งานแล้วและแนะนำให้ใช้ startIcon แทน

startIcon

object (Icon)

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

startIconVerticalAlignment

enum (VerticalAlignment)

ไม่บังคับ การจัดแนวตั้งของไอคอนเริ่มต้น หากไม่ได้ตั้งค่าไว้ ไอคอนจะอยู่กึ่งกลางในแนวตั้ง

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

topLabel

string

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

topLabelText

object (TextParagraph)

TextParagraph เทียบเท่ากับ topLabel ตัดทอนเสมอ อนุญาตให้จัดรูปแบบที่ซับซ้อนกว่า topLabel

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

text

string

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

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

contentText

object (TextParagraph)

TextParagraph เทียบเท่ากับ text อนุญาตให้จัดรูปแบบที่ซับซ้อนกว่า text

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

wrapText

boolean

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

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

bottomLabel

string

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

bottomLabelText

object (TextParagraph)

TextParagraph เทียบเท่ากับ bottomLabel ตัดข้อความเสมอ อนุญาตให้จัดรูปแบบที่ซับซ้อนกว่า bottomLabel

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

onClick

object (OnClick)

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

ฟิลด์สหภาพ control ปุ่ม สวิตช์ ช่องทำเครื่องหมาย หรือรูปภาพที่ปรากฏทางด้านขวาของข้อความใน decoratedText วิดเจ็ต control ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
button

object (Button)

ปุ่มที่ผู้ใช้คลิกเพื่อเรียกใช้การดำเนินการได้

switchControl

object (SwitchControl)

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

endIcon

object (Icon)

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

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

VerticalAlignment

แสดงแอตทริบิวต์การจัดแนวแนวตั้ง

Enum
VERTICAL_ALIGNMENT_UNSPECIFIED ประเภทที่ไม่ระบุ โปรดอย่าใช้
TOP การจัดแนวไปยังตำแหน่งด้านบน
MIDDLE การจัดแนวไปยังตำแหน่งตรงกลาง
BOTTOM การจัดแนวไปยังตำแหน่งด้านล่าง

ปุ่ม

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

หากต้องการเปลี่ยนรูปภาพให้เป็นปุ่มที่คลิกได้ ให้ระบุ Image (ไม่ใช่ ImageComponent) และตั้งค่าการดำเนินการ onClick

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string,
  "type": enum (Type)
}
ช่อง
text

string

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

icon

object (Icon)

ไอคอนที่แสดงภายในปุ่ม หากตั้งค่าทั้ง icon และ text ไว้ ไอคอนจะปรากฏก่อนข้อความ

color

object (Color)

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

หากต้องการตั้งค่าสีปุ่ม ให้ระบุค่าสำหรับช่อง red green และ blue ค่าต้องเป็นจำนวนทศนิยมระหว่าง 0 ถึง 1 โดยอิงตามค่าสี RGB ซึ่ง 0 (0/255) แสดงถึงไม่มีสี และ 1 (255/255) แสดงถึงความเข้มสูงสุดของสี

เช่น คำสั่งต่อไปนี้จะตั้งค่าสีเป็นสีแดงที่ความเข้มสูงสุด 

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

ฟิลด์ alpha ใช้กับสีปุ่มไม่ได้ หากระบุ ระบบจะไม่สนใจฟิลด์นี้

onClick

object (OnClick)

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

disabled

boolean

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

altText

string

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

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

type

enum (Type)

ไม่บังคับ ประเภทของปุ่ม หากไม่ได้ตั้งค่าไว้ ประเภทปุ่มจะมีค่าเริ่มต้นเป็น OUTLINED หากตั้งค่าฟิลด์ color ระบบจะบังคับให้ประเภทปุ่มเป็น FILLED และจะไม่สนใจค่าใดๆ ที่ตั้งไว้สำหรับฟิลด์นี้

สี

แสดงสีในพื้นที่สี RGBA การแสดงนี้ออกแบบมาเพื่อให้แปลงไปมาระหว่างการแสดงสีในภาษาต่างๆ ได้ง่ายกว่าการเน้นความกะทัดรัด เช่น ฟิลด์ของการแสดงนี้สามารถระบุให้กับตัวสร้างของ java.awt.Color ใน Java ได้อย่างง่ายดาย นอกจากนี้ยังสามารถระบุให้กับเมธอด +colorWithRed:green:blue:alpha ของ UIColor ใน iOS ได้อย่างง่ายดาย และด้วยการทำงานเพียงเล็กน้อย ก็สามารถจัดรูปแบบให้เป็นสตริง rgba() ของ CSS ใน JavaScript ได้อย่างง่ายดาย

หน้าอ้างอิงนี้ไม่มีข้อมูลเกี่ยวกับพื้นที่สีสัมบูรณ์ที่ควรใช้ในการตีความค่า RGB เช่น sRGB, Adobe RGB, DCI-P3 และ BT.2020 โดยค่าเริ่มต้น แอปพลิเคชันควรใช้พื้นที่สี sRGB

เมื่อต้องตัดสินความเท่ากันของสี การใช้งานจะถือว่าสี 2 สีเท่ากันหากค่าสีแดง สีเขียว สีน้ำเงิน และค่าอัลฟ่าทั้งหมดแตกต่างกันไม่เกิน 1e-5 เว้นแต่จะมีการระบุไว้เป็นอย่างอื่น

ตัวอย่าง (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();
 }
 // ...

ตัวอย่าง (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;
}
// ...

ตัวอย่าง (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 
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
ช่อง
red

number

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

green

number

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

blue

number

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

alpha

number

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

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

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

ประเภท

ไม่บังคับ ประเภท ของปุ่ม หากตั้งค่าฟิลด์ color ระบบจะบังคับให้ type เป็น FILLED

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

Enum
TYPE_UNSPECIFIED อย่าใช้ ไม่ระบุ
OUTLINED ปุ่มแบบเติมขอบคือปุ่มที่มีความสำคัญระดับปานกลาง โดยปกติแล้วจะมีการดำเนินการที่สำคัญ แต่ไม่ใช่การดำเนินการหลักในแอปหรือส่วนเสริมของ Chat
FILLED ปุ่มแบบเติมสีมีคอนเทนเนอร์ที่มีสีทึบ ปุ่มนี้มีผลต่อภาพมากที่สุดและแนะนำให้ใช้สำหรับการดำเนินการที่สำคัญและหลักในแอปแชทหรือส่วนเสริม
FILLED_TONAL ปุ่มแบบเติมสีโทนเป็นทางเลือกตรงกลางระหว่างปุ่มแบบเติมสีและปุ่มแบบมีเส้นขอบ ปุ่มเหล่านี้มีประโยชน์ในบริบทที่ปุ่มที่มีลำดับความสำคัญต่ำกว่าต้องได้รับการเน้นย้ำมากกว่าปุ่มแบบร่างเล็กน้อย
BORDERLESS ปุ่มไม่มีคอนเทนเนอร์ที่มองไม่เห็นในสถานะเริ่มต้น มักใช้กับการกระทําที่มีลําดับความสําคัญต่ำสุด โดยเฉพาะอย่างยิ่งเมื่อแสดงตัวเลือกหลายรายการ

SwitchControl

สวิตช์แบบเปิด/ปิดหรือช่องทําเครื่องหมายภายในวิดเจ็ต decoratedText

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

รองรับเฉพาะในวิดเจ็ต decoratedText เท่านั้น

การแสดง JSON 
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
ช่อง
name

string

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

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

value

string

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

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

selected

boolean

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

onChangeAction

object (Action)

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

controlType

enum (ControlType)

ลักษณะของสวิตช์ในอินเทอร์เฟซผู้ใช้

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

ControlType

ลักษณะของสวิตช์ในอินเทอร์เฟซผู้ใช้

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
SWITCH สวิตช์แบบเปิด/ปิด
CHECKBOX เลิกใช้งานแล้วและแนะนำให้ใช้ CHECK_BOX แทน
CHECK_BOX ช่องทำเครื่องหมาย

ButtonList

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

object (Button)

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

TextInput

ฟิลด์ที่ผู้ใช้ป้อนข้อความได้ รองรับคำแนะนำและการดำเนินการเมื่อมีการเปลี่ยนแปลง รองรับการตรวจสอบการส่งแบบฟอร์ม เมื่อตั้งค่า Action.all_widgets_are_required เป็น true หรือระบุวิดเจ็ตนี้ใน Action.required_widgets ระบบจะบล็อกการดำเนินการส่ง เว้นแต่จะมีการป้อนค่า ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มช่องที่ผู้ใช้ป้อนข้อความได้

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

เมื่อต้องการรวบรวมข้อมูลที่ไม่ได้กำหนดหรือข้อมูลเชิงนามธรรมจากผู้ใช้ ให้ใช้ช่องป้อนข้อความ หากต้องการรวบรวมข้อมูลที่กำหนดหรือแจกแจงจากผู้ใช้ ให้ใช้ SelectionInput วิดเจ็ต

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "validation": {
    object (Validation)
  },
  "placeholderText": string
}
ช่อง
name

string

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

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

label

string

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

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

ต้องระบุหากไม่ได้ระบุ hintText หรือจะเว้นว่างไว้ก็ได้

hintText

string

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

ต้องระบุหากไม่ได้ระบุ label หรือจะเว้นว่างไว้ก็ได้

value

string

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

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

type

enum (Type)

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

onChangeAction

object (Action)

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

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

initialSuggestions

object (Suggestions)

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

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

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

autoCompleteAction

object (Action)

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

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

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

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

validation

object (Validation)

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

placeholderText

string

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

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

ประเภท

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
SINGLE_LINE ช่องป้อนข้อความมีความสูงคงที่ 1 บรรทัด
MULTIPLE_LINE ช่องป้อนข้อความมีความสูงคงที่หลายบรรทัด

RenderActions

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

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

ช่อง
action

Action

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

ช่อง
navigations[]

Navigation

พุช ป๊อป หรืออัปเดตการ์ด

ส่วนเสริมใน Google Chat

เพิ่มบัตรใหม่ลงในกอง (เลื่อนไปข้างหน้า) สำหรับแอป Chat จะใช้ได้กับหน้าแรกของแอปเท่านั้น

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

navigations: {
  pushCard: CARD
}

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

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

navigations: {
  updateCard: CARD
}

คำแนะนำ

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

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

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
ช่อง
items[]

object (SuggestionItem)

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

SuggestionItem

ค่าที่แนะนำค่าหนึ่งซึ่งผู้ใช้ป้อนได้ในช่องป้อนข้อความ

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{

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

ฟิลด์สหภาพ content

content ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น

text

string

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

การตรวจสอบความถูกต้อง

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
ช่อง
characterLimit

integer

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

inputType

enum (InputType)

ระบุประเภทของวิดเจ็ตอินพุต

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

InputType

ประเภทของวิดเจ็ตอินพุต

Enum
INPUT_TYPE_UNSPECIFIED ประเภทที่ไม่ระบุ โปรดอย่าใช้
TEXT ข้อความปกติที่ยอมรับอักขระทั้งหมด
INTEGER ค่าจำนวนเต็ม
FLOAT ค่าทศนิยม
EMAIL อีเมล
EMOJI_PICKER อีโมจิที่เลือกจากเครื่องมือเลือกอีโมจิที่ระบบมีให้

SelectionInput

วิดเจ็ตที่สร้างรายการ UI อย่างน้อย 1 รายการที่ผู้ใช้เลือกได้ รองรับการตรวจสอบการส่งแบบฟอร์มสำหรับเมนู dropdown และ multiselect เท่านั้น เมื่อตั้งค่า Action.all_widgets_are_required เป็น true หรือระบุวิดเจ็ตนี้ใน Action.required_widgets ระบบจะบล็อกการดำเนินการส่ง เว้นแต่จะมีการเลือกค่า เช่น เมนูแบบเลื่อนลงหรือช่องทำเครื่องหมาย คุณสามารถใช้วิดเจ็ตนี้เพื่อรวบรวมข้อมูลที่คาดการณ์หรือแจงนับได้ ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มองค์ประกอบ UI ที่เลือกได้

แอปแชทสามารถประมวลผลค่าของรายการที่ผู้ใช้เลือกหรือป้อนได้ ดูรายละเอียดเกี่ยวกับการทำงานกับข้อมูลที่ป้อนในแบบฟอร์มได้ที่ รับข้อมูลแบบฟอร์ม

หากต้องการรวบรวมข้อมูลที่ไม่ได้กําหนดหรือข้อมูลเชิงนามธรรมจากผู้ใช้ ให้ใช้ TextInput วิดเจ็ต

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "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.
}
ช่อง
name

string

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

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

label

string

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

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

type

enum (SelectionType)

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

items[]

object (SelectionItem)

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

onChangeAction

object (Action)

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

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

multiSelectMaxSelectedItems

integer

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

multiSelectMinQueryLength

integer

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

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

  • หากเมนูใช้อาร์เรย์แบบคงที่ของ SelectionInput รายการ ค่าเริ่มต้นจะเป็น 0 อักขระและจะแสดงรายการจากอาร์เรย์ทันที
  • หากเมนูใช้แหล่งข้อมูลแบบไดนามิก ( multi_select_data_source) ระบบจะตั้งค่าเริ่มต้นเป็น 3 อักขระก่อนที่จะค้นหาแหล่งข้อมูลเพื่อแสดงรายการที่แนะนำ

ฟิลด์สหภาพ multi_select_data_source สำหรับเมนูแบบเลือกหลายรายการ แหล่งข้อมูลที่สร้างรายการที่เลือกแบบไดนามิก

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace multi_select_data_source ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น

externalDataSource

object (Action)

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

platformDataSource

object (PlatformDataSource)

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

SelectionType

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
CHECK_BOX ชุดช่องทำเครื่องหมาย ผู้ใช้เลือกช่องทำเครื่องหมายได้มากกว่า 1 ช่อง
RADIO_BUTTON ชุดปุ่มตัวเลือก ผู้ใช้เลือกปุ่มตัวเลือกได้ 1 ปุ่ม
SWITCH ชุดสวิตช์ ผู้ใช้สามารถเปิดสวิตช์อย่างน้อย 1 ตัว
DROPDOWN เมนูแบบเลื่อนลง ผู้ใช้เลือกได้ 1 รายการจากเมนู
MULTI_SELECT

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

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

  • ข้อมูล Google Workspace: ระบบจะป้อนข้อมูลโดยใช้ข้อมูลจาก Google Workspace เช่น ผู้ใช้ Google Workspace หรือพื้นที่ Google Chat
  • ข้อมูลภายนอก: ระบบจะป้อนข้อมูลจากแหล่งข้อมูลภายนอกที่อยู่นอก Google Workspace

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

SelectionItem

รายการที่ผู้ใช้เลือกได้ในอินพุตการเลือก เช่น ช่องทําเครื่องหมายหรือสวิตช์ รองรับรายการสูงสุด 100 รายการ

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "text": string,
  "value": string,
  "selected": boolean,
  "bottomText": string,

  // Union field start_icon can be only one of the following:
  "startIconUri": string
  // End of list of possible types for union field start_icon.
}
ช่อง
text

string

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

value

string

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

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

selected

boolean

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

bottomText

string

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

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

string

PlatformDataSource

สำหรับวิดเจ็ตที่ใช้เมนูแบบเลือกหลายรายการ แหล่งข้อมูลจาก Google WorkspaceSelectionInput ใช้เพื่อแสดงรายการในเมนูแบบเลือกหลายรายการ

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

การแสดง JSON 
{

  // 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.
}
ช่อง
ฟิลด์สหภาพ data_source แหล่งข้อมูล data_source ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
commonDataSource

enum (CommonDataSource)

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

hostAppDataSource

object (HostAppDataSourceMarkup)

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

ฟิลด์นี้รองรับไลบรารีของไคลเอ็นต์ Google API แต่ไม่พร้อมใช้งานในไลบรารีของไคลเอ็นต์ระบบคลาวด์ ดูข้อมูลเพิ่มเติมได้ที่ ติดตั้งไลบรารีของไคลเอ็นต์

CommonDataSource

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

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

Enum
UNKNOWN ค่าเริ่มต้น อย่าใช้
USER ผู้ใช้ Google Workspace ผู้ใช้จะดูและเลือกผู้ใช้ได้จากองค์กร Google Workspace ของตนเองเท่านั้น

HostAppDataSourceMarkup

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

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

การแสดง JSON 
{

  // 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.
}
ช่อง
ฟิลด์สหภาพ data_source แอปพลิเคชัน Google Workspace ที่สร้างรายการสำหรับเมนูแบบเลือกหลายรายการ data_source ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
chatDataSource

object (ChatClientDataSourceMarkup)

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

ChatClientDataSourceMarkup

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

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

การแสดง JSON 
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
ช่อง
ฟิลด์สหภาพ source แหล่งข้อมูล Google Chat source ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
spaceDataSource

object (SpaceDataSource)

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

SpaceDataSource

แหล่งข้อมูลที่แสดงพื้นที่ Google Chat เป็นรายการที่เลือกได้สำหรับเมนูแบบหลายรายการ แสดงเฉพาะพื้นที่ทำงานที่ผู้ใช้เป็นสมาชิก

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

การแสดง JSON 
{
  "defaultToCurrentSpace": boolean
}
ช่อง
defaultToCurrentSpace

boolean

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

DateTimePicker

ให้ผู้ใช้ป้อนวันที่ เวลา หรือทั้งวันที่และเวลา รองรับการตรวจสอบการส่งแบบฟอร์ม เมื่อตั้งค่า Action.all_widgets_are_required เป็น true หรือระบุวิดเจ็ตนี้ใน Action.required_widgets ระบบจะบล็อกการดำเนินการส่ง เว้นแต่จะมีการเลือกค่า ดูตัวอย่างในแอป Google Chat ได้ที่ อนุญาตให้ผู้ใช้เลือกวันที่และเวลา

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": int64,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
ช่อง
name

string

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

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

label

string

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

type

enum (DateTimePickerType)

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

valueMsEpoch

int64

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

ระบุค่าตามประเภทเครื่องมือเลือก ( DateTimePickerType)

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

integer

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

onChangeAction

object (Action)

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

DateTimePickerType

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
DATE_AND_TIME ผู้ใช้ป้อนวันที่และเวลา
DATE_ONLY ผู้ใช้ป้อนวันที่
TIME_ONLY ผู้ใช้ป้อนเวลา

ตัวแบ่ง

ประเภทนี้ไม่มีฟิลด์

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

"divider": {}

GRid

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

ตัวอย่างเช่น 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"
    }
  }
}
การแสดง 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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

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

ImageComponent

แสดงรูปภาพ

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
ช่อง
imageUri

string

URL ของรูปภาพ

altText

string

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

cropStyle

object (ImageCropStyle)

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

borderStyle

object (BorderStyle)

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

ImageCropStyle

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
การแสดง JSON 
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
ช่อง
type

enum (ImageCropType)

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

aspectRatio

number

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

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

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

ImageCropType

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
IMAGE_CROP_TYPE_UNSPECIFIED อย่าใช้ ไม่ระบุ
SQUARE ค่าเริ่มต้น ใช้การครอบตัดแบบสี่เหลี่ยมจัตุรัส
CIRCLE ใช้การครอบตัดเป็นวงกลม
RECTANGLE_CUSTOM ใช้การครอบตัดแบบสี่เหลี่ยมผืนผ้าที่มีสัดส่วนภาพที่กำหนดเอง ตั้งค่าสัดส่วนภาพที่กำหนดเองด้วย aspectRatio
RECTANGLE_4_3 ใช้การครอบตัดสี่เหลี่ยมผืนผ้าที่มีสัดส่วนภาพ 4:3

BorderStyle

ตัวเลือกรูปแบบสำหรับเส้นขอบของการ์ดหรือวิดเจ็ต รวมถึงประเภทและสีของเส้นขอบ

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
ช่อง
type

enum (BorderType)

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

strokeColor

object (Color)

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

หากต้องการตั้งค่าสีเส้นขอบ ให้ระบุค่าสำหรับช่อง red green และ blue ค่าต้องเป็นจำนวนทศนิยมระหว่าง 0 ถึง 1 โดยอิงตามค่าสี RGB ซึ่ง 0 (0/255) แสดงถึงไม่มีสี และ 1 (255/255) แสดงถึงความเข้มสูงสุดของสี

เช่น คำสั่งต่อไปนี้จะตั้งค่าสีเป็นสีแดงที่ความเข้มสูงสุด 

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

ฟิลด์ alpha ใช้ไม่ได้กับสีเส้น หากระบุ ระบบจะไม่สนใจฟิลด์นี้

cornerRadius

integer

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

BorderType

แสดงประเภทเส้นขอบที่ใช้กับวิดเจ็ต

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
BORDER_TYPE_UNSPECIFIED อย่าใช้ ไม่ระบุ
NO_BORDER ไม่มีเส้นขอบ
STROKE ค่าเริ่มต้น Outline

GridItemLayout

แสดงตัวเลือกเลย์เอาต์ต่างๆ ที่ใช้ได้สำหรับรายการตารางกริด

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

Enum
GRID_ITEM_LAYOUT_UNSPECIFIED อย่าใช้ ไม่ระบุ
TEXT_BELOW ชื่อและคำบรรยายจะแสดงใต้รูปภาพของรายการในตารางกริด
TEXT_ABOVE ชื่อและคำบรรยายจะแสดงเหนือรูปภาพของรายการในตารางกริด

คอลัมน์

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

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

คอลัมน์จะแสดงเคียงข้างกัน คุณปรับแต่งความกว้างของแต่ละคอลัมน์ได้โดยใช้ฟิลด์ HorizontalSizeStyle หากความกว้างของหน้าจอผู้ใช้แคบเกินไป คอลัมน์ที่ 2 จะแสดงอยู่ใต้คอลัมน์แรก

  • ในเว็บ คอลัมน์ที่ 2 จะตัดข้อความหากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 480 พิกเซล
  • ในอุปกรณ์ iOS คอลัมน์ที่ 2 จะตัดข้อความหากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 300 pt
  • ในอุปกรณ์ Android คอลัมน์ที่ 2 จะตัดข้อความหากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 320 dp

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

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

  • กล่องโต้ตอบที่แสดงเมื่อผู้ใช้เปิดส่วนเสริมจากฉบับร่างอีเมล
  • กล่องโต้ตอบที่แสดงเมื่อผู้ใช้เปิดส่วนเสริมจากเมนู เพิ่มไฟล์แนบ ในกิจกรรม Google ปฏิทิน
การแสดง JSON 
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
ช่อง
columnItems[]

object (Column)

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

คอลัมน์

คอลัมน์

ส่วนเสริมของ Google Workspace และแอป Chat

การแสดง JSON 
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
ช่อง
horizontalSizeStyle

enum (HorizontalSizeStyle)

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

horizontalAlignment

enum (HorizontalAlignment)

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

verticalAlignment

enum (VerticalAlignment)

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

widgets[]

object (Widgets)

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

HorizontalSizeStyle

ระบุวิธีที่คอลัมน์เติมความกว้างของการ์ด ความกว้างของแต่ละคอลัมน์ขึ้นอยู่กับทั้ง HorizontalSizeStyle และความกว้างของวิดเจ็ตภายในคอลัมน์

ส่วนเสริมของ Google Workspace และแอป Chat

Enum
HORIZONTAL_SIZE_STYLE_UNSPECIFIED อย่าใช้ ไม่ระบุ
FILL_AVAILABLE_SPACE ค่าเริ่มต้น คอลัมน์จะเติมพื้นที่ว่างสูงสุด 70% ของความกว้างของการ์ด หากตั้งค่าทั้ง 2 คอลัมน์เป็น FILL_AVAILABLE_SPACE แต่ละคอลัมน์จะใช้พื้นที่ 50%
FILL_MINIMUM_SPACE คอลัมน์จะใช้พื้นที่น้อยที่สุดเท่าที่จะเป็นไปได้และไม่เกิน 30% ของความกว้างของการ์ด

HorizontalAlignment

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

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

Enum
HORIZONTAL_ALIGNMENT_UNSPECIFIED อย่าใช้ ไม่ระบุ
START ค่าเริ่มต้น จัดวิดเจ็ตให้อยู่ที่ตำแหน่งเริ่มต้นของคอลัมน์ สำหรับเลย์เอาต์จากซ้ายไปขวา จะจัดแนวไปทางซ้าย สำหรับเลย์เอาต์จากขวาไปซ้าย จะจัดแนวไปทางขวา
CENTER จัดวิดเจ็ตให้อยู่ตรงกลางคอลัมน์
END จัดวิดเจ็ตให้ตรงกับตำแหน่งสิ้นสุดของคอลัมน์ สำหรับเลย์เอาต์จากซ้ายไปขวา ให้จัดวิดเจ็ตไปทางขวา สำหรับเลย์เอาต์จากขวาไปซ้าย ให้จัดวิดเจ็ตไปทางซ้าย

VerticalAlignment

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

ส่วนเสริมของ Google Workspace และแอป Chat

Enum
VERTICAL_ALIGNMENT_UNSPECIFIED อย่าใช้ ไม่ระบุ
CENTER ค่าเริ่มต้น จัดวิดเจ็ตให้อยู่ตรงกลางคอลัมน์
TOP จัดวิดเจ็ตไปที่ด้านบนของคอลัมน์
BOTTOM จัดแนววิดเจ็ตไปที่ด้านล่างของคอลัมน์

วิดเจ็ต

วิดเจ็ตที่รองรับซึ่งคุณใส่ไว้ในคอลัมน์ได้

ส่วนเสริมของ Google Workspace และแอป Chat

การแสดง JSON 
{

  // 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)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
ช่อง

ฟิลด์สหภาพ data

data ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น

textParagraph

object (TextParagraph)

TextParagraph วิดเจ็ต

image

object (Image)

Image วิดเจ็ต

decoratedText

object (DecoratedText)

DecoratedText วิดเจ็ต

buttonList

object (ButtonList)

ButtonList วิดเจ็ต

textInput

object (TextInput)

TextInput วิดเจ็ต

selectionInput

object (SelectionInput)

SelectionInput วิดเจ็ต

dateTimePicker

object (DateTimePicker)

DateTimePicker วิดเจ็ต

chipList

object (ChipList)

ChipList วิดเจ็ต

ChipList

รายการชิปที่จัดวางในแนวนอน ซึ่งเลื่อนในแนวนอนหรือตัดไปบรรทัดถัดไปได้

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
ช่อง
layout

enum (Layout)

เลย์เอาต์รายการชิปที่ระบุ

chips[]

object (Chip)

อาร์เรย์ของชิป

เลย์เอาต์

เลย์เอาต์รายการชิป

Enum
LAYOUT_UNSPECIFIED อย่าใช้ ไม่ระบุ
WRAPPED ค่าเริ่มต้น รายการชิปจะขึ้นบรรทัดใหม่หากมีพื้นที่แนวนอนไม่เพียงพอ
HORIZONTAL_SCROLLABLE ชิปจะเลื่อนในแนวนอนหากมีพื้นที่ไม่เพียงพอ

ชิป

ชิปข้อความ ไอคอน หรือข้อความและไอคอนที่ผู้ใช้คลิกได้

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "icon": {
    object (Icon)
  },
  "label": string,
  "onClick": {
    object (OnClick)
  },
  "enabled": boolean,
  "disabled": boolean,
  "altText": string
}
ช่อง
icon

object (Icon)

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

label

string

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

onClick

object (OnClick)

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

enabled
(deprecated)

boolean

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

disabled

boolean

ไม่ว่าชิปจะอยู่ในสถานะไม่ได้ใช้งานและไม่สนใจการกระทำของผู้ใช้หรือไม่ ค่าเริ่มต้นคือ false

altText

string

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

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

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

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

{
  "carouselCards": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "First text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Second text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Third text paragraph in carousel",
          }
        }
      ]
    }
  ]
}

พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

การแสดง JSON 
{
  "carouselCards": [
    {
      object (CarouselCard)
    }
  ]
}
ช่อง
carouselCards[]

object (CarouselCard)

รายการการ์ดที่รวมอยู่ในภาพสไลด์

CarouselCard

การ์ดที่แสดงเป็นรายการในภาพสไลด์ได้ พร้อมใช้งานสำหรับแอป Google Chat และไม่พร้อมใช้งานสำหรับส่วนเสริม Google Workspace

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

object (NestedWidget)

รายการวิดเจ็ตที่แสดงในการ์ดภาพสไลด์ วิดเจ็ตจะแสดงตามลำดับที่ระบุ

footerWidgets[]

object (NestedWidget)

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

NestedWidget

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

การแสดง JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "buttonList": {
    object (ButtonList)
  },
  "image": {
    object (Image)
  }
  // End of list of possible types for union field data.
}
ช่อง

ฟิลด์สหภาพ data

data ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น

textParagraph

object (TextParagraph)

วิดเจ็ตย่อหน้าข้อความ

buttonList

object (ButtonList)

วิดเจ็ตรายการปุ่ม

image

object (Image)

วิดเจ็ตรูปภาพ

CollapseControl

แสดงตัวควบคุมการขยายและยุบ

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
ช่อง
horizontalAlignment

enum (HorizontalAlignment)

การจัดแนวแนวนอนของปุ่มขยายและยุบ

expandButton

object (Button)

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

collapseButton

object (Button)

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

DividerStyle

รูปแบบตัวคั่นของการ์ด ปัจจุบันใช้สำหรับเส้นแบ่งระหว่างส่วนการ์ดเท่านั้น

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

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

CardAction

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

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

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

string

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

onClick

object (OnClick)

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

CardFixedFooter

ส่วนท้ายแบบคงที่ (Sticky) ที่ปรากฏที่ด้านล่างของการ์ด

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

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

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace

การแสดง JSON 
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
ช่อง
primaryButton

object (Button)

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

secondaryButton

object (Button)

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

DisplayStyle

ในส่วนเสริมของ Google Workspace จะกำหนดวิธีแสดงการ์ด

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

Enum
DISPLAY_STYLE_UNSPECIFIED อย่าใช้ ไม่ระบุ
PEEK ส่วนหัวของการ์ดจะปรากฏที่ด้านล่างของแถบด้านข้าง โดยจะทับซ้อนกับการ์ดด้านบนสุดของการ์ดซ้อนบางส่วน การคลิกส่วนหัวจะทำให้การ์ดปรากฏในกองการ์ด หากการ์ดไม่มีส่วนหัว ระบบจะใช้ส่วนหัวที่สร้างขึ้นแทน
REPLACE ค่าเริ่มต้น การ์ดจะแสดงโดยการแทนที่มุมมองของการ์ดบนสุดในกองการ์ด