เพิ่มองค์ประกอบ UI แบบอินเทอร์แอกทีฟลงในการ์ด

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

แอป Chat สามารถใช้อินเทอร์เฟซ Chat ต่อไปนี้ เพื่อสร้างการ์ดแบบอินเทอร์แอกทีฟ

  • ข้อความ ที่มีการ์ดอย่างน้อย 1 ใบ
  • หน้าแรก ซึ่งเป็นการ์ดที่ปรากฏจากแท็บหน้าแรกในข้อความ ส่วนตัวด้วยแอป Chat
  • กล่องโต้ตอบ ซึ่งเป็นการ์ดที่เปิดขึ้น ในหน้าต่างใหม่จากข้อความและหน้าแรก

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

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

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

ข้อกำหนดเบื้องต้น

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

เพิ่มปุ่ม

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

  • เปิดไฮเปอร์ลิงก์ด้วย OpenLink เพื่อให้ข้อมูลเพิ่มเติมแก่ผู้ใช้
  • เรียกใช้ action ที่เรียกใช้ฟังก์ชันที่กำหนดเอง เช่น การเรียก API

ปุ่มรองรับข้อความแทนเพื่อการช่วยเหลือพิเศษ

เพิ่มปุ่มที่เรียกใช้ฟังก์ชันที่กำหนดเอง

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต ButtonList ที่มีปุ่ม 2 ปุ่ม ปุ่มเดียวจะเปิดเอกสารประกอบสำหรับนักพัฒนาแอป Google Chat ในแท็บใหม่ ส่วนปุ่ม อื่นๆ จะเรียกใช้ฟังก์ชันที่กำหนดเองชื่อ goToView() และส่งพารามิเตอร์ viewType="BIRD EYE VIEW"

เพิ่มปุ่มที่มีสไตล์ Material Design

ต่อไปนี้แสดงชุดปุ่มในรูปแบบปุ่ม Material Design ต่างๆ

หากต้องการใช้สไตล์ Material Design อย่าใส่แอตทริบิวต์ "สี"

เพิ่มปุ่มที่มีสีที่กำหนดเองและปุ่มที่ปิดใช้งาน

คุณสามารถป้องกันไม่ให้ผู้ใช้คลิกปุ่มได้โดยการตั้งค่า "disabled": "true"

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

เพิ่มปุ่มที่มีไอคอน

ต่อไปนี้แสดงการ์ดที่ประกอบด้วยวิดเจ็ต ButtonList ที่มีวิดเจ็ตไอคอน 2 รายการ Button ปุ่มหนึ่งใช้ฟิลด์ knownIcon เพื่อแสดงไอคอนอีเมลในตัวของ Google Chat ปุ่มอีกปุ่มใช้ฟิลด์ iconUrl เพื่อแสดง วิดเจ็ตไอคอนที่กำหนดเอง

เพิ่มปุ่มที่มีไอคอนและข้อความ

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

ปรับแต่งปุ่มสำหรับส่วนที่ยุบได้

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

เพิ่มเมนูรายการเพิ่มเติม

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

เพิ่มรายการชิป

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

รวบรวมข้อมูลจากผู้ใช้

ส่วนนี้จะอธิบายวิธีเพิ่มวิดเจ็ตที่รวบรวมข้อมูล เช่น ข้อความหรือตัวเลือก

ดูวิธีประมวลผลสิ่งที่ผู้ใช้ป้อนได้ที่รวบรวมและประมวลผลข้อมูลจากผู้ใช้ Google Chat

รวบรวมข้อความ

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

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

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต TextInput

รวบรวมวันที่หรือเวลา

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

ต่อไปนี้เป็นการ์ดที่มีวิดเจ็ต 3 ประเภทที่แตกต่างกัน DateTimePicker

อนุญาตให้ผู้ใช้เลือกรายการ

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

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

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

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

เพิ่มช่องทำเครื่องหมาย

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

เพิ่มปุ่มตัวเลือก

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

เพิ่มสวิตช์

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

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

ป้อนข้อมูลในเมนูแบบเลื่อนลงแบบไดนามิก

