Cards v2

การ์ด

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

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

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

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

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

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

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

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

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

object (CardHeader)

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

sections[]

object (Section)

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

sectionDividerStyle

enum (DividerStyle)

สไตล์ตัวแบ่งระหว่างส่วนหัว ส่วนต่างๆ และส่วนท้าย

cardActions[]

object (CardAction)

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

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

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

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

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

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

displayStyle

enum (DisplayStyle)

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

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

peekCardHeader

object (CardHeader)

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

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

CardHeader

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

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

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

string

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

subtitle

string

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

imageType

enum (ImageType)

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

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

imageUrl

string

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

imageAltText

string

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

ImageType

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

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

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

ส่วน

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

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

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

string

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

widgets[]

object (Widget)

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

collapsible

boolean

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

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

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

uncollapsibleWidgetsCount

integer

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

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

collapseControl

object (CollapseControl)

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

วิดเจ็ต

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

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

การแสดง JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
ช่อง
horizontalAlignment

enum (HorizontalAlignment)

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

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

object (TextParagraph)

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

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

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

object (Image)

แสดงรูปภาพ

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

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

object (DecoratedText)

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

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

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

object (ButtonList)

รายการปุ่ม

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

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

object (TextInput)

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

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

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

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

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

object (SelectionInput)

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

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

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

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

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

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

object (Divider)

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

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

"divider": {
}
grid

object (Grid)

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

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

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

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

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object (Columns)

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

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

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

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

object (ChipList)

รายการชิป

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

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

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

TextParagraph

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

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

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

string

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

maxLines

integer

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

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

รูปภาพ

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

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

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

string

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

เช่น 

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

object (OnClick)

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

altText

string

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

OnClick

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

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

การแสดง JSON 
{

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

ฟิลด์สหภาพ data

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

action

object (Action)

หากระบุไว้ ระบบจะเรียกใช้การดำเนินการจาก onClick นี้

card

object (Card)

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

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

overflowMenu

object (OverflowMenu)

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

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

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

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

การแสดง JSON 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction),
  "requiredWidgets": [
    string
  ],
  "allWidgetsAreRequired": boolean
}
ช่อง
function

string

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

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

parameters[]

object (ActionParameter)

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

loadIndicator

enum (LoadIndicator)

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

persistValues

boolean

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

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

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

interaction

enum (Interaction)

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

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

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

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

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

requiredWidgets[]

string

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

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

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

allWidgetsAreRequired

boolean

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

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

ActionParameter

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

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

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

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

string

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

value

string

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

LoadIndicator

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

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

Enum
SPINNER แสดงภาพเคลื่อนไหวเพื่อบ่งบอกว่ากำลังโหลดเนื้อหา
NONE ไม่มีข้อมูลใดแสดง

การโต้ตอบ

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

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

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

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

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

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

Enum
INTERACTION_UNSPECIFIED ค่าเริ่มต้น action ทำงานตามปกติ
OPEN_DIALOG

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

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

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

OpenAs

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

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

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

OnClose

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

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

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

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

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

โหลดบัตรซ้ำหลังจากหน้าต่างของบุตรหลานปิดลง

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

OverflowMenu

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

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

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

object (OverflowMenuItem)

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

OverflowMenuItem

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

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

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

object (Icon)

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

text

string

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

onClick

object (OnClick)

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

disabled

boolean

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

Icon

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

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

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

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

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

string

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

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

imageType

enum (ImageType)

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

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

string

แสดงไอคอนในตัวรายการใดรายการหนึ่งจาก Google Workspace

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

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

iconUrl

string

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

เช่น 

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

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

materialIcon

object (MaterialIcon)

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

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

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

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

MaterialIcon

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

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

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

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

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

string

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

fill

boolean

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

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

weight

integer

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

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

grade

integer

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

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

DecoratedText

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

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

การแสดง JSON 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
ช่อง
icon
(deprecated)

object (Icon)

เลิกใช้งานแล้ว โปรดใช้ startIcon

startIcon

object (Icon)

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

topLabel

string

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

text

string

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

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

wrapText

boolean

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

มีผลกับ text เท่านั้น แต่ไม่มีผลกับ topLabel และ bottomLabel

