เพิ่มองค์ประกอบ 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

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

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

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

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

ต่อไปนี้แสดงการ์ดที่มี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 ใน 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