เพิ่มองค์ประกอบ 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 ที่มีปุ่ม 2 ปุ่ม ปุ่มหนึ่งใช้ช่อง Color เพื่อปรับแต่งสีพื้นหลังของปุ่ม ปุ่มอีกปุ่มหนึ่งปิดใช้งานด้วยช่อง Disabled ซึ่งจะป้องกันไม่ให้ผู้ใช้คลิกปุ่มและเรียกใช้ฟังก์ชัน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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