이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Class SelectionInput

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

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)`	`SelectionInput`	UI 상호작용이 있을 때 생성되는 이벤트 객체에서 이 선택 입력을 식별하는 키를 설정합니다.
`setMultiSelectMaxSelectedItems(maxSelectedItems)`	`SelectionInput`	사용자가 선택할 수 있는 최대 항목 수를 설정합니다.
`setMultiSelectMinQueryLength(queryLength)`	`SelectionInput`	앱이 자동 완성을 쿼리하고 카드에 추천 항목을 표시하기 전에 사용자가 입력하는 텍스트 문자 수를 설정합니다.
`setOnChangeAction(action)`	`SelectionInput`	선택 입력이 변경될 때마다 실행할 `Action`를 설정합니다.
`setPlatformDataSource(platformDataSource)`	`SelectionInput`	Google Workspace의 데이터 소스를 설정합니다.
`setTitle(title)`	`SelectionInput`	입력란 앞에 표시할 제목을 설정합니다.
`setType(type)`	`SelectionInput`	이 입력의 유형을 설정합니다.

자세한 문서

`addItem(text, value, selected)`

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

매개변수

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

리턴

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

매개변수

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

리턴

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

매개변수

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

리턴

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

`setFieldName(fieldName)`

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

매개변수

이름	유형	설명
`fieldName`	`String`	이 입력에 할당할 이름입니다.

리턴

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

매개변수

이름	유형	설명
`maxSelectedItems`	`Integer`	최대 항목 수입니다.

리턴

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

매개변수

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

리턴

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

`setOnChangeAction(action)`

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

매개변수

이름	유형	설명
`action`	`Action`	수행할 작업입니다.

리턴

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 부가기능에는 사용할 수 없습니다.

매개변수

이름	유형	설명
`platformDataSource`	`PlatformDataSource`	데이터 소스

리턴

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

`setTitle(title)`

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

매개변수

이름	유형	설명
`title`	`String`	입력란 제목입니다.

리턴

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

`setType(type)`

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

매개변수

이름	유형	설명
`type`	`SelectionInputType`	선택 유형입니다.

리턴

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