ช่องป้อนข้อมูลที่ช่วยให้คุณเลือกจากชุดตัวเลือกที่กำหนดไว้ล่วงหน้าได้
พร้อมใช้งานสำหรับส่วนเสริมของ Google Workspace และแอป Google Chat
const checkboxGroup = CardService.newSelectionInput() .setType(CardService.SelectionInputType.CHECK_BOX) .setTitle('A group of checkboxes. Multiple selections are allowed.') .setFieldName('checkbox_field') .addItem('checkbox one title', 'checkbox_one_value', false) .addItem('checkbox two title', 'checkbox_two_value', true) .addItem('checkbox three title', 'checkbox_three_value', true) .setOnChangeAction( CardService.newAction().setFunctionName('handleCheckboxChange'), ); const radioGroup = CardService.newSelectionInput() .setType(CardService.SelectionInputType.RADIO_BUTTON) .setTitle( 'A group of radio buttons. Only a single selection is allowed.') .setFieldName('checkbox_field') .addItem('radio button one title', 'radio_one_value', true) .addItem('radio button two title', 'radio_two_value', false) .addItem('radio button three title', 'radio_three_value', false); const multiSelect = CardService.newSelectionInput() .setType(CardService.SelectionInputType.MULTI_SELECT) .setFieldName('multiselect') .setTitle('A multi select input example.') .addMultiSelectItem( 'Contact 1', 'contact-1', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact one description', ) .addMultiSelectItem( 'Contact 2', 'contact-2', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact two description', ) .addMultiSelectItem( 'Contact 3', 'contact-3', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact three description', ) .addMultiSelectItem( 'Contact 4', 'contact-4', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact four description', ) .addMultiSelectItem( 'Contact 5', 'contact-5', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact five description', ) .setMultiSelectMaxSelectedItems(3) .setMultiSelectMinQueryLength(1);
เมธอด
วิธีการ | ประเภทการแสดงผล | รายละเอียดแบบย่อ |
---|---|---|
add | Selection | เพิ่มรายการใหม่ที่เลือกได้ |
add | Selection | เพิ่มรายการใหม่ที่เลือกได้สำหรับเมนูแบบเลือกหลายรายการ |
set | Selection | ตั้งค่าแหล่งข้อมูลภายนอก เช่น ฐานข้อมูลเชิงสัมพันธ์ |
set | Selection | ตั้งค่าคีย์ที่ระบุอินพุตการเลือกนี้ในออบเจ็กต์เหตุการณ์ที่สร้างขึ้นเมื่อมีการทำงานกับ UI |
set | Selection | ตั้งค่าจำนวนรายการสูงสุดที่ผู้ใช้เลือกได้ |
set | Selection | กำหนดจำนวนอักขระข้อความที่ผู้ใช้ป้อนก่อนที่แอปจะค้นหาคำที่เติมข้อความอัตโนมัติและแสดงรายการที่แนะนำในการ์ด |
set | Selection | ตั้งค่า Action ให้ทํางานทุกครั้งที่มีการเปลี่ยนแปลงอินพุตการเลือก |
set | Selection | ตั้งค่าแหล่งข้อมูลจาก Google Workspace |
set | Selection | ตั้งค่าชื่อที่จะแสดงก่อนช่องป้อนข้อมูล |
set | Selection | ตั้งค่าประเภทของอินพุตนี้ |
เอกสารประกอบโดยละเอียด
add Item(text, value, selected)
เพิ่มรายการใหม่ที่เลือกได้
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
text | Object | ข้อความที่จะแสดงสําหรับรายการนี้ ระบบจะแปลงอาร์กิวเมนต์พื้นฐานที่ไม่ใช่สตริงเป็นสตริงโดยอัตโนมัติ |
value | Object | ค่าการป้อนข้อมูลในแบบฟอร์มที่ส่งผ่าน Callback ระบบจะแปลงอาร์กิวเมนต์พื้นฐานที่ไม่ใช่สตริงเป็นสตริงโดยอัตโนมัติ |
selected | Boolean | รายการจะเลือกไว้โดยค่าเริ่มต้นหรือไม่ หากอินพุตการเลือกยอมรับเพียงค่าเดียว (เช่น สําหรับปุ่มตัวเลือกหรือเมนูแบบเลื่อนลง) ให้ตั้งค่าช่องนี้สําหรับรายการเดียวเท่านั้น |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
add Multi Select Item(text, value, selected, startIconUri, bottomText)
เพิ่มรายการใหม่ที่เลือกได้สำหรับเมนูแบบเลือกหลายรายการ
const multiSelect = CardService.newSelectionInput() .setType(CardService.SelectionInputType.MULTI_SELECT) .setFieldName('multiselect') .setTitle('A multi select input example.') .addMultiSelectItem( 'Contact 1', 'contact-1', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact one description', ) .addMultiSelectItem( 'Contact 2', 'contact-2', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact two description', ) .addMultiSelectItem( 'Contact 3', 'contact-3', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact three description', ) .addMultiSelectItem( 'Contact 4', 'contact-4', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact four description', ) .addMultiSelectItem( 'Contact 5', 'contact-5', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact five description', );
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
text | Object | ข้อความที่จะแสดงสําหรับรายการนี้ ระบบจะแปลงอาร์กิวเมนต์พื้นฐานที่ไม่ใช่สตริงเป็นสตริงโดยอัตโนมัติ |
value | Object | ค่าการป้อนข้อมูลในแบบฟอร์มที่ส่งผ่าน Callback ระบบจะแปลงอาร์กิวเมนต์พื้นฐานที่ไม่ใช่สตริงเป็นสตริงโดยอัตโนมัติ |
selected | Boolean | รายการจะเลือกไว้โดยค่าเริ่มต้นหรือไม่ หากอินพุตการเลือกยอมรับเพียงค่าเดียว (เช่น สําหรับปุ่มตัวเลือกหรือเมนูแบบเลื่อนลง) ให้ตั้งค่าช่องนี้สําหรับรายการเดียวเท่านั้น |
start | Object | สำหรับเมนูแบบเลือกหลายรายการ ให้ระบุ URL ของไอคอนที่แสดงข้างช่องข้อความของรายการ รองรับไฟล์ PNG และ JPEG |
bottom | Object | สำหรับเมนูแบบเลือกหลายรายการ ให้ใช้คำอธิบายข้อความหรือป้ายกำกับที่แสดงใต้ช่องข้อความของรายการ |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set External Data Source(action)
ตั้งค่าแหล่งข้อมูลภายนอก เช่น ฐานข้อมูลเชิงสัมพันธ์
const multiSelect = CardService.newSelectionInput() .setType(CardService.SelectionInputType.MULTI_SELECT) .setFieldName('contacts') .setTitle('Selected contacts') .addMultiSelectItem( 'Contact 3', 'contact-3', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact three description', ) .setMultiSelectMaxSelectedItems(5) .setMultiSelectMinQueryLength(2) .setExternalDataSource( CardService.newAction().setFunctionName('getContacts'), );
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
action | Action | แหล่งข้อมูลภายนอก |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set Field Name(fieldName)
ตั้งค่าคีย์ที่ระบุอินพุตการเลือกนี้ในออบเจ็กต์เหตุการณ์ที่สร้างขึ้นเมื่อมีการทำงานกับ UI ผู้ใช้จะมองไม่เห็นข้อมูลนี้ ต้องระบุและต้องเป็นค่าที่ไม่ซ้ำกัน
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
field | String | ชื่อที่จะกําหนดให้กับอินพุตนี้ |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set Multi Select Max Selected Items(maxSelectedItems)
ตั้งค่าจำนวนรายการสูงสุดที่ผู้ใช้เลือกได้
const multiSelect = CardService.newSelectionInput() .setType(CardService.SelectionInputType.MULTI_SELECT) .setFieldName('multiselect') .setTitle('A multi select input example.') .setMultiSelectMaxSelectedItems(3) .addMultiSelectItem( 'Contact 1', 'contact-1', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact one description', ) .addMultiSelectItem( 'Contact 2', 'contact-2', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact two description', ) .addMultiSelectItem( 'Contact 3', 'contact-3', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact three description', ) .addMultiSelectItem( 'Contact 4', 'contact-4', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact four description', ) .addMultiSelectItem( 'Contact 5', 'contact-5', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact five description', );
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
max | Integer | จํานวนรายการสูงสุด |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set Multi Select Min Query Length(queryLength)
กำหนดจำนวนอักขระข้อความที่ผู้ใช้ป้อนก่อนที่แอปจะค้นหาคำที่เติมข้อความอัตโนมัติและแสดงรายการที่แนะนำในการ์ด
const multiSelect = CardService.newSelectionInput() .setType(CardService.SelectionInputType.MULTI_SELECT) .setFieldName('multiselect') .setTitle('A multi select input example.') .setMultiSelectMinQueryLength(1) .addMultiSelectItem( 'Contact 1', 'contact-1', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact one description', ) .addMultiSelectItem( 'Contact 2', 'contact-2', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact two description', ) .addMultiSelectItem( 'Contact 3', 'contact-3', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact three description', ) .addMultiSelectItem( 'Contact 4', 'contact-4', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact four description', ) .addMultiSelectItem( 'Contact 5', 'contact-5', false, 'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png', 'Contact five description', );
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
query | Integer | จํานวนอักขระข้อความ |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set On Change Action(action)
ตั้งค่า Action
ให้ทํางานทุกครั้งที่มีการเปลี่ยนแปลงอินพุตการเลือก
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
action | Action | สิ่งที่ต้องดำเนินการ |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set Platform Data Source(platformDataSource)
ตั้งค่าแหล่งข้อมูลจาก Google Workspace ใช้เพื่อป้อนข้อมูลรายการในเมนูแบบเลือกหลายรายการ
const multiSelect = CardService.newSelectionInput() .setType(CardService.SelectionInputType.MULTI_SELECT) .setFieldName('contacts') .setTitle('Selected contacts') .setPlatformDataSource( CardService.newPlatformDataSource().setCommonDataSource( CardService.CommonDataSource.USER, ), );
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
platform | Platform | แหล่งข้อมูล |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set Title(title)
ตั้งค่าชื่อที่จะแสดงก่อนช่องป้อนข้อมูล
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
title | String | ชื่อช่องป้อนข้อมูล |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม
set Type(type)
ตั้งค่าประเภทของอินพุตนี้ ค่าเริ่มต้นคือ CHECKBOX
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
type | Selection | ประเภทการเลือก |
รีเทิร์น
Selection
— ออบเจ็กต์นี้สําหรับการต่อเชื่อม