การ์ด
อินเทอร์เฟซของการ์ดที่แสดงในข้อความ Google Chat หรือส่วนเสริมของ Google Workspace
การ์ดรองรับเลย์เอาต์ที่กำหนดไว้ องค์ประกอบ UI แบบอินเทอร์แอกทีฟ เช่น ปุ่ม และริชมีเดีย เช่น รูปภาพ ใช้การ์ดเพื่อนำเสนอข้อมูลโดยละเอียด รวบรวมข้อมูลจากผู้ใช้ และแนะนำผู้ใช้ให้ดำเนินการในขั้นตอนถัดไป
ออกแบบและแสดงตัวอย่างการ์ดด้วยเครื่องมือสร้างการ์ด
เปิดเครื่องมือสร้างการ์ด
หากต้องการดูวิธีสร้างการ์ด โปรดดูเอกสารประกอบต่อไปนี้
- สําหรับแอป 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 ( |
ช่อง | |
---|---|
header
|
ส่วนหัวของการ์ด ส่วนหัวมักประกอบด้วยรูปภาพนำหน้าและชื่อ ส่วนหัวจะปรากฏที่ด้านบนของการ์ดเสมอ |
sections[]
|
มีคอลเล็กชันวิดเจ็ต แต่ละส่วนมีส่วนหัวที่คุณสามารถเลือกได้ ส่วนต่างๆ จะคั่นด้วยเส้นแบ่งอย่างชัดเจน ดูตัวอย่างในแอป Google Chat ได้ที่ กำหนดส่วนของการ์ด |
sectionDividerStyle
|
รูปแบบตัวแบ่งระหว่างส่วนต่างๆ |
cardActions[]
|
การดำเนินการของการ์ด ระบบจะเพิ่มการดำเนินการไปที่เมนูแถบเครื่องมือของการ์ด
ตัวอย่างเช่น JSON ต่อไปนี้สร้างเมนูการทํางานของการ์ดที่มี
|
name
|
ชื่อการ์ด ใช้เป็นตัวระบุบัตรในการนำทางด้วยการ์ด
|
fixedFooter
|
ส่วนท้ายแบบคงที่ที่แสดงที่ด้านล่างของการ์ดนี้
การเกริ่นนำ
|
displayStyle
|
ในส่วนเสริมของ Google Workspace ให้ตั้งค่าคุณสมบัติการแสดงผลของ
|
peekCardHeader
|
เมื่อแสดงเนื้อหาตามบริบท ส่วนหัวของการ์ด Peek จะทำหน้าที่เป็นตัวยึดตำแหน่งเพื่อให้ผู้ใช้สลับไปมาระหว่างการ์ดหน้าแรกและการ์ดบริบทได้
|
CardHeader
แสดงส่วนหัวของการ์ด ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มส่วนหัว
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"title": string,
"subtitle": string,
"imageType": enum (
|
ช่อง | |
---|---|
title
|
ต้องระบุ ชื่อส่วนหัวของการ์ด ส่วนหัวมีความสูงคงที่: หากมีการระบุทั้งชื่อและชื่อรอง แต่ละรายการจะใช้ 1 บรรทัด หากระบุไว้เพียงชื่อ ระบบจะใช้ทั้ง 2 บรรทัด |
subtitle
|
คำบรรยายของส่วนหัวของการ์ด หากระบุไว้ จะปรากฏเป็นบรรทัดเดียวใต้
|
imageType
|
รูปร่างที่ใช้ครอบตัดรูปภาพ
|
imageUrl
|
HTTPS URL ของรูปภาพในส่วนหัวของการ์ด |
imageAltText
|
ข้อความสำรองของรูปภาพนี้ซึ่งใช้สำหรับการช่วยเหลือพิเศษ |
ImageType
รูปร่างที่ใช้ครอบตัดรูปภาพ
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
SQUARE
|
ค่าเริ่มต้น ใช้มาสก์รูปสี่เหลี่ยมจัตุรัสกับรูปภาพ เช่น รูปภาพขนาด 4x3 จะกลายเป็น 3x3 |
CIRCLE
|
ใช้มาสก์รูปวงกลมกับรูปภาพ เช่น รูปภาพขนาด 4x3 จะกลายเป็นวงกลมที่มีเส้นผ่านศูนย์กลาง 3 |
ส่วน
ส่วนจะประกอบด้วยคอลเล็กชันของวิดเจ็ตที่แสดงผลในแนวตั้งตามลำดับที่ระบุไว้
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "header": string, "widgets": [ { object ( |
ช่อง | |
---|---|
header
|
ข้อความที่ปรากฏที่ด้านบนของส่วน รองรับข้อความรูปแบบ HTML อย่างง่าย ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่ การจัดรูปแบบข้อความในแอป Google Chat และ การจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace |
widgets[]
|
วิดเจ็ตทั้งหมดในส่วนนี้ ต้องมีวิดเจ็ตอย่างน้อย 1 รายการ |
collapsible
|
ระบุว่ายุบส่วนนี้ได้หรือไม่ ส่วนที่ยุบได้จะซ่อนวิดเจ็ตบางส่วนหรือทั้งหมด แต่ผู้ใช้สามารถขยายส่วนดังกล่าวเพื่อแสดงวิดเจ็ตที่ซ่อนไว้ได้โดยคลิก แสดงเพิ่มเติม ผู้ใช้สามารถซ่อนวิดเจ็ตอีกครั้งได้โดยคลิก แสดงน้อยลง
หากต้องการกำหนดวิดเจ็ตที่ซ่อนอยู่ ให้ระบุ
|
uncollapsibleWidgetsCount
|
จำนวนวิดเจ็ตที่ยุบไม่ได้ซึ่งยังคงมองเห็นได้แม้ว่าบางส่วนจะยุบอยู่
ตัวอย่างเช่น เมื่อส่วนหนึ่งมีวิดเจ็ตห้ารายการ และ
|
collapseControl
|
ไม่บังคับ กำหนดปุ่มขยายและยุบของส่วน ปุ่มนี้จะปรากฏต่อเมื่อส่วนนี้ยุบได้ หากไม่ได้ตั้งค่าช่องนี้ ระบบจะใช้ปุ่มเริ่มต้น
|
วิดเจ็ต
การ์ดแต่ละใบประกอบด้วยวิดเจ็ต
วิดเจ็ตเป็นออบเจ็กต์ผสมที่สามารถแสดงข้อความ รูปภาพ ปุ่ม และออบเจ็กต์ประเภทอื่นๆ ได้
การแสดง JSON |
---|
{ "horizontalAlignment": enum ( |
ช่อง | |
---|---|
horizontalAlignment
|
ระบุว่าจะให้วิดเจ็ตจัดชิดซ้าย ขวา หรือกึ่งกลางของคอลัมน์ |
ฟิลด์ Union
data วิดเจ็ตหนึ่งๆ จะมีรายการต่อไปนี้ได้เพียง 1 รายการเท่านั้น คุณสามารถใช้ช่องวิดเจ็ตหลายช่องเพื่อแสดงรายการต่างๆ ได้มากขึ้น
data
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้
|
|
textParagraph
|
แสดงย่อหน้าข้อความ รองรับข้อความรูปแบบ HTML อย่างง่าย ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่ การจัดรูปแบบข้อความในแอป Google Chat และ การจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace ตัวอย่างเช่น JSON ต่อไปนี้สร้างข้อความตัวหนา
|
image
|
แสดงรูปภาพ ตัวอย่างเช่น JSON ต่อไปนี้สร้างรูปภาพที่มีข้อความสำรอง
|
decoratedText
|
แสดงรายการข้อความตกแต่ง ตัวอย่างเช่น JSON ต่อไปนี้สร้างวิดเจ็ตข้อความที่ตกแต่งอย่างสวยงามซึ่งแสดงอีเมล
|
buttonList
|
รายการปุ่ม ตัวอย่างเช่น JSON ต่อไปนี้สร้างปุ่ม 2 ปุ่ม ปุ่มแรกเป็นปุ่มข้อความสีฟ้า ส่วนปุ่มที่ 2 เป็นปุ่มรูปภาพสำหรับเปิดลิงก์
|
textInput
|
แสดงกล่องข้อความที่ผู้ใช้พิมพ์ลงไปได้ ตัวอย่างเช่น JSON ต่อไปนี้สร้างการป้อนข้อความสำหรับอีเมล
อีกตัวอย่างหนึ่งคือ JSON ต่อไปนี้สร้างการป้อนข้อความสำหรับภาษาโปรแกรมที่มีคำแนะนำแบบคงที่
|
selectionInput
|
แสดงการควบคุมการเลือกที่ให้ผู้ใช้เลือกรายการได้ ตัวควบคุมการเลือกอาจเป็นช่องทำเครื่องหมาย ปุ่มตัวเลือก สวิตช์ หรือเมนูแบบเลื่อนลงก็ได้ ตัวอย่างเช่น JSON ต่อไปนี้สร้างเมนูแบบเลื่อนลงที่ให้ผู้ใช้เลือกขนาดได้
|
dateTimePicker
|
แสดงวิดเจ็ตที่ให้ผู้ใช้ป้อนวันที่ เวลา หรือวันที่และเวลา ตัวอย่างเช่น JSON ต่อไปนี้สร้างเครื่องมือเลือกวันที่เพื่อกำหนดเวลาการนัดหมาย
|
divider
|
แสดงตัวแบ่งเส้นแนวนอนระหว่างวิดเจ็ต ตัวอย่างเช่น JSON ต่อไปนี้สร้างตัวแบ่ง
|
grid
|
แสดงตารางกริดที่มีคอลเล็กชันรายการ ตารางกริดรองรับคอลัมน์และรายการจำนวนเท่าใดก็ได้ จํานวนแถวกําหนดโดยขอบเขตบนของจํานวนแถวหารด้วยจํานวนคอลัมน์ ตารางกริดที่มี 10 รายการและ 2 คอลัมน์มี 5 แถว ตารางกริดที่มี 11 รายการและ 2 คอลัมน์มี 6 แถว
ตัวอย่างเช่น JSON ต่อไปนี้สร้างตารางกริดแบบ 2 คอลัมน์ที่มีรายการเดียว
|
columns
|
แสดงได้สูงสุด 2 คอลัมน์
หากต้องการรวมมากกว่า 2 คอลัมน์ หรือใช้แถว ให้ใช้เมธอด
ตัวอย่างเช่น JSON ต่อไปนี้สร้าง 2 คอลัมน์โดยที่แต่ละคอลัมน์มีย่อหน้าข้อความ
|
chipList
|
รายการชิป ตัวอย่างเช่น JSON ต่อไปนี้สร้างชิป 2 รายการ อันแรกคือชิปข้อความ ส่วนที่สองคือชิปไอคอนที่จะเปิดลิงก์
|
TextParagraph
ย่อหน้าของข้อความที่รองรับการจัดรูปแบบ ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มย่อหน้าของข้อความที่มีการจัดรูปแบบ ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่ การจัดรูปแบบข้อความในแอป Google Chat และ การจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "text": string, "maxLines": integer } |
ช่อง | |
---|---|
text
|
ข้อความที่แสดงในวิดเจ็ต |
maxLines
|
จำนวนบรรทัดข้อความสูงสุดที่แสดงในวิดเจ็ต ถ้าข้อความยาวเกินจำนวนบรรทัดสูงสุดที่ระบุ เนื้อหาที่เกินจะถูกปิดบังไว้หลัง แสดงเพิ่มเติม หากข้อความเท่ากับหรือสั้นกว่าจำนวนบรรทัดสูงสุดที่ระบุ แสดงเพิ่มเติม ไม่แสดง
ค่าเริ่มต้นคือ 0 ซึ่งในกรณีนี้บริบททั้งหมดจะแสดง ระบบจะไม่สนใจค่าเชิงลบ
|
รูปภาพ
รูปภาพที่ระบุโดย URL และสามารถมี
onClick
การดำเนินการ ดูตัวอย่างได้ที่
เพิ่มรูปภาพ
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"imageUrl": string,
"onClick": {
object (
|
ช่อง | |
---|---|
imageUrl
|
HTTPS URL ที่โฮสต์รูปภาพ เช่น
|
onClick
|
เมื่อผู้ใช้คลิกรูปภาพ การคลิกดังกล่าวจะทำให้เกิดการดำเนินการนี้ |
altText
|
ข้อความสำรองของรูปภาพนี้ซึ่งใช้สำหรับการช่วยเหลือพิเศษ |
OnClick
แสดงถึงวิธีตอบสนองเมื่อผู้ใช้คลิกองค์ประกอบแบบอินเทอร์แอกทีฟบนการ์ด เช่น ปุ่ม
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ฟิลด์ Union
|
|
action
|
หากระบุไว้ การดำเนินการจะทริกเกอร์ตาม
|
openLink
|
หากระบุไว้ จะเป็น
|
openDynamicLinkAction
|
ส่วนเสริมจะทริกเกอร์การดำเนินการนี้เมื่อการดำเนินการต้องเปิดลิงก์ ซึ่งแตกต่างจาก
|
card
|
ระบบจะพุชการ์ดใหม่ไปยังกองการ์ดหลังจากคลิก หากระบุไว้
|
overflowMenu
|
หากระบุไว้ จะเป็น
|
การดำเนินการ
การดำเนินการที่อธิบายลักษณะการทำงานเมื่อมีการส่งแบบฟอร์ม ตัวอย่างเช่น คุณสามารถเรียกใช้สคริปต์ Apps Script เพื่อจัดการแบบฟอร์ม หากมีการทริกเกอร์การดำเนินการ ระบบจะส่งค่าของแบบฟอร์มไปยังเซิร์ฟเวอร์
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "function": string, "parameters": [ { object ( |
ช่อง | |
---|---|
function
|
ฟังก์ชันที่กำหนดเองที่จะเรียกใช้เมื่อมีการคลิกหรือเปิดใช้งานองค์ประกอบที่มี ตัวอย่างเช่น การใช้งาน โปรดดู อ่านข้อมูลแบบฟอร์ม |
parameters[]
|
รายการพารามิเตอร์การดำเนินการ |
loadIndicator
|
ระบุสัญญาณบอกสถานะการโหลดที่การดำเนินการแสดงขณะทำคำกระตุ้นให้ดำเนินการ |
persistValues
|
ระบุว่าค่าของแบบฟอร์มจะยังคงอยู่หลังจากการดำเนินการหรือไม่ ค่าเริ่มต้นคือ
ถ้า
ถ้า
|
interaction
|
ไม่บังคับ ต้องระบุเมื่อเปิด กล่องโต้ตอบ สิ่งที่ต้องทําเพื่อตอบสนองการโต้ตอบกับผู้ใช้ เช่น ผู้ใช้คลิกปุ่มในข้อความการ์ด
หากไม่ระบุ แอปจะตอบสนองด้วยการเรียกใช้
โดยระบุ
|
requiredWidgets[]
|
(ไม่บังคับ) กรอกชื่อวิดเจ็ตที่การดำเนินการนี้ต้องใช้เพื่อส่งที่ถูกต้องในรายการ
หากวิดเจ็ตที่แสดงที่นี่ไม่มีค่าเมื่อเรียกใช้การดำเนินการนี้ ระบบจะล้มเลิกการส่งแบบฟอร์ม
|
allWidgetsAreRequired
|
(ไม่บังคับ) หากเป็นเช่นนี้ จะถือว่าวิดเจ็ตทั้งหมดจำเป็นต้องมีสำหรับการดำเนินการนี้
|
ActionParameter
รายการพารามิเตอร์สตริงที่ต้องระบุเมื่อมีการเรียกใช้เมธอดการดำเนินการ ตัวอย่างเช่น ลองพิจารณาปุ่มปิดเสียงเตือนชั่วคราว 3 ปุ่ม ได้แก่ เลื่อนการแจ้งเตือนเลย ปิดเสียงเตือนชั่วคราว 1 วัน หรือเลื่อนการปลุกสัปดาห์หน้า คุณอาจใช้
action method = snooze()
ระบบจะส่งประเภทการเลื่อนการแจ้งเตือนและเวลาเลื่อนการแจ้งเตือนในรายการพารามิเตอร์สตริง
ดูข้อมูลเพิ่มเติมได้ที่
CommonEventObject
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "key": string, "value": string } |
ช่อง | |
---|---|
key
|
ชื่อพารามิเตอร์สำหรับสคริปต์การทำงาน |
value
|
ค่าของพารามิเตอร์ |
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 ที่ตอบสนองต่อการคลิกปุ่มข้อความการ์ด หากระบุไว้สำหรับส่วนเสริม การ์ดทั้งใบจะถูกตัดออกและไม่แสดงสิ่งใดในไคลเอ็นต์
|
OpenLink
แสดงถึง
onClick
เหตุการณ์ที่เปิดไฮเปอร์ลิงก์
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "url": string, "openAs": enum ( |
ช่อง | |
---|---|
url
|
URL ที่จะเปิด |
openAs
|
วิธีเปิดลิงก์
|
onClose
|
ไม่ว่าลูกค้าจะลืมลิงก์หลังจากเปิด หรือสังเกตเห็นลิงก์จนกว่าหน้าต่างจะปิดลง
|
OpenAs
เมื่อ
OnClick
การดำเนินการจะเปิดลิงก์ จากนั้นไคลเอ็นต์จะสามารถเปิดลิงก์เป็นหน้าต่างขนาดเต็ม (หากเป็นเฟรมที่ไคลเอ็นต์ใช้) หรือโฆษณาซ้อนทับ (เช่น ป๊อปอัป) การติดตั้งใช้งานจะขึ้นอยู่กับความสามารถของแพลตฟอร์มไคลเอ็นต์ และค่าที่เลือกอาจถูกละเว้นหากไคลเอ็นต์ไม่รองรับ
FULL_SIZE
ได้รับการสนับสนุนโดยไคลเอ็นต์ทั้งหมด
ใช้ได้กับส่วนเสริมของ Google Workspace แต่ใช้ไม่ได้กับแอป Google Chat
Enum | |
---|---|
FULL_SIZE
|
ลิงก์จะเปิดขึ้นเป็นหน้าต่างขนาดเต็ม (หากเป็นเฟรมที่ไคลเอ็นต์ใช้) |
OVERLAY
|
ลิงก์จะเปิดขึ้นเป็นการวางซ้อน เช่น ป๊อปอัป |
OnClose
สิ่งที่ไคลเอ็นต์ทำเมื่อลิงก์เปิดลิงก์โดย
OnClick
ปิดการดำเนินการแล้ว
การใช้งานจะขึ้นอยู่กับความสามารถของแพลตฟอร์มของลูกค้า ตัวอย่างเช่น เว็บเบราว์เซอร์อาจเปิดลิงก์ในหน้าต่างป๊อปอัปที่มี
OnClose
เครื่องจัดการ
หากทั้ง 2 อย่าง
OnOpen
และ
วันที่ OnClose
มีการตั้งค่าเครื่องจัดการ และแพลตฟอร์มไคลเอ็นต์ไม่สามารถรองรับทั้ง 2 ค่า
วันที่ OnClose
มีความสำคัญเหนือกว่า
ใช้ได้กับส่วนเสริมของ Google Workspace แต่ใช้ไม่ได้กับแอป Google Chat
Enum | |
---|---|
NOTHING
|
ค่าเริ่มต้น บัตรไม่โหลดซ้ำ ไม่มีอะไรเกิดขึ้น |
RELOAD
|
โหลดการ์ดซ้ำหลังจากที่หน้าต่างย่อยปิด
หากใช้ร่วมกับ
|
OverflowMenu
วิดเจ็ตที่แสดงเมนูป๊อปอัปพร้อมการทำงานอย่างน้อย 1 อย่างที่ผู้ใช้เรียกใช้ได้ เช่น การแสดงการดำเนินการที่ไม่ใช่การดำเนินการหลักในการ์ด โดยคุณสามารถใช้วิดเจ็ตนี้เมื่อการดำเนินการไม่พอดีกับพื้นที่ว่าง หากต้องการใช้งาน ให้ระบุวิดเจ็ตนี้ใน
OnClick
การทำงานของวิดเจ็ตที่รองรับ ตัวอย่างเช่น ใน
Button
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{
"items": [
{
object (
|
ช่อง | |
---|---|
items[]
|
ต้องระบุ รายการตัวเลือกเมนู |
OverflowMenuItem
ตัวเลือกที่ผู้ใช้เรียกใช้ได้ในเมนูรายการเพิ่มเติม
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ "startIcon": { object ( |
ช่อง | |
---|---|
startIcon
|
ไอคอนที่แสดงด้านหน้าข้อความ |
text
|
ต้องระบุ ข้อความที่ระบุหรืออธิบายสินค้าให้ผู้ใช้ทราบ |
onClick
|
ต้องระบุ มีการเรียกใช้การดำเนินการเมื่อเลือกตัวเลือกเมนู ช่วงเวลานี้
|
disabled
|
ตัวเลือกเมนูปิดใช้อยู่หรือไม่ ค่าเริ่มต้นคือ "เท็จ" |
Icon
ไอคอนที่แสดงในวิดเจ็ตบนการ์ด ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มไอคอน
รองรับ ในตัว และ กำหนดเอง ไอคอน
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "altText": string, "imageType": enum ( |
ช่อง | |
---|---|
altText
|
ไม่บังคับ คำอธิบายของไอคอนที่ใช้สำหรับการช่วยเหลือพิเศษ ค่าเริ่มต้นหากไม่ได้ระบุ
หากไอคอนได้รับการตั้งค่าใน
|
imageType
|
รูปแบบการครอบตัดที่ใช้กับรูปภาพ ในบางกรณีการใช้
|
ฟิลด์ Union
icons ไอคอนที่แสดงในวิดเจ็ตบนการ์ด
icons
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้
|
|
knownIcon
|
แสดงไอคอนในตัวของ Google Workspace
ตัวอย่างเช่น หากต้องการแสดงไอคอนรูปเครื่องบิน ให้ระบุ
ดูรายการไอคอนที่รองรับทั้งหมดได้ที่หัวข้อ ไอคอนในตัว |
iconUrl
|
แสดงไอคอนที่กำหนดเองที่โฮสต์ที่ HTTPS URL เช่น
ประเภทไฟล์ที่รองรับ ได้แก่
|
materialIcon
|
แสดงหนึ่งใน Material Icons ของ Google เช่น เพื่อแสดง ไอคอนช่องทำเครื่องหมาย ให้ใช้
|
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
|
ชื่อไอคอนที่กำหนดไว้ใน
ไอคอน Material ของ Google เช่น
|
fill
|
ไอคอนจะแสดงผลว่าเติมสีหรือไม่ ค่าเริ่มต้นคือ false หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ไปที่ Google Font Icons และปรับการตั้งค่าในส่วน ปรับแต่ง |
weight
|
น้ำหนักเส้นโครงร่างของไอคอน เลือกจาก {100, 200, 300, 400, 500, 600, 700} หากไม่มี ค่าเริ่มต้นจะเป็น 400 หากระบุค่าอื่นไว้ ระบบจะใช้ค่าเริ่มต้น หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ไปที่ Google Font Icons และปรับการตั้งค่าในส่วน ปรับแต่ง |
grade
|
น้ำหนักและคะแนนจะส่งผลต่อความหนาของสัญลักษณ์ การปรับคะแนนจะมีความละเอียดมากกว่าการปรับน้ำหนักและส่งผลต่อขนาดของสัญลักษณ์เพียงเล็กน้อย เลือก {-25, 0, 200} หากไม่มี ค่าเริ่มต้นจะเป็น 0 หากระบุค่าอื่นไว้ ระบบจะใช้ค่าเริ่มต้น หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ไปที่ Google Font Icons และปรับการตั้งค่าในส่วน ปรับแต่ง |
DecoratedText
วิดเจ็ตที่แสดงข้อความพร้อมการตกแต่งที่ไม่บังคับ เช่น ป้ายกำกับด้านบนหรือด้านล่างข้อความ ไอคอนด้านหน้าข้อความ วิดเจ็ตการเลือก หรือปุ่มที่อยู่หลังข้อความ ดูตัวอย่างในแอป Google Chat ได้ที่ แสดงข้อความพร้อมข้อความตกแต่ง
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "icon": { object ( |
ช่อง | |
---|---|
icon
|
เลิกใช้งานเพื่อ
|
startIcon
|
ไอคอนที่แสดงด้านหน้าข้อความ |
topLabel
|
ข้อความที่ปรากฏด้านบน
|
text
|
ต้องระบุ ข้อความหลัก สนับสนุนการจัดรูปแบบอย่างง่าย ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความได้ที่ การจัดรูปแบบข้อความในแอป Google Chat และ การจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace |
wrapText
|
การตั้งค่าตัดข้อความขึ้นบรรทัดใหม่ ถ้า
มีผลกับ
|
bottomLabel
|
ข้อความที่ปรากฏด้านล่าง
|
onClick
|
ระบบจะทริกเกอร์การดำเนินการนี้เมื่อผู้ใช้คลิก
|
ฟิลด์ Union
control ปุ่ม สวิตช์ ช่องทำเครื่องหมาย หรือรูปภาพที่ปรากฏทางด้านขวาของข้อความใน
decoratedText
วิดเจ็ต
control
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้
|
|
button
|
ปุ่มที่ผู้ใช้สามารถคลิกเพื่อทริกเกอร์การดำเนินการได้ |
switchControl
|
วิดเจ็ตสวิตช์ที่ผู้ใช้คลิกเพื่อเปลี่ยนสถานะและทริกเกอร์การดำเนินการได้ |
endIcon
|
ไอคอนที่แสดงหลังข้อความ |
ปุ่ม
ข้อความ ไอคอน หรือข้อความและปุ่มไอคอนที่ผู้ใช้คลิกได้ ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มปุ่ม
หากต้องการทำให้รูปภาพเป็นปุ่มที่คลิกได้ ให้ระบุ
(ไม่ใช่
Image
) และตั้งค่า
ImageComponent
onClick
การดำเนินการ
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "text": string, "icon": { object ( |
ช่อง | |
---|---|
text
|
ข้อความที่แสดงภายในปุ่ม |
icon
|
ไอคอนที่แสดงภายในปุ่ม หากทั้ง 2 อย่าง
|
color
|
ไม่บังคับ สีของปุ่ม หากตั้งค่าไว้ ปุ่ม
หากต้องการกำหนดสีปุ่ม ให้ระบุค่าสำหรับ
ตัวอย่างเช่น ค่าต่อไปนี้จะกำหนดสีเป็นสีแดงที่ความเข้มสูงสุด
|
onClick
|
ต้องระบุ การดำเนินการที่จะทำเมื่อผู้ใช้คลิกปุ่มดังกล่าว เช่น การเปิดไฮเปอร์ลิงก์หรือการเรียกใช้ฟังก์ชันที่กำหนดเอง |
disabled
|
ถ้า
|
altText
|
ข้อความสำรองที่ใช้สำหรับการเข้าถึง ตั้งค่าข้อความอธิบายที่ช่วยให้ผู้ใช้ทราบว่าปุ่มใช้ทำอะไร เช่น หากปุ่มหนึ่งเปิดไฮเปอร์ลิงก์ คุณอาจเขียนว่า "เปิดแท็บเบราว์เซอร์ใหม่และไปยังเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat ที่ https://developers.google.com/workspace/chat". |
type
|
ไม่บังคับ ประเภทของปุ่ม หากไม่ได้ตั้งค่า ประเภทปุ่มจะมีค่าเริ่มต้นเป็น
|
สี
แสดงสีในพื้นที่สี RGBA การนำเสนอนี้ออกแบบมาให้ง่ายต่อการแปลงเป็นและจากการแสดงสีในภาษาต่างๆ ที่กระชับได้ใจความ ตัวอย่างเช่น ฟิลด์ของการแสดงนี้สามารถใส่เพียงเล็กน้อยให้กับเครื่องมือสร้างของ
java.awt.Color
ใน Java ก็ยังอาจใส่เล็กน้อยให้กับ UIColor
วันที่ +colorWithRed:green:blue:alpha
ใน iOS และด้วยการทำงานเพียงเล็กน้อย ก็สามารถจัดรูปแบบเป็น CSS ได้ง่ายๆ
rgba()
ใน 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
|
ปริมาณสีแดงของสีเป็นค่าในช่วง [0, 1] |
green
|
ปริมาณสีเขียวของสีเป็นค่าในช่วง [0, 1] |
blue
|
ปริมาณของสีน้ำเงินเป็นค่าในช่วง [0, 1] |
alpha
|
เศษส่วนของสีนี้ที่ควรใช้กับพิกเซล กล่าวคือ สีของพิกเซลสุดท้ายจะกำหนดโดยสมการต่อไปนี้
หมายความว่าค่า 1.0 จะเท่ากับสีทึบ ในขณะที่ค่า 0.0 คือสีที่โปร่งใสทั้งหมด การดำเนินการนี้จะใช้ข้อความ Wrapper แทนสเกลาร์ Float แบบง่ายเพื่อให้แยกความแตกต่างระหว่างค่าเริ่มต้นกับค่าที่ไม่ได้ตั้งค่าได้ หากละเว้น วัตถุสีนี้จะแสดงเป็นสีทึบ (เสมือนว่าค่าอัลฟ่าได้รับค่าเป็น 1.0 อย่างชัดเจน) |
ประเภท
ไม่บังคับ
ประเภท
เพียงปุ่มเดียว ถ้า
color
มีการตั้งค่าฟิลด์
วันที่ type
ถูกบังคับให้
FILLED
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
Enum | |
---|---|
TYPE_UNSPECIFIED
|
โปรดอย่าใช้ ไม่ระบุ |
OUTLINED
|
ปุ่มแบบเติมขอบเป็นปุ่มที่เน้นปานกลาง โดยปกติแล้วจะมีการดำเนินการที่สำคัญ แต่ไม่ใช่การดำเนินการหลักในแอป Chat หรือส่วนเสริม |
FILLED
|
ปุ่มแบบเติมสีมีคอนเทนเนอร์ที่มีสีทึบ ซึ่งจะส่งผลกระทบด้านภาพมากที่สุด และแนะนำสำหรับการดำเนินการหลักที่สำคัญในแอป Chat หรือส่วนเสริม |
FILLED_TONAL
|
ปุ่มโทนสีเติมคือพื้นทางเลือกตรงกลางระหว่างปุ่มเติมสีและแบบเติมขอบ มีประโยชน์ในบริบทที่ปุ่มลำดับความสำคัญต่ำกว่าจะต้องเน้นมากกว่าปุ่ม "เติมแต่ง" เล็กน้อย |
BORDERLESS
|
ปุ่มไม่มีคอนเทนเนอร์ที่มองไม่เห็นในสถานะเริ่มต้น ซึ่งมักใช้กับการดำเนินการที่มีลำดับความสำคัญต่ำสุด โดยเฉพาะเมื่อนำเสนอตัวเลือกหลายรายการ |
SwitchControl
สวิตช์แบบสลับหรือช่องทำเครื่องหมายภายใน
decoratedText
วิดเจ็ต
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
รองรับเฉพาะใน
decoratedText
วิดเจ็ต
การแสดง JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
ช่อง | |
---|---|
name
|
ชื่อที่ใช้ระบุวิดเจ็ตสวิตช์ในเหตุการณ์อินพุตแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
value
|
ค่าที่ผู้ใช้ป้อนซึ่งแสดงเป็นส่วนหนึ่งของเหตุการณ์อินพุตแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
selected
|
วันและเวลา
|
onChangeAction
|
การดำเนินการที่จะทำเมื่อมีการเปลี่ยนแปลงสถานะสวิตช์ เช่น ฟังก์ชันที่จะเรียกใช้ |
controlType
|
ลักษณะที่สวิตช์จะปรากฏในอินเทอร์เฟซผู้ใช้
|
ControlType
ลักษณะที่สวิตช์จะปรากฏในอินเทอร์เฟซผู้ใช้
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
SWITCH
|
สวิตช์แบบสลับ |
CHECKBOX
|
เลิกใช้งานเพื่อ
CHECK_BOX
|
CHECK_BOX
|
ช่องทำเครื่องหมาย |
ButtonList
รายการปุ่มที่จัดวางในแนวนอน ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มปุ่ม
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"buttons": [
{
object (
|
ช่อง | |
---|---|
buttons[]
|
อาร์เรย์ของปุ่ม |
TextInput
ช่องที่ผู้ใช้สามารถป้อนข้อความ รองรับคำแนะนำและการดำเนินการเมื่อเปลี่ยนแปลง ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มช่องที่ผู้ใช้ป้อนข้อความได้
แอปแชทจะได้รับและประมวลผลค่าของข้อความที่ป้อนระหว่างเหตุการณ์การป้อนข้อมูลแบบฟอร์มได้ โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม
หากต้องการรวบรวมข้อมูลที่ไม่ได้กำหนดหรือเป็นข้อมูลนามธรรมจากผู้ใช้ ให้ใช้การป้อนข้อความ ในการรวบรวมข้อมูลที่กำหนดไว้หรือแจกแจงจากผู้ใช้ ให้ใช้
SelectionInput
วิดเจ็ต
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
ช่อง | |
---|---|
name
|
ชื่อที่ใช้ระบุการป้อนข้อความในเหตุการณ์การป้อนข้อมูลแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
label
|
ข้อความที่ปรากฏเหนือช่องป้อนข้อความในอินเทอร์เฟซผู้ใช้
ระบุข้อความที่ช่วยให้ผู้ใช้ป้อนข้อมูลที่แอปของคุณต้องการ ตัวอย่างเช่น หากต้องการถามชื่อบุคคล แต่ต้องการนามสกุลของบุคคลหนึ่งโดยเฉพาะ ให้เขียน
ต้องระบุหาก
|
hintText
|
ข้อความที่ปรากฏใต้ช่องป้อนข้อความมีไว้เพื่อช่วยเหลือผู้ใช้ด้วยข้อความแจ้งให้ป้อนค่าที่ต้องการ ข้อความนี้จะปรากฏเสมอ
ต้องระบุหาก
|
value
|
ค่าที่ผู้ใช้ป้อนซึ่งแสดงเป็นส่วนหนึ่งของเหตุการณ์อินพุตแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
type
|
ช่องป้อนข้อความจะปรากฏในอินเทอร์เฟซผู้ใช้อย่างไร ตัวอย่างเช่น ช่องนี้เป็นแบบบรรทัดเดียวหรือหลายบรรทัด |
onChangeAction
|
สิ่งที่ต้องทำเมื่อมีการเปลี่ยนแปลงในช่องป้อนข้อความ เช่น ผู้ใช้ที่เพิ่มลงในช่องหรือลบข้อความ ตัวอย่างการดำเนินการที่ต้องทำ ได้แก่ การเรียกใช้ฟังก์ชันที่กำหนดเองหรือการเปิด กล่องโต้ตอบ ใน Google Chat |
initialSuggestions
|
ค่าที่แนะนำซึ่งผู้ใช้ป้อนได้ ค่าเหล่านี้จะปรากฏขึ้นเมื่อผู้ใช้คลิกภายในช่องป้อนข้อความ ขณะที่ผู้ใช้พิมพ์ ค่าที่แนะนำจะกรองแบบไดนามิกเพื่อให้ตรงกับสิ่งที่ผู้ใช้พิมพ์
เช่น ช่องป้อนข้อความสำหรับภาษาโปรแกรมอาจแนะนำ Java, JavaScript, Python และ C++ เมื่อผู้ใช้เริ่มพิมพ์
ค่าที่แนะนำจะช่วยกระตุ้นให้ผู้ใช้ป้อนค่าที่แอปเข้าใจได้ เมื่อพูดถึง JavaScript ผู้ใช้บางรายอาจป้อน
เมื่อระบุแล้ว
|
autoCompleteAction
|
ไม่บังคับ ระบุสิ่งที่ต้องการดำเนินการเมื่อช่องป้อนข้อความให้คําแนะนําแก่ผู้ใช้ที่โต้ตอบกับช่อง
หากไม่ได้ระบุ ระบบจะใช้คำแนะนำตาม
หากระบุไว้ แอปจะดำเนินการที่ระบุไว้ที่นี่ เช่น การเรียกใช้ฟังก์ชันที่กำหนดเอง
|
validation
|
ระบุการตรวจสอบที่จำเป็นสำหรับช่องป้อนข้อความนี้
|
placeholderText
|
ข้อความที่ปรากฏในช่องป้อนข้อความเมื่อช่องดังกล่าวว่างเปล่า ใช้ข้อความนี้เพื่อแจ้งให้ผู้ใช้ป้อนค่า ตัวอย่างเช่น
|
ประเภท
ช่องป้อนข้อความจะปรากฏในอินเทอร์เฟซผู้ใช้อย่างไร ตัวอย่างเช่น ช่องป้อนข้อมูลแบบบรรทัดเดียวหรือหลายบรรทัด ถ้า
initialSuggestions
ระบุไว้
วันที่ type
เป็นเสมอ
SINGLE_LINE
แม้ว่าจะตั้งค่าเป็น
MULTIPLE_LINE
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
SINGLE_LINE
|
ช่องป้อนข้อความมีความสูงคงที่อยู่ที่ 1 บรรทัด |
MULTIPLE_LINE
|
ช่องป้อนข้อความมีความสูงคงที่ของบรรทัดหลายบรรทัด |
RenderActions
ชุดวิธีการแสดงผลที่บอกให้การ์ดดำเนินการต่างๆ หรือ จะกำหนดให้แอปโฮสต์ของส่วนเสริมหรือแอป Chat ดำเนินการเฉพาะแอป
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
ช่อง | |
---|---|
action |
การดำเนินการ
ช่อง | |
---|---|
navigations[] |
พุชหรืออัปเดตการ์ดที่แสดง |
คำแนะนำ
ค่าที่แนะนำซึ่งผู้ใช้ป้อนได้ ค่าเหล่านี้จะปรากฏขึ้นเมื่อผู้ใช้คลิกภายในช่องป้อนข้อความ ขณะที่ผู้ใช้พิมพ์ ค่าที่แนะนำจะกรองแบบไดนามิกเพื่อให้ตรงกับสิ่งที่ผู้ใช้พิมพ์
เช่น ช่องป้อนข้อความสำหรับภาษาโปรแกรมอาจแนะนำ 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 (
|
ช่อง | |
---|---|
items[]
|
รายการคำแนะนำที่ใช้สำหรับคำแนะนำที่เติมข้อความอัตโนมัติในช่องป้อนข้อความ |
SuggestionItem
ค่าที่แนะนำ 1 ค่าที่ผู้ใช้ป้อนลงในช่องป้อนข้อความได้
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ฟิลด์ Union
|
|
text
|
ค่าของอินพุตที่แนะนำในช่องป้อนข้อความ ซึ่งเทียบเท่ากับสิ่งที่ผู้ใช้ป้อนด้วยตนเอง |
การตรวจสอบความถูกต้อง
แสดงข้อมูลที่จำเป็นสำหรับการตรวจสอบความถูกต้องของวิดเจ็ตที่ติดอยู่
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"characterLimit": integer,
"inputType": enum (
|
ช่อง | |
---|---|
characterLimit
|
กำหนดจำนวนอักขระสูงสุดสำหรับวิดเจ็ตการป้อนข้อความ โปรดทราบว่าตัวเลือกนี้จะใช้สำหรับการป้อนข้อความเท่านั้น และจะไม่ดำเนินการกับวิดเจ็ตอื่นๆ
|
inputType
|
ระบุประเภทของวิดเจ็ตอินพุต
|
InputType
ประเภทของวิดเจ็ตอินพุต
Enum | |
---|---|
INPUT_TYPE_UNSPECIFIED
|
ไม่ได้ระบุประเภท โปรดอย่าใช้ |
TEXT
|
ข้อความปกติที่ยอมรับอักขระทั้งหมด |
INTEGER
|
ค่าจำนวนเต็ม |
FLOAT
|
ค่าจำนวนลอยตัว |
EMAIL
|
อีเมล |
EMOJI_PICKER
|
อีโมจิที่เลือกจากเครื่องมือเลือกอีโมจิที่ระบบมีให้ |
SelectionInput
วิดเจ็ตที่สร้างรายการ UI อย่างน้อย 1 รายการซึ่งผู้ใช้เลือกได้ เช่น เมนูแบบเลื่อนลงหรือช่องทำเครื่องหมาย คุณสามารถใช้วิดเจ็ตนี้เพื่อรวบรวมข้อมูลที่สามารถคาดการณ์หรือแจกแจงได้ ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มองค์ประกอบ UI ที่เลือกได้
แอปแชทจะประมวลผลมูลค่าของรายการที่ผู้ใช้เลือกหรือป้อนได้ โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม
หากต้องการรวบรวมข้อมูลที่ไม่ได้กำหนดหรือเป็นนามธรรมจากผู้ใช้ ให้ใช้
TextInput
วิดเจ็ต
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "name": string, "label": string, "type": enum ( |
ช่อง | |
---|---|
name
|
ต้องระบุ ชื่อที่ระบุอินพุตการเลือกในเหตุการณ์การป้อนข้อมูลแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
label
|
ข้อความที่ปรากฏเหนือช่องป้อนข้อมูลการเลือกในอินเทอร์เฟซผู้ใช้ ระบุข้อความที่ช่วยให้ผู้ใช้ป้อนข้อมูลที่แอปของคุณต้องการ เช่น หากผู้ใช้เลือกความเร่งด่วนของตั๋วงานจากเมนูแบบเลื่อนลง ป้ายกำกับอาจเป็น "ความเร่งด่วน" หรือ "เลือกความเร่งด่วน" |
type
|
ประเภทของรายการที่แสดงต่อผู้ใช้ใน
|
items[]
|
อาร์เรย์ของรายการที่เลือกได้ เช่น อาร์เรย์ของปุ่มตัวเลือกหรือช่องทำเครื่องหมาย รองรับสูงสุด 100 รายการ |
onChangeAction
|
หากระบุไว้ ระบบจะส่งแบบฟอร์มเมื่อมีการเปลี่ยนแปลงการเลือก หากไม่ได้ระบุไว้ คุณต้องระบุปุ่มแยกต่างหากซึ่งจะส่งแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
multiSelectMaxSelectedItems
|
จำนวนรายการสูงสุดที่ผู้ใช้เลือกได้สำหรับเมนูแบบเลือกหลายรายการ ค่าขั้นต่ำคือ 1 รายการ หากไม่ระบุ ค่าเริ่มต้นจะเป็น 3 รายการ |
multiSelectMinQueryLength
|
สำหรับเมนูแบบเลือกหลายรายการ จำนวนอักขระข้อความที่ผู้ใช้ป้อนก่อนที่แอปจะค้นหาการเติมข้อความอัตโนมัติและแสดงรายการที่แนะนำในเมนู หากไม่ระบุ ค่าเริ่มต้นจะเป็น 0 อักขระสำหรับแหล่งข้อมูลแบบคงที่ และ 3 อักขระสำหรับแหล่งข้อมูลภายนอก |
validation
|
สำหรับเมนูแบบเลื่อนลง การตรวจสอบความถูกต้องของช่องป้อนข้อมูลการเลือกนี้
|
ฟิลด์ Union
|
|
externalDataSource
|
แหล่งข้อมูลภายนอก เช่น ฐานข้อมูลเชิงสัมพันธ์ |
platformDataSource
|
แหล่งข้อมูลจาก Google Workspace |
SelectionType
รูปแบบของรายการที่ผู้ใช้เลือกได้ ตัวเลือกต่างๆ รองรับการโต้ตอบประเภทต่างๆ เช่น ผู้ใช้จะเลือกช่องทำเครื่องหมายได้หลายช่อง แต่จะเลือกได้เพียง 1 รายการจากเมนูแบบเลื่อนลง
อินพุตการเลือกแต่ละรายการรองรับการเลือก 1 ประเภท ตัวอย่างเช่น ไม่รองรับการรวมช่องทำเครื่องหมายและสวิตช์
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
CHECK_BOX
|
ช่องทำเครื่องหมายชุดหนึ่ง ผู้ใช้จะเลือกช่องทำเครื่องหมายได้อย่างน้อย 1 ช่อง |
RADIO_BUTTON
|
ชุดปุ่มตัวเลือก ผู้ใช้เลือกปุ่มตัวเลือกได้ 1 ปุ่ม |
SWITCH
|
ชุดสวิตช์ ผู้ใช้เปิดสวิตช์ได้อย่างน้อย 1 ตัว |
DROPDOWN
|
เมนูแบบเลื่อนลง ผู้ใช้จะเลือก 1 รายการได้จากเมนู |
MULTI_SELECT
|
เมนูการเลือกหลายรายการสำหรับข้อมูลแบบคงที่หรือแบบไดนามิก ผู้ใช้เลือกอย่างน้อย 1 รายการจากแถบเมนู นอกจากนี้ ผู้ใช้ยังป้อนค่าเพื่อป้อนข้อมูลแบบไดนามิกได้ด้วย เช่น ผู้ใช้จะเริ่มพิมพ์ชื่อพื้นที่ใน Google Chat แล้ววิดเจ็ตจะแนะนำพื้นที่ทำงานดังกล่าวโดยอัตโนมัติ หากต้องการเติมข้อมูลให้รายการสำหรับเมนูการเลือกหลายรายการ คุณสามารถใช้แหล่งข้อมูลประเภทใดประเภทหนึ่งต่อไปนี้
ดูตัวอย่างวิธีใช้เมนูการเลือกหลายรายการได้ที่ เพิ่มเมนูการเลือกหลายรายการ
|
SelectionItem
รายการที่ผู้ใช้เลือกได้ในอินพุตการเลือก เช่น ช่องทำเครื่องหมายหรือสวิตช์
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string } |
ช่อง | |
---|---|
text
|
ข้อความที่ระบุหรืออธิบายสินค้าให้ผู้ใช้ทราบ |
value
|
ค่าที่เชื่อมโยงกับรายการนี้ ไคลเอ็นต์ควรใช้ค่านี้เป็นค่าอินพุตของฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
selected
|
รายการนี้ถูกเลือกไว้โดยค่าเริ่มต้นหรือไม่ หากอินพุตการเลือกยอมรับเพียงค่าเดียว (เช่น สําหรับปุ่มตัวเลือกหรือเมนูแบบเลื่อนลง) ให้ตั้งค่าช่องนี้สําหรับรายการเดียวเท่านั้น |
startIconUri
|
สำหรับเมนูแบบเลือกหลายรายการ URL สำหรับไอคอนที่แสดงถัดจาก
|
bottomText
|
สำหรับเมนูแบบเลือกหลายรายการ ข้อความคำอธิบายหรือป้ายกำกับที่แสดงใต้
|
PlatformDataSource
สำหรับ
วิดเจ็ตที่ใช้เมนูการเลือกหลายรายการ ซึ่งเป็นแหล่งข้อมูลจาก Google Workspace ใช้เพื่อเติมข้อมูลรายการในเมนูการเลือกหลายรายการ
SelectionInput
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ฟิลด์ Union
data_source แหล่งข้อมูล
data_source
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้
|
|
commonDataSource
|
แหล่งข้อมูลที่แชร์โดยแอปพลิเคชันทั้งหมดของ Google Workspace เช่น ผู้ใช้ในองค์กร Google Workspace |
hostAppDataSource
|
แหล่งข้อมูลที่ไม่ซ้ำกันของแอปพลิเคชันโฮสต์ Google Workspace เช่น พื้นที่ทำงานใน Google Chat ช่องนี้รองรับไลบรารีของไคลเอ็นต์ Google API แต่ไม่มีในไลบรารีของไคลเอ็นต์ระบบคลาวด์ ดูข้อมูลเพิ่มเติมได้ที่ ติดตั้งไลบรารีของไคลเอ็นต์ |
CommonDataSource
แหล่งข้อมูลที่แชร์โดยทุกคน แอปพลิเคชันของ Google Workspace
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
Enum | |
---|---|
UNKNOWN
|
ค่าเริ่มต้น โปรดอย่าใช้ |
USER
|
ผู้ใช้ Google Workspace ผู้ใช้จะสามารถดูและเลือกผู้ใช้จากองค์กร Google Workspace ของตนเท่านั้น |
HostAppDataSourceMarkup
สำหรับ
วิดเจ็ตที่ใช้เมนูการเลือกหลายรายการ ซึ่งเป็นแหล่งข้อมูลจากแอปพลิเคชัน Google Workspace แหล่งข้อมูลจะเติมตัวเลือกรายการที่เลือกสำหรับเมนูการเลือกหลายรายการ
SelectionInput
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ฟิลด์ Union
data_source แอปพลิเคชัน Google Workspace ที่เติมข้อมูลให้กับเมนูการเลือกหลายรายการ
data_source
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้
|
|
chatDataSource
|
แหล่งข้อมูลจาก Google Chat |
ChatClientDataSourceMarkup
สำหรับ
วิดเจ็ตที่ใช้เมนูการเลือกหลายรายการ ซึ่งเป็นแหล่งข้อมูลจาก Google Chat แหล่งข้อมูลจะเติมตัวเลือกรายการที่เลือกสำหรับเมนูการเลือกหลายรายการ เช่น ผู้ใช้สามารถเลือกพื้นที่ใน Google Chat ที่เป็นสมาชิกอยู่
SelectionInput
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ฟิลด์ Union
source แหล่งข้อมูลของ Google Chat
source
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้
|
|
spaceDataSource
|
พื้นที่ใน Google Chat ที่ผู้ใช้เป็นสมาชิก |
SpaceDataSource
แหล่งข้อมูลที่ป้อนข้อมูลพื้นที่ใน Google Chat เป็นรายการที่เลือกสำหรับเมนูการเลือกหลายรายการ ป้อนข้อมูลในพื้นที่ทำงานที่ผู้ใช้เป็นสมาชิกเท่านั้น
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ "defaultToCurrentSpace": boolean } |
ช่อง | |
---|---|
defaultToCurrentSpace
|
หากตั้งค่าเป็น
|
DateTimePicker
อนุญาตให้ผู้ใช้ป้อนวันที่ เวลา หรือทั้งวันที่และเวลา ดูตัวอย่างในแอป Google Chat ได้ที่ ให้ผู้ใช้เลือกวันที่และเวลา
ผู้ใช้สามารถป้อนข้อความหรือใช้เครื่องมือเลือกวันที่และเวลา หากผู้ใช้ป้อนวันที่หรือเวลาไม่ถูกต้อง เครื่องมือเลือกจะแสดงข้อผิดพลาดที่แจ้งให้ผู้ใช้ป้อนข้อมูลอย่างถูกต้อง
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "name": string, "label": string, "type": enum ( |
ช่อง | |
---|---|
name
|
ชื่อที่ใช้
โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลในฟอร์มได้ที่ รับข้อมูลในแบบฟอร์ม |
label
|
ข้อความที่แจ้งให้ผู้ใช้ป้อนวันที่ เวลา หรือวันที่และเวลา ตัวอย่างเช่น หากผู้ใช้กำหนดเวลาการนัดหมาย ให้ใช้ป้ายกำกับอย่างเช่น
|
type
|
วิดเจ็ตรองรับการป้อนวันที่ เวลา หรือวันที่และเวลา |
valueMsEpoch
|
ค่าเริ่มต้นที่แสดงในวิดเจ็ตเป็นมิลลิวินาทีตั้งแต่ เวลา Unix Epoch
ระบุค่าตามประเภทของเครื่องมือเลือก (
|
timezoneOffsetDate
|
ตัวเลขที่แสดงค่าชดเชยเขตเวลาจาก UTC เป็นนาที หากตั้งค่าไว้ พารามิเตอร์
|
onChangeAction
|
ทริกเกอร์เมื่อผู้ใช้คลิก
บันทึก
หรือ
ล้าง
จาก
|
validation
|
(ไม่บังคับ) ระบุการตรวจสอบที่จำเป็นสำหรับเครื่องมือเลือกวันที่นี้
|
DateTimePickerType
รูปแบบของวันที่และเวลาใน
DateTimePicker
วิดเจ็ต กำหนดว่าผู้ใช้จะป้อนวันที่ เวลา หรือทั้งวันที่และเวลาได้
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
DATE_AND_TIME
|
ผู้ใช้ป้อนวันที่และเวลา |
DATE_ONLY
|
ผู้ใช้ป้อนวันที่ |
TIME_ONLY
|
ผู้ใช้ป้อนเวลา |
ตัวแบ่ง
ประเภทนี้ไม่มีช่อง
แสดงเส้นแบ่งระหว่างวิดเจ็ตเป็นเส้นแนวนอน ดูตัวอย่างในแอป Google Chat ได้ที่ เพิ่มตัวแบ่งแนวนอนระหว่างวิดเจ็ต
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
ตัวอย่างเช่น JSON ต่อไปนี้สร้างตัวแบ่ง
"divider": {}
GRid
แสดงตารางกริดที่มีคอลเล็กชันรายการ มีได้เฉพาะข้อความหรือรูปภาพเท่านั้น สำหรับคอลัมน์ที่ปรับเปลี่ยนตามอุปกรณ์ หรือหากต้องการรวมมากกว่าข้อความหรือรูปภาพ ให้ใช้
ดูตัวอย่างในแอป Google Chat ได้ที่
แสดงตารางกริดที่มีคอลเล็กชันรายการ
Columns
ตารางกริดรองรับคอลัมน์และรายการจำนวนเท่าใดก็ได้ จํานวนแถวกําหนดโดยนํารายการหารด้วยคอลัมน์ ตารางกริดที่มี 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 ( |
ช่อง | |
---|---|
title
|
ข้อความที่แสดงในส่วนหัวของตารางกริด |
items[]
|
รายการที่จะแสดงในตารางกริด |
borderStyle
|
รูปแบบเส้นขอบที่จะใช้กับแต่ละรายการในตาราง |
columnCount
|
จำนวนคอลัมน์ที่จะแสดงในตาราง ระบบจะใช้ค่าเริ่มต้นหากไม่ได้ระบุช่องนี้ และค่าเริ่มต้นนั้นจะแตกต่างกันไปตามตำแหน่งที่แสดงตารางกริด (กล่องโต้ตอบเทียบกับโฆษณาที่แสดงร่วม) |
onClick
|
Callback นี้จะนำกลับมาใช้ใหม่โดยแต่ละรายการในตารางกริด แต่จะมีตัวระบุและดัชนีของสินค้าในรายการที่เพิ่มลงในพารามิเตอร์ของ Callback |
GridItem
แสดงรายการในเลย์เอาต์แบบตารางกริด รายการอาจมีข้อความ รูปภาพ หรือทั้งข้อความและรูปภาพ
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "id": string, "image": { object ( |
ช่อง | |
---|---|
id
|
ตัวระบุที่ผู้ใช้ระบุสำหรับรายการตารางกริดนี้ ระบบจะแสดงตัวระบุนี้ในตารางระดับบนสุด
|
image
|
รูปภาพที่แสดงในรายการแบบตารางกริด |
title
|
ชื่อรายการในตารางกริด |
subtitle
|
คำบรรยายของรายการในตารางกริด |
layout
|
เลย์เอาต์ที่ใช้สำหรับรายการแบบตารางกริด |
ImageComponent
แสดงรูปภาพ
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "imageUri": string, "altText": string, "cropStyle": { object ( |
ช่อง | |
---|---|
imageUri
|
URL ของรูปภาพ |
altText
|
ป้ายกำกับการช่วยเหลือพิเศษสำหรับรูปภาพ |
cropStyle
|
รูปแบบการครอบตัดที่จะใช้กับรูปภาพ |
borderStyle
|
รูปแบบเส้นขอบที่จะใช้กับรูปภาพ |
ImageCropStyle
แสดงรูปแบบการครอบตัดที่ใช้กับรูปภาพ
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
เช่น วิธีใช้สัดส่วนภาพ 16:9
cropStyle {
"type": "RECTANGLE_CUSTOM",
"aspectRatio": 16/9
}
การแสดง JSON |
---|
{
"type": enum (
|
ช่อง | |
---|---|
type
|
ประเภทการครอบตัด |
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 ( |
ช่อง | |
---|---|
type
|
ประเภทเส้นขอบ |
strokeColor
|
สีที่จะใช้เมื่อเป็นประเภท
หากต้องการตั้งค่าสีเส้นโครงร่าง ให้ระบุค่าของฟิลด์
ตัวอย่างเช่น ค่าต่อไปนี้จะกำหนดสีเป็นสีแดงที่ความเข้มสูงสุด
|
cornerRadius
|
รัศมีของมุมของเส้นขอบ |
BorderType
แสดงประเภทเส้นขอบที่ใช้กับวิดเจ็ต
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
BORDER_TYPE_UNSPECIFIED
|
โปรดอย่าใช้ ไม่ระบุ |
NO_BORDER
|
ค่าเริ่มต้น ไม่มีเส้นขอบ |
STROKE
|
โครงร่าง |
GridItemLayout
แสดงตัวเลือกเลย์เอาต์ต่างๆ ที่พร้อมใช้งานสำหรับรายการแบบตารางกริด
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
GRID_ITEM_LAYOUT_UNSPECIFIED
|
โปรดอย่าใช้ ไม่ระบุ |
TEXT_BELOW
|
ชื่อและชื่อรองจะแสดงอยู่ใต้รูปภาพของรายการในตาราง |
TEXT_ABOVE
|
ชื่อและชื่อรองจะแสดงอยู่เหนือรูปภาพของรายการในตาราง |
คอลัมน์
Columns
แสดงคอลัมน์ได้สูงสุด 2 คอลัมน์ในการ์ดหรือกล่องโต้ตอบ คุณเพิ่มวิดเจ็ตในแต่ละคอลัมน์ได้ วิดเจ็ตจะปรากฏตามลำดับที่ระบุไว้ ดูตัวอย่างในแอป Google Chat ได้ที่
แสดงการ์ดและกล่องโต้ตอบในคอลัมน์
ความสูงของแต่ละคอลัมน์จะกำหนดโดยคอลัมน์ที่สูง ตัวอย่างเช่น หากคอลัมน์แรกสูงกว่าคอลัมน์ที่สอง ทั้งสองคอลัมน์จะมีความสูงของคอลัมน์แรก เนื่องจากแต่ละคอลัมน์มีจำนวนวิดเจ็ตแตกต่างกัน คุณจึงกำหนดแถวหรือจัดวิดเจ็ตระหว่างคอลัมน์ไม่ได้
คอลัมน์จะแสดงคู่กัน คุณสามารถปรับแต่งความกว้างของแต่ละคอลัมน์ได้โดยใช้
HorizontalSizeStyle
ด้วย หากความกว้างหน้าจอของผู้ใช้แคบเกินไป คอลัมน์ที่ 2 จะอยู่ใต้คอลัมน์แรก
- สำหรับบนเว็บ คอลัมน์ที่ 2 จะตัดเมื่อความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 480 พิกเซล
- ในอุปกรณ์ iOS คอลัมน์ที่ 2 จะล้อมรอบหากหน้าจอมีความกว้างน้อยกว่าหรือเท่ากับ 300 pt
- ในอุปกรณ์ Android คอลัมน์ที่ 2 จะล้อมรอบหากหน้าจอมีความกว้างน้อยกว่าหรือเท่ากับ 320 dp
หากต้องการรวมมากกว่า 2 คอลัมน์ หรือใช้แถว ให้ใช้เมธอด
วิดเจ็ต
Grid
วันที่
ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"columnItems": [
{
object (
|
ช่อง | |
---|---|
columnItems[]
|
อาร์เรย์ของคอลัมน์ คุณใส่คอลัมน์ในการ์ดหรือกล่องโต้ตอบได้สูงสุด 2 คอลัมน์ |
คอลัมน์
คอลัมน์
การแสดง JSON |
---|
{ "horizontalSizeStyle": enum ( |
ช่อง | |
---|---|
horizontalSizeStyle
|
ระบุความกว้างของคอลัมน์ |
horizontalAlignment
|
ระบุว่าจะให้วิดเจ็ตจัดชิดซ้าย ขวา หรือกึ่งกลางของคอลัมน์ |
verticalAlignment
|
ระบุว่าจะให้วิดเจ็ตจัดชิดด้านบน ด้านล่าง หรือตรงกลางของคอลัมน์ |
widgets[]
|
อาร์เรย์ของวิดเจ็ตที่รวมอยู่ในคอลัมน์ วิดเจ็ตจะปรากฏตามลำดับที่ระบุไว้ |
HorizontalSizeStyle
ระบุความกว้างของคอลัมน์ ความกว้างของแต่ละคอลัมน์ขึ้นอยู่กับ
HorizontalSizeStyle
และความกว้างของวิดเจ็ตภายในคอลัมน์
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
ระบุว่าจะให้วิดเจ็ตจัดชิดด้านบน ด้านล่าง หรือตรงกลางของคอลัมน์
Enum | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
โปรดอย่าใช้ ไม่ระบุ |
CENTER
|
ค่าเริ่มต้น จัดวิดเจ็ตให้อยู่ตรงกลางของคอลัมน์ |
TOP
|
จัดวิดเจ็ตไว้ที่ด้านบนของคอลัมน์ |
BOTTOM
|
จัดวิดเจ็ตไว้ที่ด้านล่างของคอลัมน์ |
วิดเจ็ต
วิดเจ็ตที่รองรับซึ่งคุณรวมไว้ในคอลัมน์ได้
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ฟิลด์ Union
|
|
textParagraph
|
|
image
|
|
decoratedText
|
|
buttonList
|
|
textInput
|
|
selectionInput
|
|
dateTimePicker
|
|
chipList
|
|
ChipList
รายการชิปที่จัดวางในแนวนอน ซึ่งจะเลื่อนในแนวนอนหรือตัดไปยังบรรทัดถัดไปได้
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ "layout": enum ( |
ช่อง | |
---|---|
layout
|
เลย์เอาต์รายการชิปที่ระบุ |
chips[]
|
อาร์เรย์ของชิป |
เลย์เอาต์
เลย์เอาต์รายการชิป
Enum | |
---|---|
LAYOUT_UNSPECIFIED
|
โปรดอย่าใช้ ไม่ระบุ |
WRAPPED
|
ค่าเริ่มต้น รายการชิปจะตัดไปไว้ในบรรทัดถัดไปหากมีพื้นที่แนวนอนไม่เพียงพอ |
HORIZONTAL_SCROLLABLE
|
โดยชิปจะเลื่อนในแนวนอนหากไม่พอดีกับพื้นที่ที่มีอยู่ |
ชิป
ข้อความ ไอคอน หรือชิปข้อความและไอคอนที่ผู้ใช้คลิกได้
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ "icon": { object ( |
ช่อง | |
---|---|
icon
|
ภาพไอคอน หากทั้ง 2 อย่าง
|
label
|
ข้อความที่แสดงในชิป |
onClick
|
ไม่บังคับ การดำเนินการที่จะทำเมื่อผู้ใช้คลิกชิป เช่น การเปิดไฮเปอร์ลิงก์หรือการเรียกใช้ฟังก์ชันที่กำหนดเอง |
enabled
|
ระบุว่าชิปอยู่ในสถานะใช้งานอยู่และตอบสนองต่อการดำเนินการของผู้ใช้หรือไม่ ค่าเริ่มต้นคือ
|
disabled
|
ชิปอยู่ในสถานะไม่ใช้งานและไม่สนใจการดำเนินการของผู้ใช้หรือไม่ ค่าเริ่มต้นคือ
|
altText
|
ข้อความสำรองที่ใช้สำหรับการเข้าถึง ตั้งค่าข้อความอธิบายที่ช่วยให้ผู้ใช้ทราบว่าชิปทำอะไรบ้าง เช่น หากชิปเปิดไฮเปอร์ลิงก์ ให้เขียนว่า "เปิดแท็บเบราว์เซอร์ใหม่และไปยังเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat ที่ https://developers.google.com/workspace/chat". |
CollapseControl
แสดงตัวควบคุมการขยายและยุบ
ใช้ได้กับแอปใน Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ "horizontalAlignment": enum ( |
ช่อง | |
---|---|
horizontalAlignment
|
การจัดแนวแนวนอนของปุ่มขยายและยุบ |
expandButton
|
ไม่บังคับ กำหนดปุ่มที่ปรับแต่งได้เพื่อขยายส่วนดังกล่าว ต้องตั้งค่าทั้งฟิลด์expandButton และ collapseButton มีเพียงชุดช่องเดียวจะไม่มีผล หากไม่ได้ตั้งค่าช่องนี้ ระบบจะใช้ปุ่มเริ่มต้น |
collapseButton
|
ไม่บังคับ กำหนดปุ่มที่ปรับแต่งได้เพื่อยุบส่วน ต้องตั้งค่าทั้งฟิลด์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 (
|
ช่อง | |
---|---|
actionLabel
|
ป้ายกำกับที่แสดงเป็นรายการในเมนูการทำงาน |
onClick
|
|
DisplayStyle
กำหนดวิธีแสดงการ์ดในส่วนเสริม Google Workspace
ใช้ได้กับส่วนเสริมของ Google Workspace แต่ใช้ไม่ได้กับแอป Google Chat
Enum | |
---|---|
DISPLAY_STYLE_UNSPECIFIED
|
โปรดอย่าใช้ ไม่ระบุ |
PEEK
|
ส่วนหัวของการ์ดจะปรากฏที่ด้านล่างของแถบด้านข้าง ซึ่งบางส่วนครอบคลุมการ์ดด้านบนในปัจจุบันของสแต็ก การคลิกที่ส่วนหัวจะแสดงการ์ดลงในกองการ์ด หากการ์ดไม่มีส่วนหัว ระบบจะใช้ส่วนหัวที่สร้างขึ้นแทน |
REPLACE
|
ค่าเริ่มต้น การ์ดจะแสดงโดยการแทนที่มุมมองของการ์ดบนสุดในกลุ่มการ์ด |