bottomLabel

string

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

onClick

object (OnClick)

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

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

object (Button)

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

switchControl

object (SwitchControl)

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

endIcon

object (Icon)

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

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

ปุ่ม

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

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

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

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

string

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

icon

object (Icon)

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

color

object (Color)

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

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

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

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

ช่อง alpha จะใช้กับสีของปุ่มไม่ได้ ระบบจะไม่สนใจช่องนี้หากระบุ

onClick

object (OnClick)

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

disabled

boolean

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

altText

string

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

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

type

enum (Type)

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

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

สี

แสดงสีในพื้นที่สี 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

number

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

green

number

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

blue

number

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

alpha

number

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

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

หมายความว่าค่า 1.0 จะเท่ากับสีทึบ ในขณะที่ค่า 0.0 คือสีที่โปร่งใสทั้งหมด ซึ่งจะใช้ข้อความ Wrapper แทนสเกลาร์ประเภท 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 (Action)
  },
  "controlType": enum (ControlType)
}
ช่อง
name

string

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

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

value

string

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

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

selected

boolean

เมื่อ true แสดงอยู่ แสดงว่าสวิตช์ดังกล่าวเลือกอยู่

onChangeAction

object (Action)

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

controlType

enum (ControlType)

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

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

ControlType

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

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

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

ButtonList

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

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

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

object (Button)

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

TextInput

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

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

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

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

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

string

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

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

label

string

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

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

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

hintText

string

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

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

value

string

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

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

type

enum (Type)

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

onChangeAction

object (Action)

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

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

initialSuggestions

object (Suggestions)

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

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

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

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

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

autoCompleteAction

object (Action)

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

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

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

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

validation

object (Validation)

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

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

placeholderText

string

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

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

ประเภท

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

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

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

RenderActions

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

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

ช่อง
action

Action

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

ช่อง
navigations[]

Navigation

พุชหรืออัปเดตการ์ดที่แสดง

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

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

navigations: {
  pushCard: CARD
}

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

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

navigations: {
  updateCard: CARD
}

คำแนะนำ

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

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

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

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

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

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

object (SuggestionItem)

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

SuggestionItem

ค่าที่แนะนำ 1 รายการที่ผู้ใช้ป้อนในช่องป้อนข้อความได้

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

