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

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

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

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

ตัวอย่างเช่น เมื่อส่วนหนึ่งมีวิดเจ็ตห้ารายการ และ 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)

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

ฟิลด์ Union data วิดเจ็ตหนึ่งๆ จะมีรายการต่อไปนี้ได้เพียง 1 รายการเท่านั้น คุณสามารถใช้ช่องวิดเจ็ตหลายช่องเพื่อแสดงรายการต่างๆ ได้มากขึ้น 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

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

เช่น 

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.
}
ช่อง

ฟิลด์ Union 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

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

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

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

OnClose

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

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

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

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

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

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

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

OverflowMenu

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

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

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

object (OverflowMenuItem)

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

OverflowMenuItem

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

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

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

object (Icon)

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

text

string

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

onClick

object (OnClick)

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

disabled

boolean

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

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 การครอบตัดจะทำให้รูปภาพมีขนาดใหญ่กว่าไอคอนในตัว

ฟิลด์ Union 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 Icons ของ Google

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

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

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

MaterialIcon

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

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

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

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

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

string

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

fill

boolean

ไอคอนจะแสดงผลว่าเติมสีหรือไม่ ค่าเริ่มต้นคือ false

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

weight

integer

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

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

grade

integer

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

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

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

ฟิลด์ Union 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&quot;.

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 ช่อง แต่จะเลือกได้เพียงค่าเดียวจากเมนูแบบเลื่อนลง

items[]

object (SelectionItem)

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

onChangeAction

object (Action)

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

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

multiSelectMaxSelectedItems

integer

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

multiSelectMinQueryLength

integer

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

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

validation

object (Validation)

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

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

ฟิลด์ Union multi_select_data_source สําหรับเมนูแบบเลือกหลายรายการ แหล่งข้อมูลที่สร้างมาจากรายการที่เลือก

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

externalDataSource

object (Action)

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

platformDataSource

object (PlatformDataSource)

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

SelectionType

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

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

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

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

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

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

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

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

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

SelectionItem

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

ใช้ได้กับแอปใน 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 ต้องเป็น HTTPS URL ตัวอย่างเช่น 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.
}
ช่อง
ฟิลด์ Union 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.
}
ช่อง
ฟิลด์ Union 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.
}
ช่อง
ฟิลด์ Union 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 Epoch

ระบุค่าตามประเภทของเครื่องมือเลือก ( 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 ของ Google

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)

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

GridItem

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

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

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

string

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

image

object (ImageComponent)

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

title

string

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

subtitle

string

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

layout

enum (GridItemLayout)

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

ImageComponent

แสดงรูปภาพ

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

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

string

URL ของรูปภาพ

altText

string

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

cropStyle

object (ImageCropStyle)

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

borderStyle

object (BorderStyle)

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

ImageCropStyle

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

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

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

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

enum (ImageCropType)

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

aspectRatio

number

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

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

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

ImageCropType

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

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

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

BorderStyle

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

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

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

enum (BorderType)

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

strokeColor

object (Color)

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

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

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

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

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

cornerRadius

integer

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

BorderType

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

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

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

GridItemLayout

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

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

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

คอลัมน์

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

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

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

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

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

ใช้ได้กับแอปใน Google Chat และส่วนเสริมของ Google Workspace 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.
}
ช่อง

ฟิลด์ Union 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)

ภาพไอคอน หากทั้ง 2 อย่าง 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 ค่าเริ่มต้น การ์ดจะแสดงโดยการแทนที่มุมมองของการ์ดบนสุดในกลุ่มการ์ด