การ์ด
อินเทอร์เฟซของการ์ดที่แสดงในข้อความ 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[]
|
การดำเนินการของการ์ด ระบบจะเพิ่มการดำเนินการลงในเมนูแถบเครื่องมือของการ์ด ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้
ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างเมนูการทำงานของการ์ดที่มีตัวเลือก
|
name
|
ชื่อบัตร ใช้เป็นตัวระบุการ์ดในการนำทางการ์ด ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
fixedFooter
|
ส่วนท้ายแบบคงที่ซึ่งแสดงที่ด้านล่างของการ์ดนี้
การตั้งค่า ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
displayStyle
|
ในส่วนเสริมของ Google Workspace ให้ตั้งค่าพร็อพเพอร์ตี้การแสดงผลของ ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
peekCardHeader
|
เมื่อแสดงเนื้อหาตามบริบท ส่วนหัวของการ์ด Peek จะทําหน้าที่เป็นตัวยึดตำแหน่งเพื่อให้ผู้ใช้ไปยังหน้าต่างๆ ระหว่างการ์ดในหน้าแรกและการ์ดบริบทได้ ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
CardHeader
แสดงส่วนหัวของการ์ด ดูตัวอย่างในแอป Google Chat ได้ที่เพิ่มส่วนหัว
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"title": string,
"subtitle": string,
"imageType": enum (
|
ช่อง | |
---|---|
title
|
ต้องระบุ ชื่อของส่วนหัวของการ์ด ส่วนหัวมีความสูงคงที่ หากมีการระบุทั้งชื่อและชื่อรองไว้ ส่วนหัวแต่ละรายการจะใช้ 1 บรรทัด หากระบุเฉพาะชื่อไว้ ระบบจะใช้ทั้ง 2 บรรทัด |
subtitle
|
ชื่อรองของส่วนหัวของการ์ด หากระบุ จะแสดงในบรรทัดของตัวเองใต้ |
imageType
|
รูปร่างที่ใช้ครอบตัดรูปภาพ ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
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
|
จำนวนวิดเจ็ตที่ไม่สามารถยุบได้ซึ่งจะยังมองเห็นได้อยู่แม้ว่าจะยุบส่วนหนึ่งๆ อยู่ก็ตาม
ตัวอย่างเช่น เมื่อส่วนมีวิดเจ็ต 5 รายการและตั้งค่า |
วิดเจ็ต
การ์ดแต่ละใบจะประกอบไปด้วยวิดเจ็ต
วิดเจ็ตเป็นออบเจ็กต์ผสมที่สามารถแสดงถึงข้อความ รูปภาพ ปุ่ม และออบเจ็กต์ประเภทอื่นๆ
การแสดง JSON |
---|
{ "horizontalAlignment": enum ( |
ช่อง | |
---|---|
horizontalAlignment
|
ระบุว่าวิดเจ็ตจะจัดแนวชิดซ้าย ขวา หรือกึ่งกลางของคอลัมน์ |
ช่องการรวม data วิดเจ็ตจะมีรายการต่อไปนี้ได้เพียง 1 รายการเท่านั้น คุณสามารถใช้ช่องวิดเจ็ตหลายช่องเพื่อแสดงรายการเพิ่มเติมได้
data
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้เท่านั้น
|
|
textParagraph
|
แสดงย่อหน้าข้อความ รองรับข้อความที่จัดรูปแบบ HTML แบบง่าย โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace เช่น JSON ต่อไปนี้จะสร้างข้อความตัวหนา
|
image
|
แสดงรูปภาพ ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างรูปภาพที่มีข้อความแสดงแทน
|
decoratedText
|
แสดงรายการข้อความที่มีการตกแต่ง ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างวิดเจ็ตข้อความที่ตกแต่งอย่างสวยงามซึ่งแสดงอีเมล
|
buttonList
|
รายการปุ่ม เช่น JSON ต่อไปนี้จะสร้างปุ่ม 2 ปุ่ม ปุ่มแรกคือปุ่มข้อความสีน้ำเงิน ปุ่มที่สองเป็นปุ่มรูปภาพที่จะเปิดลิงก์ ดังนี้
|
textInput
|
แสดงกล่องข้อความที่ผู้ใช้พิมพ์ลงไปได้ ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างการป้อนข้อความสำหรับอีเมล
อีกตัวอย่างหนึ่งคือ JSON ต่อไปนี้จะสร้างอินพุตข้อความสำหรับภาษาโปรแกรมที่มีคำแนะนำแบบคงที่
|
selectionInput
|
แสดงตัวควบคุมการเลือกที่ให้ผู้ใช้เลือกรายการได้ ตัวควบคุมการเลือกอาจเป็นช่องทำเครื่องหมาย ปุ่มตัวเลือก สวิตช์ หรือเมนูแบบเลื่อนลงก็ได้ ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างเมนูแบบเลื่อนลงที่ให้ผู้ใช้เลือกขนาดได้
|
dateTimePicker
|
แสดงวิดเจ็ตที่ให้ผู้ใช้ป้อนวันที่ เวลา หรือวันที่และเวลาได้ ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างเครื่องมือเลือกวันที่และเวลาเพื่อกำหนดเวลาการนัดหมาย
|
divider
|
แสดงเส้นแบ่งแนวนอนระหว่างวิดเจ็ต ตัวอย่างเช่น JSON ต่อไปนี้จะสร้างตัวแบ่ง
|
grid
|
แสดงตารางกริดที่มีคอลเล็กชันรายการ ตารางกริดรองรับคอลัมน์และรายการกี่รายการก็ได้ จำนวนแถวจะกำหนดโดยขอบเขตบนของจำนวนรายการหารด้วยจำนวนคอลัมน์ ตารางกริดที่มี 10 รายการและ 2 คอลัมน์จะมี 5 แถว ตารางกริดที่มี 11 รายการและ 2 คอลัมน์จะมี 6 แถว ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace เช่น JSON ต่อไปนี้จะสร้างตารางกริดแบบ 2 คอลัมน์ที่มีรายการเดียว
|
columns
|
แสดงได้สูงสุด 2 คอลัมน์
หากต้องการรวมมากกว่า 2 คอลัมน์หรือใช้แถว ให้ใช้วิดเจ็ต เช่น JSON ต่อไปนี้จะสร้างคอลัมน์ 2 คอลัมน์โดยที่แต่ละคอลัมน์มีย่อหน้าข้อความ
|
TextParagraph
ย่อหน้าของข้อความที่รองรับการจัดรูปแบบ ดูตัวอย่างในแอป Google Chat ได้ที่เพิ่มย่อหน้าของข้อความที่จัดรูปแบบ โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "text": string } |
ช่อง | |
---|---|
text
|
ข้อความที่แสดงในวิดเจ็ต |
รูปภาพ
รูปภาพที่ระบุโดย URL และมีการดำเนินการ onClick
ได้ ดูตัวอย่างได้ที่เพิ่มรูปภาพ
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"imageUrl": string,
"onClick": {
object (
|
ช่อง | |
---|---|
imageUrl
|
HTTPS URL ที่โฮสต์รูปภาพ เช่น
|
onClick
|
เมื่อผู้ใช้คลิกรูปภาพ การคลิกจะทริกเกอร์การดำเนินการนี้ |
altText
|
ข้อความสำรองของรูปภาพนี้ที่ใช้สำหรับการเข้าถึง |
OnClick
แสดงวิธีการตอบสนองเมื่อผู้ใช้คลิกองค์ประกอบแบบอินเทอร์แอกทีฟในการ์ด เช่น ปุ่ม
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ช่องการรวม
|
|
action
|
หากระบุไว้ |
openLink
|
หากระบุไว้ |
openDynamicLinkAction
|
ส่วนเสริมจะทริกเกอร์การดำเนินการนี้เมื่อการดำเนินการจำเป็นต้องเปิดลิงก์ ซึ่งแตกต่างจาก ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
card
|
การ์ดใหม่จะพุชไปยังชุดการ์ดหลังจากคลิกแล้ว (หากระบุไว้) ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
การดำเนินการ
การดำเนินการที่อธิบายลักษณะการทำงานเมื่อมีการส่งแบบฟอร์ม ตัวอย่างเช่น คุณสามารถเรียกใช้สคริปต์ Apps Script เพื่อจัดการกับแบบฟอร์ม หากระบบทริกเกอร์การดำเนินการ ระบบจะส่งค่าของแบบฟอร์มไปยังเซิร์ฟเวอร์
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "function": string, "parameters": [ { object ( |
ช่อง | |
---|---|
function
|
ฟังก์ชันที่กำหนดเองซึ่งเรียกใช้เมื่อมีการคลิกหรือเปิดใช้งานองค์ประกอบที่มี ตัวอย่างการใช้งานได้ที่อ่านข้อมูลแบบฟอร์ม |
parameters[]
|
รายการพารามิเตอร์การดำเนินการ |
loadIndicator
|
ระบุสัญญาณบอกสถานะการโหลดที่การดำเนินการจะแสดงขณะเรียกการดำเนินการ |
persistValues
|
ระบุว่าค่าของแบบฟอร์มจะยังคงอยู่หลังจากการดำเนินการหรือไม่ ค่าเริ่มต้นคือ
หากเป็น
หากเป็น |
interaction
|
ไม่บังคับ ต้องระบุเมื่อเปิดกล่องโต้ตอบ สิ่งที่ควรทำเพื่อตอบสนองการโต้ตอบกับผู้ใช้ เช่น ผู้ใช้คลิกปุ่มในข้อความของการ์ด
หากไม่ระบุ แอปจะตอบสนองด้วยการเรียกใช้
เมื่อระบุ ใช้ได้กับแอป Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้ |
requiredWidgets[]
|
ไม่บังคับ กรอกชื่อวิดเจ็ตที่การดำเนินการนี้ต้องการสำหรับการส่งที่ถูกต้องในรายการนี้
หากวิดเจ็ตที่แสดงที่นี่ไม่มีค่าเมื่อมีการเรียกใช้การดำเนินการนี้ ระบบจะล้มเลิกการส่งแบบฟอร์ม ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
allWidgetsAreRequired
|
ไม่บังคับ ถ้าเป็นจริง จะถือว่าวิดเจ็ตทั้งหมดเป็นสิ่งจำเป็นในการดำเนินการนี้
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
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 เพื่อตอบสนองต่อการคลิกปุ่มบนข้อความการ์ดเท่านั้น หากระบุไว้สำหรับส่วนเสริม การ์ดทั้งหมดจะถูกนำออกและจะไม่แสดงในไคลเอ็นต์ ใช้ได้กับแอป Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้ |
OpenLink
แสดงเหตุการณ์ onClick
ที่เปิดไฮเปอร์ลิงก์
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "url": string, "openAs": enum ( |
ช่อง | |
---|---|
url
|
URL ที่จะเปิด |
openAs
|
วิธีเปิดลิงก์ ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
onClose
|
ไม่ว่าลูกค้าจะลืมลิงก์ใดๆ หลังจากเปิดลิงก์แล้ว หรือเฝ้าสังเกตลิงก์จนกว่าหน้าต่างจะปิดลง ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
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
|
โหลดการ์ดซ้ำหลังจากหน้าต่างย่อยปิดลง
หากใช้ร่วมกับ |
DecoratedText
วิดเจ็ตที่แสดงข้อความพร้อมการตกแต่งเพิ่มเติม เช่น ป้ายกำกับด้านบนหรือด้านล่างข้อความ ไอคอนด้านหน้าข้อความ วิดเจ็ตการเลือก หรือปุ่มที่อยู่หลังข้อความ ดูตัวอย่างในแอป Google Chat ได้ที่แสดงข้อความที่มีการตกแต่ง
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "icon": { object ( |
ช่อง | |
---|---|
icon
|
เลิกใช้งานเพื่อใช้
|
startIcon
|
ไอคอนที่แสดงด้านหน้าข้อความ |
topLabel
|
ข้อความที่ปรากฏด้านบน |
text
|
ต้องระบุ ข้อความหลัก สนับสนุนการจัดรูปแบบที่เรียบง่าย โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบข้อความที่หัวข้อการจัดรูปแบบข้อความในแอป Google Chat และการจัดรูปแบบข้อความในส่วนเสริมของ Google Workspace |
wrapText
|
การตั้งค่าการตัดข้อความขึ้นบรรทัดใหม่ หากเป็น
โดยจะมีผลกับ |
bottomLabel
|
ข้อความที่ปรากฏด้านล่าง |
onClick
|
ระบบจะทริกเกอร์การดำเนินการนี้เมื่อผู้ใช้คลิก |
ช่องการรวม control ปุ่ม สวิตช์ ช่องทำเครื่องหมาย หรือรูปภาพที่ปรากฏทางด้านขวาของข้อความในวิดเจ็ต decoratedText
control
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้เท่านั้น
|
|
button
|
ปุ่มที่ผู้ใช้สามารถคลิกเพื่อทริกเกอร์การทำงานได้ |
switchControl
|
วิดเจ็ตสวิตช์ที่ผู้ใช้สามารถคลิกเพื่อเปลี่ยนสถานะและทริกเกอร์การดำเนินการได้ |
endIcon
|
ไอคอนที่แสดงหลังข้อความ |
Icon
ไอคอนที่แสดงในวิดเจ็ตบนการ์ด ดูตัวอย่างของแอป Google Chat ได้ที่เพิ่มไอคอน
รองรับไอคอนในตัวและไอคอนกำหนดเอง
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "altText": string, "imageType": enum ( |
ช่อง | |
---|---|
altText
|
ไม่บังคับ คำอธิบายของไอคอนที่ใช้สำหรับการเข้าถึง หากไม่ระบุ ระบบจะใช้ค่าเริ่มต้น
หากตั้งค่าไอคอนไว้ใน |
imageType
|
รูปแบบการครอบตัดที่ใช้กับรูปภาพ ในบางกรณี การใช้การครอบตัด |
ช่องการรวม icons ไอคอนที่แสดงในวิดเจ็ตบนการ์ด
icons
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้เท่านั้น
|
|
knownIcon
|
แสดงไอคอนในตัวของ Google Workspace
เช่น หากต้องการแสดงไอคอนรูปเครื่องบิน ให้ระบุ ดูรายการไอคอนทั้งหมดที่รองรับได้ที่ไอคอนในตัว |
iconUrl
|
แสดงไอคอนที่กำหนดเองซึ่งใช้โฮสต์ที่ HTTPS URL เช่น
ประเภทไฟล์ที่รองรับ ได้แก่ |
materialIcon
|
แสดงไอคอน Material ของ Google อันใดอันหนึ่ง เช่น หากต้องการแสดงไอคอนช่องทำเครื่องหมาย ให้ใช้
ใช้ได้กับแอป 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
|
ชื่อไอคอนที่กำหนดไว้ในไอคอน Material ของ Google เช่น |
fill
|
ระบุว่าไอคอนแสดงผลเป็นแบบเติมสีหรือไม่ ค่าเริ่มต้นคือ false หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ให้ไปที่ไอคอน Google Font แล้วปรับการตั้งค่าในส่วนปรับแต่ง |
weight
|
น้ำหนักของเส้นของไอคอน โดยเลือกจาก {100, 200, 300, 400, 500, 600, 700} หากไม่มี ค่าเริ่มต้นคือ 400 หากระบุค่าอื่น ระบบจะใช้ค่าเริ่มต้น หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ให้ไปที่ไอคอน Google Font แล้วปรับการตั้งค่าในส่วนปรับแต่ง |
grade
|
น้ำหนักและคะแนนมีผลต่อความหนาของสัญลักษณ์ การปรับคะแนนจะละเอียดกว่าการปรับน้ำหนัก และมีผลกระทบเล็กน้อยต่อขนาดของสัญลักษณ์ เลือกจาก {-25, 0, 200} หากไม่มี ค่าเริ่มต้นคือ 0 หากระบุค่าอื่น ระบบจะใช้ค่าเริ่มต้น หากต้องการดูตัวอย่างการตั้งค่าไอคอนต่างๆ ให้ไปที่ไอคอน Google Font แล้วปรับการตั้งค่าในส่วนปรับแต่ง |
ปุ่ม
ข้อความ ไอคอน หรือข้อความและปุ่มไอคอนที่ผู้ใช้คลิกได้ ดูตัวอย่างของแอป Google Chat ได้ที่เพิ่มปุ่ม
หากต้องการทำให้รูปภาพเป็นปุ่มที่คลิกได้ ให้ระบุ
(ไม่ใช่ Image
) และตั้งค่าการทำงาน
ImageComponent
onClick
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{ "text": string, "icon": { object ( |
ช่อง | |
---|---|
text
|
ข้อความที่แสดงภายในปุ่ม |
icon
|
รูปภาพไอคอน หากตั้งค่าทั้ง |
color
|
หากตั้งค่าไว้ ปุ่มจะมีสีพื้นหลังแบบทึบและสีแบบอักษรจะเปลี่ยนไปเพื่อรักษาคอนทราสต์กับสีพื้นหลัง เช่น การตั้งค่าพื้นหลังสีน้ำเงินอาจทำให้ข้อความเป็นสีขาว หากไม่ได้ตั้งค่า พื้นหลังรูปภาพจะเป็นสีขาวและแบบอักษรจะเป็นสีน้ำเงิน
สำหรับสีแดง เขียว และน้ำเงิน ค่าของแต่ละช่องเป็นตัวเลข
เลือกตั้งค่า
สำหรับ ตัวอย่างเช่น สีต่อไปนี้แทนสีแดงโปร่งแสงครึ่งหนึ่ง
|
onClick
|
ต้องระบุ การดำเนินการที่จะเกิดขึ้นเมื่อผู้ใช้คลิกปุ่ม เช่น การเปิดไฮเปอร์ลิงก์หรือเรียกใช้ฟังก์ชันที่กำหนดเอง |
disabled
|
หากเป็น |
altText
|
ข้อความสำรองที่ใช้สำหรับการเข้าถึง กำหนดข้อความอธิบายที่ช่วยให้ผู้ใช้ทราบว่าปุ่มใช้ทำอะไร เช่น หากปุ่มเปิดไฮเปอร์ลิงก์ คุณอาจเขียนว่า "เปิดแท็บเบราว์เซอร์ใหม่และไปยังเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat ที่ https://developers.google.com/workspace/chat" |
สี
แสดงสีในพื้นที่สี RGBA การนำเสนอนี้ออกแบบมาเพื่อความเรียบง่ายในการแปลงค่าเป็นและเปลี่ยนจากการแสดงสีในภาษาต่างๆ มากกว่าความกะทัดรัด เช่น อาจระบุช่องของการนำเสนอนี้ให้กับตัวสร้างของ java.awt.Color
ใน Java ได้เล็กน้อย และยังระบุได้ในเมธอด +colorWithRed:green:blue:alpha
ของ UIColor ใน 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 แทนที่จะเป็นสเกลาร์ลอยตัวแบบง่ายเพื่อให้แยกความแตกต่างระหว่างค่าเริ่มต้นกับค่าที่ไม่ได้ตั้งค่าได้ หากไม่ระบุ วัตถุสีนี้จะแสดงเป็นสีทึบ (เสมือนว่าค่าอัลฟ่าได้รับการระบุอย่างชัดเจนว่าเป็น 1.0) |
SwitchControl
สวิตช์รูปแบบสลับหรือช่องทำเครื่องหมายภายในวิดเจ็ต decoratedText
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
รองรับเฉพาะในวิดเจ็ต decoratedText
การแสดง JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
ช่อง | |
---|---|
name
|
ชื่อที่ใช้ระบุวิดเจ็ตสวิตช์ในเหตุการณ์การป้อนข้อมูลแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม |
value
|
ค่าที่ผู้ใช้ป้อนซึ่งแสดงเป็นส่วนหนึ่งของเหตุการณ์การป้อนข้อมูลแบบฟอร์ม โปรดดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม |
selected
|
เมื่อ |
onChangeAction
|
การดำเนินการที่จะทำเมื่อมีการเปลี่ยนแปลงสถานะการสลับ เช่น ฟังก์ชันใดที่จะเรียกใช้ |
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 (
|
ช่อง | |
---|---|
buttons[]
|
อาร์เรย์ของปุ่ม |
TextInput
ช่องที่ผู้ใช้ป้อนข้อความได้ รองรับคำแนะนำและการดำเนินการเมื่อมีการเปลี่ยนแปลง ดูตัวอย่างในแอป Google Chat ได้ที่เพิ่มช่องที่ผู้ใช้ป้อนข้อความได้
แอป 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 ผู้ใช้บางรายอาจป้อน
เมื่อระบุ ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
autoCompleteAction
|
ไม่บังคับ ระบุการดำเนินการที่จะทำเมื่อช่องป้อนข้อความแสดงคำแนะนำสำหรับผู้ใช้ที่โต้ตอบกับช่อง
หากไม่ระบุ คำแนะนำจะตั้งโดย หากระบุไว้ แอปจะดำเนินการตามที่ระบุไว้ที่นี่ เช่น เรียกใช้ฟังก์ชันที่กำหนดเอง ใช้ได้กับส่วนเสริมของ Google Workspace และใช้กับแอป Google Chat ไม่ได้ |
validation
|
ระบุการตรวจสอบที่จำเป็นสำหรับช่องป้อนข้อความนี้
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
placeholderText
|
ข้อความที่ปรากฏในช่องป้อนข้อความเมื่อช่องดังกล่าวว่างเปล่า ใช้ข้อความนี้เพื่อแจ้งให้ผู้ใช้ป้อนค่า เช่น ใช้ได้กับแอป 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 |
การดำเนินการ
ช่อง | |
---|---|
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 |
ช่อง | |
---|---|
ช่องการรวม
|
|
text
|
ค่าของอินพุตที่แนะนำในช่องป้อนข้อความ ซึ่งเทียบเท่ากับสิ่งที่ผู้ใช้ป้อนเอง |
การตรวจสอบความถูกต้อง
แสดงข้อมูลที่จำเป็นสำหรับการตรวจสอบความถูกต้องของวิดเจ็ตที่แนบมา
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
การแสดง JSON |
---|
{
"characterLimit": integer,
"inputType": enum (
|
ช่อง | |
---|---|
characterLimit
|
ระบุจำนวนอักขระสูงสุดสำหรับวิดเจ็ตการป้อนข้อความ โปรดทราบว่าการตั้งค่านี้ใช้สำหรับการป้อนข้อความเท่านั้นและจะไม่มีผลในวิดเจ็ตอื่นๆ
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
inputType
|
ระบุประเภทของวิดเจ็ตอินพุต
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
InputType
ประเภทของวิดเจ็ตอินพุต
Enum | |
---|---|
INPUT_TYPE_UNSPECIFIED
|
ไม่ระบุประเภท โปรดอย่าใช้ |
TEXT
|
ข้อความปกติที่ยอมรับอักขระทุกตัว |
INTEGER
|
ค่าจำนวนเต็ม |
FLOAT
|
ค่าทศนิยม |
EMAIL
|
อีเมล |
EMOJI_PICKER
|
อีโมจิที่เลือกจากเครื่องมือเลือกอีโมจิที่ระบบมีให้ |
SelectionInput
วิดเจ็ตที่สร้างรายการ UI อย่างน้อย 1 รายการที่ผู้ใช้เลือกได้ เช่น เมนูแบบเลื่อนลงหรือช่องทำเครื่องหมาย คุณสามารถใช้วิดเจ็ตนี้เพื่อรวบรวมข้อมูลที่สามารถคาดการณ์หรือแจกแจงได้ ดูตัวอย่างในแอป Google Chat ได้ที่เพิ่มองค์ประกอบ UI ที่เลือกได้
แอป Chat จะประมวลผลค่าของรายการที่ผู้ใช้เลือกหรือป้อนได้ โปรดดูรายละเอียดเกี่ยวกับการทำงานกับอินพุตแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม
หากต้องการรวบรวมข้อมูลที่ไม่ได้กำหนดหรือนามธรรมจากผู้ใช้ ให้ใช้วิดเจ็ต 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
|
การตรวจสอบความถูกต้องของช่องป้อนข้อมูลการเลือกนี้สำหรับเมนูแบบเลื่อนลง
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
ช่องการรวม
ใช้ได้กับแอป Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
|
|
externalDataSource
|
แหล่งข้อมูลภายนอก เช่น ฐานข้อมูลเชิงสัมพันธ์ |
platformDataSource
|
แหล่งข้อมูลจาก Google Workspace |
SelectionType
รูปแบบของรายการที่ผู้ใช้เลือกได้ ตัวเลือกต่างๆ รองรับการโต้ตอบประเภทต่างๆ ตัวอย่างเช่น ผู้ใช้สามารถเลือกช่องทำเครื่องหมายได้หลายช่อง แต่สามารถเลือกได้เพียง 1 รายการจากเมนูแบบเลื่อนลง
อินพุตการเลือกแต่ละรายการรองรับการเลือกประเภทเดียว เช่น ไม่รองรับการรวมช่องทำเครื่องหมายและสวิตช์
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace
Enum | |
---|---|
CHECK_BOX
|
ชุดช่องทำเครื่องหมาย ผู้ใช้เลือกช่องทำเครื่องหมายได้อย่างน้อย 1 ช่อง |
RADIO_BUTTON
|
ชุดปุ่มตัวเลือก ผู้ใช้เลือกปุ่มตัวเลือกได้ 1 ปุ่ม |
SWITCH
|
ชุดสวิตช์ ผู้ใช้เปิดสวิตช์ได้อย่างน้อย 1 รายการ |
DROPDOWN
|
เมนูแบบเลื่อนลง ผู้ใช้เลือกได้ 1 รายการจากเมนู |
MULTI_SELECT
|
เมนูการเลือกหลายรายการสำหรับข้อมูลแบบคงที่หรือแบบไดนามิก ผู้ใช้จะเลือกอย่างน้อย 1 รายการจากแถบเมนู ผู้ใช้ยังป้อนค่าเพื่อป้อนข้อมูลแบบไดนามิกได้ด้วย ตัวอย่างเช่น ผู้ใช้จะเริ่มพิมพ์ชื่อพื้นที่ใน Google Chat แล้ววิดเจ็ตจะแนะนำพื้นที่ทำงานนั้นโดยอัตโนมัติ หากต้องการป้อนรายการสำหรับเมนูการเลือกหลายรายการ คุณสามารถใช้แหล่งข้อมูลประเภทใดประเภทหนึ่งต่อไปนี้
ดูตัวอย่างวิธีใช้เมนูแบบเลือกหลายรายการได้ที่เพิ่มเมนูแบบเลือกหลายรายการ ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace การเลือกหลายรายการสําหรับส่วนเสริมของ Google Workspace อยู่ในเวอร์ชันตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์ |
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 |
ช่อง | |
---|---|
ช่องการรวม data_source แหล่งข้อมูล
data_source
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้เท่านั้น
|
|
commonDataSource
|
แหล่งข้อมูลที่แชร์โดยแอปพลิเคชัน Google Workspace ทั้งหมด เช่น ผู้ใช้ในองค์กร Google Workspace |
hostAppDataSource
|
แหล่งข้อมูลเฉพาะสำหรับแอปพลิเคชันโฮสต์ของ Google Workspace เช่น พื้นที่ใน Google Chat |
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 |
ช่อง | |
---|---|
ช่องการรวม data_source แอปพลิเคชัน Google Workspace ที่เติมข้อมูลรายการสำหรับเมนูแบบเลือกหลายรายการ
data_source
ต้องเป็นอย่างใดอย่างหนึ่งต่อไปนี้เท่านั้น
|
|
chatDataSource
|
แหล่งข้อมูลจาก Google Chat |
ChatClientDataSourceMarkup
สำหรับวิดเจ็ต
ที่ใช้เมนูแบบเลือกหลายรายการ ซึ่งเป็นแหล่งข้อมูลจาก Google Chat แหล่งข้อมูลจะเติมข้อมูลรายการที่เลือกสำหรับเมนูการเลือกหลายรายการ ตัวอย่างเช่น ผู้ใช้จะเลือกพื้นที่ใน Google Chat ที่ตนเป็นสมาชิกได้
SelectionInput
ใช้ได้กับแอป Google Chat และใช้กับส่วนเสริมของ Google Workspace ไม่ได้
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ช่องการรวม 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 Time
ระบุค่าตามประเภทของเครื่องมือเลือก (
|
timezoneOffsetDate
|
ตัวเลขที่แสดงค่าชดเชยเขตเวลาจาก UTC ในหน่วยนาที หากตั้งค่าไว้ |
onChangeAction
|
ทริกเกอร์เมื่อผู้ใช้คลิกบันทึกหรือล้างจากอินเทอร์เฟซ |
validation
|
ไม่บังคับ ระบุการตรวจสอบที่จำเป็นสำหรับเครื่องมือเลือกวันที่และเวลานี้
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace |
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
|
โค้ดเรียกกลับนี้จะนำรายการแบบตารางกริดแต่ละรายการกลับมาใช้ใหม่ แต่ใช้ตัวระบุและดัชนีของรายการที่ถูกเพิ่มลงในพารามิเตอร์ของโค้ดเรียกกลับ |
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 ได้ที่แสดงการ์ดและกล่องโต้ตอบในคอลัมน์
ความสูงของแต่ละคอลัมน์จะกำหนดโดยคอลัมน์แบบสูงขึ้น ตัวอย่างเช่น หากคอลัมน์แรกสูงกว่าคอลัมน์ที่ 2 ทั้ง 2 คอลัมน์จะมีความสูงของคอลัมน์แรก เนื่องจากแต่ละคอลัมน์มีจำนวนวิดเจ็ตไม่เท่ากัน คุณจึงกำหนดแถวหรือจัดเรียงวิดเจ็ตระหว่างคอลัมน์ไม่ได้
คอลัมน์ต่างๆ จะแสดงคู่กัน คุณปรับแต่งความกว้างของแต่ละคอลัมน์ได้โดยใช้ช่อง HorizontalSizeStyle
หากความกว้างหน้าจอของผู้ใช้แคบเกินไป คอลัมน์ที่ 2 จะอยู่ด้านล่างของคอลัมน์แรก ดังนี้
- บนเว็บ คอลัมน์ที่ 2 จะตัดข้อความหากมีความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 480 พิกเซล
- ในอุปกรณ์ iOS คอลัมน์ที่ 2 จะตัดคอลัมน์ที่ 2 หากความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 300 พอยต์
- ในอุปกรณ์ Android คอลัมน์ที่ 2 จะตัดคอลัมน์ที่ 2 หากความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 320 dp
หากต้องการรวมมากกว่า 2 คอลัมน์หรือใช้แถว ให้ใช้วิดเจ็ต Grid
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace คอลัมน์สําหรับส่วนเสริม Google Workspace จะอยู่ในเวอร์ชันตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์
การแสดง JSON |
---|
{
"columnItems": [
{
object (
|
ช่อง | |
---|---|
columnItems[]
|
อาร์เรย์ของคอลัมน์ คุณเพิ่มได้สูงสุด 2 คอลัมน์ในการ์ดหรือกล่องโต้ตอบ |
คอลัมน์
คอลัมน์
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace คอลัมน์สําหรับส่วนเสริม Google Workspace จะอยู่ในเวอร์ชันตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์
การแสดง JSON |
---|
{ "horizontalSizeStyle": enum ( |
ช่อง | |
---|---|
horizontalSizeStyle
|
ระบุวิธีที่คอลัมน์เติมความกว้างของการ์ด |
horizontalAlignment
|
ระบุว่าวิดเจ็ตจะจัดแนวชิดซ้าย ขวา หรือกึ่งกลางของคอลัมน์ |
verticalAlignment
|
ระบุว่าวิดเจ็ตจะจัดแนวชิดด้านบน ด้านล่าง หรือตรงกลางของคอลัมน์ |
widgets[]
|
อาร์เรย์ของวิดเจ็ตที่รวมอยู่ในคอลัมน์ วิดเจ็ตจะปรากฏตามลำดับที่ระบุไว้ |
HorizontalSizeStyle
ระบุวิธีที่คอลัมน์เติมความกว้างของการ์ด ความกว้างของแต่ละคอลัมน์ขึ้นอยู่กับทั้ง HorizontalSizeStyle
และความกว้างของวิดเจ็ตภายในคอลัมน์
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace คอลัมน์สําหรับส่วนเสริม Google Workspace จะอยู่ในเวอร์ชันตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์
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 Chat และส่วนเสริมของ Google Workspace คอลัมน์สําหรับส่วนเสริม Google Workspace จะอยู่ในเวอร์ชันตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์
Enum | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
โปรดอย่าใช้ ไม่ระบุ |
CENTER
|
ค่าเริ่มต้น จัดวิดเจ็ตไว้ตรงกลางคอลัมน์ |
TOP
|
จัดวิดเจ็ตไว้ที่ด้านบนของคอลัมน์ |
BOTTOM
|
จัดวิดเจ็ตให้อยู่ที่ด้านล่างของคอลัมน์ |
วิดเจ็ต
วิดเจ็ตที่สนับสนุนที่คุณสามารถรวมไว้ในคอลัมน์ได้
ใช้ได้กับแอป Google Chat และส่วนเสริมของ Google Workspace คอลัมน์สําหรับส่วนเสริม Google Workspace จะอยู่ในเวอร์ชันตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์
การแสดง JSON |
---|
{ // Union field |
ช่อง | |
---|---|
ช่องการรวม
|
|
textParagraph
|
วิดเจ็ต |
image
|
วิดเจ็ต |
decoratedText
|
วิดเจ็ต |
buttonList
|
วิดเจ็ต |
textInput
|
วิดเจ็ต |
selectionInput
|
วิดเจ็ต |
dateTimePicker
|
วิดเจ็ต |
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
|
ค่าเริ่มต้น การ์ดจะแสดงโดยแทนที่มุมมองของการ์ดบนสุดในกลุ่มการ์ด |