ออกแบบการ์ดหรือกล่องโต้ตอบแบบอินเทอร์แอกทีฟ

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

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

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

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

  • บัญชี Google Workspace ที่มีสิทธิ์เข้าถึง Google Chat
  • แอป Chat ที่เผยแพร่แล้ว วิธีสร้าง แอปแชท โปรดทำตามนี้ Quickstart

    • เพิ่มปุ่ม

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

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

    สำหรับการช่วยเหลือพิเศษ ปุ่มจะรองรับข้อความสำรอง

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

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

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

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

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

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

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

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

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

    เพิ่มองค์ประกอบ UI ที่เลือกได้

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

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

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

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

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

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

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

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

    เพิ่มสวิตช์

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

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

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

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

    ใช้แหล่งข้อมูลสำหรับเมนูการเลือกหลายรายการ

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

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

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

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

    หากต้องการใช้แหล่งข้อมูลของ Google Workspace คุณต้องระบุ platformDataSource ด้วย ต่างจากการเลือกประเภทอินพุตอื่นๆ ตรงที่จะละเว้น SectionItem เนื่องจากรายการที่เลือกเหล่านี้มีแหล่งที่มาแบบไดนามิกจาก 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
          }
        }
      }
    }
  }
}
    แหล่งข้อมูลภายนอก Google Workspace

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

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

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

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

    JSON

    {
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 2,
    "externalDataSource": {
      "function": "getContacts"
    },
    "items": [
      {
        "text": "Contact 3",
        "value": "contact-3",
        "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
        "bottomText": "Contact three description",
        "selected": false
      }
    ]
  }
}

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

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

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

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

    Apps Script

    apps-script/selection-input/on-widget-update.gs
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          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
            },
          ]
        }
      }
    }
  };
}

    Node.js

    node/selection-input/on-widget-update.js
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          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
            },
          ]
        }
      }
    }
  };
}

    เพิ่มช่องที่ผู้ใช้ป้อนข้อความได้

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

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

    หากต้องการประมวลผลข้อความที่ผู้ใช้ป้อน โปรดดู รับข้อมูลในแบบฟอร์ม

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

    ให้ผู้ใช้เลือกวันที่และเวลา

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

    หากต้องการประมวลผลค่าวันที่และเวลาที่ผู้ใช้ป้อน โปรดดู รับข้อมูลในแบบฟอร์ม

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

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

    หน้านี้จะอธิบายวิธีตรวจสอบข้อมูลที่ป้อนลงใน 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 ใน dateTime Picker

    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 หรือ card จะแสดงผลข้อผิดพลาด อินเทอร์เฟซ Chat แสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ไม่สามารถดำเนินการตามคำขอของคุณ" บางครั้ง UI ของ Chat ไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ แต่แอป Chat หรือ ทำให้เกิดผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความในการ์ดอาจ ปรากฏขึ้น

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