คุณสามารถป้อนข้อมูลรายการสำหรับเมนูแบบเลื่อนลงแบบไดนามิกจากแหล่งข้อมูลใน Google Workspace หรือจากแหล่งข้อมูลภายนอก หากต้องการใช้แหล่งข้อมูลแบบไดนามิก ให้ระบุฟิลด์ data_source_configs ซึ่งเป็นอาร์เรย์ของออบเจ็กต์ DataSourceConfig DataSourceConfig แต่ละรายการจะมี platformDataSource หรือ remoteDataSource ได้ ปัจจุบันรองรับเฉพาะ DataSourceConfig เท่านั้น

ป้อนข้อมูลจาก Google Workspace

หากต้องการป้อนข้อมูลจากแหล่งข้อมูล Google Workspace เช่น ผู้ใช้ Google Workspace คุณต้องระบุฟิลด์ platformDataSource ภายใน DataSourceConfig คุณไม่ต้องระบุออบเจ็กต์ SelectionItem เนื่องจากรายการที่เลือกเหล่านี้มาจาก Google Workspace แบบไดนามิก ซึ่งแตกต่างจากการใช้ items แบบคงที่

โค้ดต่อไปนี้แสดงเมนูแบบเลื่อนลงที่แสดงผู้ใช้ Google Workspace

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}
ป้อนข้อมูลสินค้าจากแหล่งข้อมูลภายนอก

หากต้องการป้อนข้อมูลจากแหล่งข้อมูลภายนอกหรือของบุคคลที่สาม เช่น ระบบการจัดการลูกค้าสัมพันธ์ (CRM) คุณต้องใช้ฟิลด์ remoteDataSource ภายใน DataSourceConfig เพื่อระบุฟังก์ชันที่แสดงผลรายการจากแหล่งข้อมูล

โค้ดต่อไปนี้แสดงเมนูแบบเลื่อนลงที่แสดงรายการจากชุดรายชื่อติดต่อภายนอกโดยการเรียกใช้ฟังก์ชัน getCrmLeads

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

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

เพิ่มเมนูสำหรับเลือกหลายรายการ

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

คุณสามารถป้อนข้อมูลรายการสำหรับเมนูแบบหลายตัวเลือกจากแหล่งข้อมูลต่อไปนี้ใน Google Workspace

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

หากต้องการใช้แหล่งข้อมูล Google Workspace คุณต้องระบุฟิลด์ platformDataSource คุณจะละเว้นออบเจ็กต์ SelectionItem เนื่องจากรายการที่เลือกเหล่านี้มาจาก Google Workspace แบบไดนามิก ซึ่งแตกต่างจากประเภทอินพุตการเลือกอื่นๆ

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

JSON

{
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

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

JSON

{
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}

เมนูแบบเลือกหลายรายการยังสามารถแสดงรายการจากแหล่งข้อมูลของบุคคลที่สามหรือแหล่งข้อมูลภายนอกได้ด้วย เช่น คุณสามารถใช้เมนูแบบเลือกหลายรายการเพื่อช่วยให้ผู้ใช้เลือกจาก รายการผู้มีโอกาสเป็นลูกค้าจากการขายจากระบบการจัดการลูกค้าสัมพันธ์ (CRM)

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

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

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

Node.js

node/selection-input/index.js
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Python

python/selection-input/main.py
'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': "getContacts" },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_contact("3")]
}

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction("getContacts"))
  .setItems(List.of(getContact("3")))))))))));

Apps Script

apps-script/selection-input/selection-input.gs
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

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

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

  • ส่งออบเจ็กต์เหตุการณ์ที่แสดงการโต้ตอบของผู้ใช้กับเมนู
  • ระบุว่าค่าของเหตุการณ์การโต้ตอบ invokedFunction ตรงกับฟังก์ชันจากช่อง externalDataSource
  • เมื่อฟังก์ชันตรงกัน ให้แสดงผลรายการที่แนะนำจากแหล่งข้อมูลภายนอก หากต้องการแนะนำรายการตามสิ่งที่ผู้ใช้พิมพ์ ให้รับค่าสำหรับคีย์ autocomplete_widget_query ค่านี้แสดงสิ่งที่ผู้ใช้พิมพ์ในเมนู

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

Node.js

node/selection-input/index.js
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Python

