Class SelectionInput

선택입력

사전 정의된 옵션 집합 중에서 선택할 수 있는 입력란입니다.

SelectionInputType.DROP_DOWN 및 SelectionInputType.MULTI_SELECT 메뉴에 대해서만 양식 제출 유효성 검사를 지원합니다. Action.setAllWidgetsAreRequired(allWidgetsAreRequired)가 true로 설정되거나 이 위젯이 Action.addRequiredWidget(requiredWidget)를 통해 지정된 경우 값이 선택되지 않으면 제출 작업이 차단됩니다.

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);

메서드

메서드반환 유형간략한 설명
addItem(text, value, selected)SelectionInput선택할 수 있는 새 항목을 추가합니다.
addMultiSelectItem(text, value, selected, startIconUri, bottomText)SelectionInput다중 선택 메뉴에 선택할 수 있는 새 항목을 추가합니다.
setExternalDataSource(action)SelectionInput관계형 데이터베이스와 같은 외부 데이터 소스를 설정합니다.
setFieldName(fieldName)SelectionInputUI 상호작용이 있을 때 생성되는 이벤트 객체에서 이 선택 입력을 식별하는 키를 설정합니다.
setMultiSelectMaxSelectedItems(maxSelectedItems)SelectionInput사용자가 선택할 수 있는 최대 항목 수를 설정합니다.
setMultiSelectMinQueryLength(queryLength)SelectionInput앱이 자동 완성을 쿼리하고 카드에 추천 항목을 표시하기 전에 사용자가 입력하는 텍스트 문자 수를 설정합니다.
setOnChangeAction(action)SelectionInput선택 입력이 변경될 때마다 실행할 Action를 설정합니다.
setPlatformDataSource(platformDataSource)SelectionInputGoogle Workspace의 데이터 소스를 설정합니다.
setTitle(title)SelectionInput입력란 앞에 표시할 제목을 설정합니다.
setType(type)SelectionInput이 입력의 유형을 설정합니다.

자세한 문서

addItem(text, value, selected)

선택할 수 있는 새 항목을 추가합니다.

매개변수

이름유형설명
textObject이 항목에 표시할 텍스트입니다. 문자열이 아닌 원시 인수는 자동으로 문자열로 변환됩니다.
valueObject콜백을 통해 전송되는 양식 입력 값입니다. 문자열이 아닌 원시 인수는 자동으로 문자열로 변환됩니다.
selectedBoolean기본적으로 항목이 선택되어 있는지 여부입니다. 선택 입력란이 하나의 값만 허용하는 경우 (예: 라디오 버튼 또는 드롭다운 메뉴) 항목 하나에 대해서만 이 필드를 설정합니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

addMultiSelectItem(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',
        );

매개변수

이름유형설명
textObject이 항목에 표시할 텍스트입니다. 문자열이 아닌 원시 인수는 자동으로 문자열로 변환됩니다.
valueObject콜백을 통해 전송되는 양식 입력 값입니다. 문자열이 아닌 원시 인수는 자동으로 문자열로 변환됩니다.
selectedBoolean기본적으로 항목이 선택되어 있는지 여부입니다. 선택 입력란이 하나의 값만 허용하는 경우 (예: 라디오 버튼 또는 드롭다운 메뉴) 항목 하나에 대해서만 이 필드를 설정합니다.
startIconUriObject다중 선택 메뉴의 경우 항목의 텍스트 필드 옆에 표시된 아이콘의 URL입니다. PNG 및 JPEG 파일을 지원합니다.
bottomTextObject다중 선택 메뉴의 경우 항목의 텍스트 입력란 아래에 표시되는 텍스트 설명 또는 라벨입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

setExternalDataSource(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'),
        );

매개변수

이름유형설명
actionAction외부 데이터 소스입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

setFieldName(fieldName)

UI 상호작용이 있을 때 생성되는 이벤트 객체에서 이 선택 입력을 식별하는 키를 설정합니다. 사용자에게 표시되지 않습니다. 필수사항이며 고유해야 합니다.

매개변수

이름유형설명
fieldNameString이 입력에 할당할 이름입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

setMultiSelectMaxSelectedItems(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',
        );

매개변수

이름유형설명
maxSelectedItemsInteger최대 항목 수입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

setMultiSelectMinQueryLength(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',
        );

매개변수

이름유형설명
queryLengthInteger텍스트 문자 수입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

setOnChangeAction(action)

선택 입력이 변경될 때마다 실행할 Action를 설정합니다.

매개변수

이름유형설명
actionAction수행할 작업입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

setPlatformDataSource(platformDataSource)

Google Workspace의 데이터 소스를 설정합니다. 멀티셀렉션 메뉴의 항목을 채우는 데 사용됩니다. 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('contacts')
        .setTitle('Selected contacts')
        .setPlatformDataSource(
            CardService.newPlatformDataSource().setCommonDataSource(
                CardService.CommonDataSource.USER,
                ),
        );
 Google Chat 앱에서만 사용할 수 있습니다. Google Workspace 부가기능에는 사용할 수 없습니다.

매개변수

이름유형설명
platformDataSourcePlatformDataSource데이터 소스

리턴

SelectionInput: 연결을 위한 객체입니다.

setTitle(title)

입력란 앞에 표시할 제목을 설정합니다.

매개변수

이름유형설명
titleString입력란 제목입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.

setType(type)

이 입력의 유형을 설정합니다. 기본값은 CHECKBOX입니다.

매개변수

이름유형설명
typeSelectionInputType선택 유형입니다.

리턴

SelectionInput: 연결을 위한 객체입니다.