การแสดง JSON 
{

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

ฟิลด์สหภาพ content

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

text

string

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

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

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

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

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

integer

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

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

inputType

enum (InputType)

ระบุประเภทวิดเจ็ตการป้อนข้อมูล

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

InputType

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

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

SelectionInput

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

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

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

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

การแสดง JSON 
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,
  "validation": {
    object (Validation)
  },

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

string

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

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

label

string

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

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

type

enum (SelectionType)

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

items[]

object (SelectionItem)

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

onChangeAction

object (Action)

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

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

multiSelectMaxSelectedItems

integer

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

multiSelectMinQueryLength

integer

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

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

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

object (Validation)

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

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

ช่องการรวม multi_select_data_source สําหรับเมนูการเลือกหลายรายการ แหล่งข้อมูลที่เติมข้อมูลรายการที่เลือกแบบไดนามิก

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

externalDataSource

object (Action)

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

platformDataSource

object (PlatformDataSource)

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

SelectionType

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

อินพุตการเลือกแต่ละรายการรองรับการเลือก 1 ประเภท เช่น ระบบไม่รองรับการผสมช่องทําเครื่องหมายและสวิตช์

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

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

เมนูที่มีกล่องข้อความ ผู้ใช้สามารถพิมพ์และเลือกอย่างน้อย 1 รายการ

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

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

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

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

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

SelectionItem

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

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

การแสดง JSON 
{
  "text": string,
  "value": string,
  "selected": boolean,
  "startIconUri": string,
  "bottomText": string
}
ช่อง
text

string

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

value

string

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

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

selected

boolean

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

startIconUri

string

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

bottomText

string

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

PlatformDataSource

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

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

การแสดง JSON 
{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
ช่อง
ฟิลด์สหภาพ data_source แหล่งข้อมูล data_source อาจเป็นได้เพียงค่าใดค่าหนึ่งต่อไปนี้
commonDataSource

enum (CommonDataSource)

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

hostAppDataSource

object (HostAppDataSourceMarkup)

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

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

CommonDataSource

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

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

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

HostAppDataSourceMarkup

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

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

การแสดง JSON 
{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
ช่อง
ช่องการรวม data_source แอปพลิเคชัน Google Workspace ที่แสดงรายการสำหรับเมนูแบบเลือกหลายรายการ data_source ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
chatDataSource

object (ChatClientDataSourceMarkup)

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

ChatClientDataSourceMarkup

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

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

การแสดง JSON 
{

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

object (SpaceDataSource)

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

SpaceDataSource

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

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

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

boolean

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

DateTimePicker

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

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

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

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

string

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

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

label

string

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

type

enum (DateTimePickerType)

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

valueMsEpoch

string (int64 format)

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

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

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

integer

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

onChangeAction

object (Action)

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

validation

object (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

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

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

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

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

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
การแสดง JSON 
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
ช่อง
title

string

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

items[]

object (GridItem)

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

borderStyle

object (BorderStyle)

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

columnCount

integer

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

onClick

object (OnClick)

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

GridItem

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

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

การแสดง JSON 
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
ช่อง
id

string

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

image

object (ImageComponent)

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

title

string

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

subtitle

string

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

layout

enum (GridItemLayout)

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

ImageComponent

แสดงรูปภาพ

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

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

string

URL ของรูปภาพ

altText

string

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

cropStyle

object (ImageCropStyle)

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

borderStyle

object (BorderStyle)

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

ImageCropStyle

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

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

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

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

enum (ImageCropType)

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

aspectRatio

number

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

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

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

ImageCropType

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

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

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

BorderStyle

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

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

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

enum (BorderType)

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

strokeColor

object (Color)

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

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

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

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

ช่อง alpha ใช้กับสีเส้นโครงร่างไม่ได้ ระบบจะไม่สนใจช่องนี้หากระบุ

cornerRadius

integer

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

BorderType

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

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

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

GridItemLayout

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

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

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

คอลัมน์

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

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

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

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

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

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

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

object (Column)

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

คอลัมน์

คอลัมน์

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

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

enum (HorizontalSizeStyle)

ระบุขนาดของคอลัมน์แสดงเต็มความกว้างของการ์ด

horizontalAlignment

enum (HorizontalAlignment)

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

verticalAlignment

enum (VerticalAlignment)

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

widgets[]

object (Widgets)

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

HorizontalSizeStyle

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

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

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

HorizontalAlignment

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

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

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

VerticalAlignment

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

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

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

วิดเจ็ต

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

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

การแสดง JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
ช่อง

ฟิลด์สหภาพ data

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

textParagraph

object (TextParagraph)

TextParagraph วิดเจ็ต

image

object (Image)

Image วิดเจ็ต

decoratedText

object (DecoratedText)

วิดเจ็ต DecoratedText

buttonList

object (ButtonList)

ButtonList วิดเจ็ต

textInput

object (TextInput)

วิดเจ็ต TextInput

selectionInput

object (SelectionInput)

SelectionInput วิดเจ็ต

dateTimePicker

object (DateTimePicker)

วิดเจ็ต DateTimePicker

chipList

object (ChipList)

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

ChipList

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

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

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

enum (Layout)

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

chips[]

object (Chip)

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

เลย์เอาต์

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

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

ชิป

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

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

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

object (Icon)

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

label

string

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

onClick

object (OnClick)

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

enabled
(deprecated)

boolean

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

disabled

boolean

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

altText

string

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

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

CollapseControl

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

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

enum (HorizontalAlignment)

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

expandButton

object (Button)

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

collapseButton

object (Button)

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

DividerStyle

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

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

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

CardAction

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

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

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

string

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

onClick

object (OnClick)

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

CardFixedFooter

ส่วนท้ายแบบถาวร (ติดหนึบ) ซึ่งปรากฏที่ด้านล่างของการ์ด

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

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

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

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

object (Button)

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

secondaryButton

object (Button)

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

DisplayStyle

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

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

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