หน้านี้ได้รับการแปลโดย Cloud Translation API

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

หน้านี้อธิบายวิธีเพิ่มวิดเจ็ตและองค์ประกอบ UI ลงในการ์ด เพื่อให้ผู้ใช้โต้ตอบกับแอป Google 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

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

หากต้องการใช้สไตล์ดีไซน์ Material ไม่ต้องใส่ "สี"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เพิ่มสวิตช์

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

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

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

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

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

ดูใน GitHub

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

ดูใน GitHub

/**
 * 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
            },
          ]
        }
      }
    }
  };
}

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

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

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

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

เพิ่มปุ่ม

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

เพิ่มปุ่มด้วยสไตล์ดีไซน์ Material

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

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

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

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

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

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

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

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

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

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

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

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

เพิ่มสวิตช์

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

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

JSON

JSON

JSON

Apps Script

Node.js

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

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

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

JSON

ตั้งค่าการดำเนินการ all_widgets_are_required ใน dateTime Picker

JSON

ตั้งค่าการดำเนินการ all_widgets_are_required ในเมนูแบบเลื่อนลง

JSON

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

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

JSON

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

JSON

แก้ปัญหา

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

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

ตั้งค่าการดำเนินการ `all_widgets_are_required` ใน dateTime Picker

ตั้งค่าการดำเนินการ `all_widgets_are_required` ในเมนูแบบเลื่อนลง