Package google.apps.card.v1

ดัชนี

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

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

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

ช่อง
function

string

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

เช่น การใช้งานที่หัวข้ออ่านข้อมูลในแบบฟอร์ม
parameters[]

ActionParameter

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

LoadIndicator

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

bool

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

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

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

Interaction

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

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

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

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

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

string

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

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

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

bool

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

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

ActionParameter

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

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

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

ช่อง
key

string

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

string

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

การโต้ตอบ

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

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

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

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

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

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

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

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

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

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

LoadIndicator

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

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

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

BorderStyle

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

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

ช่อง
type

BorderType

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

Color

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

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

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

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

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

int32

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

BorderType

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

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

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

ปุ่ม

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

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

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

ช่อง
text

string

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

Icon

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

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 ไม่พร้อมใช้งานสำหรับสีปุ่ม ระบบจะไม่สนใจช่องนี้หากระบุ
on_click

OnClick

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

bool

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

string

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

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

Type

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

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

ประเภท

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

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

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

ButtonList

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

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

ช่อง
buttons[]

Button

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

การ์ด

อินเทอร์เฟซของการ์ดที่แสดงในข้อความ 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"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
ช่อง
header

CardHeader

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

Section

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

DividerStyle

รูปแบบตัวแบ่งระหว่างส่วนหัว ส่วน และส่วนท้าย
card_actions[]

CardAction

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

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

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

"card_actions": [
  {
    "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
display_style

DisplayStyle

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

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

CardHeader

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

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

CardAction

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

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

ช่อง
action_label

string

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

OnClick

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

CardFixedFooter

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

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

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

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

ช่อง
primary_button

Button

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

Button

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

CardHeader

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

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

ช่อง
title

string

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

string

คำบรรยายของส่วนหัวของการ์ด หากระบุ จะแสดงบรรทัดละหนึ่งบรรทัดใต้ title
image_type

ImageType

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

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

string

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

string

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

DisplayStyle

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

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

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

DividerStyle

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

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

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

ส่วน

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

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

ช่อง
header

string

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

Widget

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

bool

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

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

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

int32

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

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

CollapseControl

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

ชิป

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

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

ช่อง
icon

Icon

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

string

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

OnClick

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

bool

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

bool

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

string

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

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

ChipList

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

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

ช่อง
layout

Layout

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

Chip

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

เลย์เอาต์

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

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

CollapseControl

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

ช่อง
horizontal_alignment

HorizontalAlignment

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

Button

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

Button

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

คอลัมน์

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

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

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

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

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

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

  • กล่องโต้ตอบที่แสดงเมื่อผู้ใช้เปิดส่วนเสริมจากอีเมลฉบับร่าง
  • กล่องโต้ตอบที่แสดงเมื่อผู้ใช้เปิดส่วนเสริมจากเมนูเพิ่มไฟล์แนบในกิจกรรม Google ปฏิทิน
ช่อง
column_items[]

Column

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

คอลัมน์

คอลัมน์

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

ช่อง
horizontal_size_style

HorizontalSizeStyle

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

HorizontalAlignment

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

VerticalAlignment

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

Widgets

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

HorizontalSizeStyle

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

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

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

VerticalAlignment

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

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

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

วิดเจ็ต

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

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

ช่อง

ฟิลด์สหภาพ data

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

TextParagraph

วิดเจ็ต TextParagraph
image

Image

วิดเจ็ต Image
decorated_text

DecoratedText

วิดเจ็ต DecoratedText
button_list

ButtonList

วิดเจ็ต ButtonList
text_input

TextInput

วิดเจ็ต TextInput
selection_input

SelectionInput

วิดเจ็ต SelectionInput
date_time_picker

DateTimePicker

วิดเจ็ต DateTimePicker
chip_list

ChipList

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

DateTimePicker

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

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

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

ช่อง
name

string

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

โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม
label

string

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

DateTimePickerType

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

int64

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

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

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

int32

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

Action

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

Validation

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

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

DateTimePickerType

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

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

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

DecoratedText

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

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

ช่อง
icon
(deprecated)

Icon

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

Icon

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

string

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

string

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

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

bool

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

มีผลกับ text เท่านั้น โดยไม่มีผลกับ topLabel และ bottomLabel
bottom_label

string

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

OnClick

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

Button

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

SwitchControl

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

Icon

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

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

SwitchControl

สวิตช์แบบสลับหรือช่องทำเครื่องหมายในวิดเจ็ต decoratedText

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

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

ช่อง
name

string

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

โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม
value

string

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

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

bool

เมื่อ true แสดงว่าเลือกสวิตช์แล้ว
on_change_action

Action

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

ControlType

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

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

ControlType

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

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

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

ตัวแบ่ง

ประเภทนี้ไม่มีช่อง

แสดงเส้นแบ่งระหว่างวิดเจ็ตเป็นเส้นแนวนอน ดูตัวอย่างในแอป 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"
    }
  }
}
ช่อง
title