python/selection-input/main.py
def on_widget_update(event: dict) -> dict:
  """Responds to a WIDGET_UPDATE event in Google Chat."""
  if "getContacts" == event.get("common").get("invokedFunction"):
    query = event.get("common").get("parameters").get("autocomplete_widget_query")
    return { 'actionResponse': {
      'type': "UPDATE_WIDGET",
      'updatedWidget': { 'suggestions': { 'items': list(filter(lambda e: query is None or query in e["text"], [
        # The list is static here but it could be dynamic.
        get_contact("1"), get_contact("2"), get_contact("3"), get_contact("4"), get_contact("5")
      # Only return items based on the query from the user
      ]))}}
    }}


def get_contact(id: str) -> dict:
  """Generate a suggested contact given an ID."""
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
// Responds to a WIDGET_UPDATE event in Google Chat.
Message onWidgetUpdate(JsonNode event) {
  if ("getContacts".equals(event.at("/invokedFunction").asText())) {
    String query = event.at("/common/parameters/autocomplete_widget_query").asText();
    return new Message().setActionResponse(new ActionResponse()
      .setType("UPDATE_WIDGET")
      .setUpdatedWidget(new UpdatedWidget()
        .setSuggestions(new SelectionItems().setItems(List.of(
          // The list is static here but it could be dynamic.
          getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
        // Only return items based on the query from the user
        ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList()))));
  }
  return null;
}

// Generate a suggested contact given an ID.
GoogleAppsCardV1SelectionItem getContact(String id) {
  return new GoogleAppsCardV1SelectionItem()
    .setValue(id)
    .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
    .setText("Contact " + id);
}

Apps Script

apps-script/selection-input/selection-input.gs
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

ตรวจสอบข้อมูลที่ป้อนลงในการ์ด

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

ตั้งค่าวิดเจ็ตที่จำเป็นสำหรับการดำเนินการ

ในส่วนaction ของการ์ด ให้ เพิ่มชื่อวิดเจ็ตที่การดำเนินการต้องการลงในรายการ requiredWidgets

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

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

ตั้งค่าall_widgets_are_requiredการดำเนินการในการเลือกหลายรายการ

JSON

{
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "value": "contact-1",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 1",
                "bottomText": "Contact one description",
                "selected": false
              },
              {
                "value": "contact-2",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 2",
                "bottomText": "Contact two description",
                "selected": false
              },
              {
                "value": "contact-3",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 3",
                "bottomText": "Contact three description",
                "selected": false
              },
              {
                "value": "contact-4",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 4",
                "bottomText": "Contact four description",
                "selected": false
              },
              {
                "value": "contact-5",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 5",
                "bottomText": "Contact five description",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}
ตั้งค่าall_widgets_are_requiredการดำเนินการใน dateTimePicker

JSON

{
  "sections": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "A datetime picker widget with both date and time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_and_time",
            "label": "meeting",
            "type": "DATE_AND_TIME"
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just date:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_only",
            "label": "Choose a date",
            "type": "DATE_ONLY",
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_time_only",
            "label": "Select a time",
            "type": "TIME_ONLY"
          }
        }
      ]
    }
  ]
}
ตั้งค่าall_widgets_are_requiredการดำเนินการในเมนูแบบเลื่อนลง

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "text": "Red",
                "value": "red",
                "selected": false
              },
              {
                "text": "Green",
                "value": "green",
                "selected": false
              },
              {
                "text": "White",
                "value": "white",
                "selected": false
              },
              {
                "text": "Blue",
                "value": "blue",
                "selected": false
              },
              {
                "text": "Black",
                "value": "black",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

ตั้งค่าการตรวจสอบความถูกต้องสำหรับวิดเจ็ตอินพุตข้อความ

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

กำหนดขีดจํากัดอักขระสําหรับวิดเจ็ตการป้อนข้อความ

JSON

{
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"character_limit":15},
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        }
      ]
    }
  ]
}
ตั้งค่าประเภทอินพุตสำหรับวิดเจ็ตอินพุตข้อความ

JSON

{
  "sections": [
    {
      "header": "Validate text inputs by input types",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "mailing_address",
            "label": "Please enter a valid email address",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "EMAIL"
            },
            "onChangeAction": {
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "input_type": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

แก้ปัญหา

เมื่อแอป Google Chat หรือการ์ดแสดงข้อผิดพลาด อินเทอร์เฟซของ Chat จะแสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ดำเนินการตามคำขอของคุณไม่ได้" บางครั้ง UI ของ Chat อาจไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ แต่แอปหรือการ์ด Chat อาจให้ผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความในการ์ดอาจไม่ปรากฏ

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