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

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

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

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

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

---

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

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

---

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

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

• บริการ HTTP ด้วย Google Cloud Functions
• Google Apps Script
• Google Cloud Dialogflow CX
• Google Cloud Pub/Sub

เพิ่มปุ่ม

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

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

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

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

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต ButtonList ที่มี 2 ปุ่ม ปุ่มเดียวจะเปิดเอกสารประกอบสำหรับนักพัฒนาแอป Google Chat ในแท็บใหม่ ปุ่ม other จะเรียกใช้ฟังก์ชันที่กำหนดเองชื่อ 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วิดเจ็ตที่ ใช้สวิตช์

เพิ่มเมนูแบบเลื่อนลง

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

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

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

คุณสามารถป้อนข้อมูลรายการสำหรับเมนูแบบเลือกหลายรายการจากแหล่งข้อมูลต่อไปนี้ใน 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

ดูใน GitHub

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

ดูใน GitHub

'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

ดูใน GitHub

.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

ดูใน GitHub

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

ดูใน GitHub

/**
 * 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

ดูใน GitHub

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

ดูใน GitHub

// 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

ดูใน GitHub

/**
 * 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

หัวข้อที่เกี่ยวข้อง

• ButtonList
• Button
• Color
• knownIcon
• SelectionInput
• TextInput
• วิดเจ็ต DateTimePicker