string

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

GridItem

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

BorderStyle

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

int32

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

OnClick

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

GridItem

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

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

ช่อง
id

string

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

ImageComponent

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

string

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

string

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

GridItemLayout

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

GridItemLayout

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

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

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

Icon

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

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

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

ช่อง
alt_text

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 ของไอคอน
image_type

ImageType

รูปแบบการครอบตัดที่ใช้กับรูปภาพ ในบางกรณี การใช้การครอบตัด CIRCLE จะทำให้รูปภาพวาดขนาดใหญ่กว่าไอคอนในตัว
ฟิลด์สหภาพ icons ไอคอนที่แสดงในวิดเจ็ตบนการ์ด icons ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้
known_icon

string

แสดงไอคอนในตัวของ Google Workspace

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

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

string

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

เช่น

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

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

MaterialIcon

แสดงไอคอน Material ของ Google

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

"material_icon": {
  "name": "check_box"
}

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

รูปภาพ

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

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

ช่อง
image_url

string

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

เช่น

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

OnClick

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

string

ข้อความสำรองของรูปภาพนี้ซึ่งใช้สำหรับการช่วยเหลือพิเศษ

ImageComponent

แสดงรูปภาพ

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

ช่อง
image_uri

string

URL ของรูปภาพ
alt_text

string

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

ImageCropStyle

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

BorderStyle

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

ImageCropStyle

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

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

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

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
ช่อง
type

ImageCropType

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

double

สัดส่วนภาพที่จะใช้หากประเภทการครอบตัดคือ 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

MaterialIcon

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

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

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

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

ช่อง
name

string

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

bool

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

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

int32

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

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

int32

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

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

OnClick

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

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

ช่อง

ฟิลด์สหภาพ data

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

Action

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

Card

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

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

OverflowMenu

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

OnClose

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

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

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

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

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

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

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

OpenAs

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

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

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

OverflowMenu

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

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

ช่อง
items[]

OverflowMenuItem

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

OverflowMenuItem

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

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

ช่อง
start_icon

Icon

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

string

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

OnClick

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

bool

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

SelectionInput

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

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

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

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

ช่อง
name

string

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

โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม
label

string

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

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

SelectionType

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

SelectionItem

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

Action

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

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

int32

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

int32

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

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

Validation

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

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

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

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

Action

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

PlatformDataSource

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

PlatformDataSource

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

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

ช่อง
ช่องการรวม data_source แหล่งข้อมูล data_source ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้
common_data_source

CommonDataSource

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

HostAppDataSourceMarkup

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

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

CommonDataSource

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

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

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

SelectionItem

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

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

ช่อง
text

string

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

string

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

โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม
selected

bool

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

string

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

string

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

SelectionType

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

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

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

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

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

หากต้องการป้อนข้อมูลรายการสำหรับเมนูแบบเลือกหลายรายการ คุณสามารถใช้แหล่งข้อมูลประเภทใดประเภทหนึ่งต่อไปนี้

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

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

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

คำแนะนำ

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

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

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

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

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

ช่อง
items[]

SuggestionItem

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

SuggestionItem

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

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

ช่อง

ฟิลด์สหภาพ content

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

string

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

TextInput

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

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

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

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

ช่อง
name

string

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

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

string

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

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

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

string

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

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

string

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

โปรดดูรายละเอียดเกี่ยวกับการป้อนข้อมูลแบบฟอร์มที่หัวข้อรับข้อมูลแบบฟอร์ม
type

Type

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

Action

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

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

Suggestions

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

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

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

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

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

Action

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

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

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

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

Validation

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

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

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 ช่องป้อนข้อความมีความสูงคงที่ของบรรทัดหลายบรรทัด

TextParagraph

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

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

ช่อง
text

string

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

int32

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

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

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

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

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

ช่อง
character_limit

int32

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

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

InputType

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

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

InputType

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

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

วิดเจ็ต

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

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

ช่อง
horizontal_alignment

HorizontalAlignment

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

TextParagraph

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

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

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

Image

แสดงรูปภาพ

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

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

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

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

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

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

DateTimePicker

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

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

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

Divider

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

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

"divider": {
}
grid

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

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

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

HorizontalAlignment

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

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

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

ImageType

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

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

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