Class SelectionInput

SelectionInput

Es un campo de entrada que permite elegir entre un conjunto de opciones predefinidas.

Solo admite la validación del envío de formularios para los menús SelectionInputType.DROP_DOWN y SelectionInputType.MULTI_SELECT. Cuando Action.setAllWidgetsAreRequired(allWidgetsAreRequired) se establece en true o este widget se especifica a través de Action.addRequiredWidget(requiredWidget), la acción de envío se bloquea, a menos que se seleccione un valor.

Está disponible para los complementos de Google Workspace y las apps de 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);

Métodos

MétodoTipo de datos que se muestraDescripción breve
addDataSourceConfig(dataSourceConfig)SelectionInputEstablece la configuración de la fuente de datos para el control de selección.
addEventAction(eventAction)WidgetAgrega la acción del evento que se puede realizar en el widget.
addItem(text, value, selected)SelectionInputAgrega un nuevo elemento que se puede seleccionar.
addMultiSelectItem(text, value, selected, startIconUri, bottomText)SelectionInputAgrega un nuevo elemento que se puede seleccionar para los menús de selección múltiple.
setExternalDataSource(action)SelectionInputEstablece la fuente de datos externa, como una base de datos relacional.
setFieldName(fieldName)SelectionInputEstablece la clave que identifica esta entrada de selección en el objeto de evento que se genera cuando hay una interacción de la IU.
setId(id)WidgetEstablece el ID único asignado que se usa para identificar el widget que se modificará.
setMultiSelectMaxSelectedItems(maxSelectedItems)SelectionInputEstablece la cantidad máxima de elementos que puede seleccionar un usuario.
setMultiSelectMinQueryLength(queryLength)SelectionInputEstablece la cantidad de caracteres de texto que ingresa un usuario antes de que la app consulte el autocompletado y muestre los elementos sugeridos en la tarjeta.
setOnChangeAction(action)SelectionInputEstablece un objeto Action para que se ejecute cada vez que cambie la entrada de selección.
setPlatformDataSource(platformDataSource)SelectionInputEstablece una fuente de datos de Google Workspace.
setTitle(title)SelectionInputEstablece el título que se mostrará antes del campo de entrada.
setType(type)SelectionInputEstablece el tipo de esta entrada.
setVisibility(visibility)WidgetEstablece la visibilidad del widget.

Documentación detallada

addDataSourceConfig(dataSourceConfig)

Establece la configuración de la fuente de datos para el control de selección. Este campo proporciona un control más detallado sobre la fuente de datos. Este paso es opcional, 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('contacts')
        .setTitle('Selected contacts')
        .setDataSourceConfig(
            CardService.newDataSourceConfig().setPlatformDataSource(
                CardService.newPlatformDataSource().setCommonDataSource(
                    CardService.CommonDataSource.USER,
                )
            )
        );

Parámetros

NombreTipoDescripción
dataSourceConfigDataSourceConfigEs la configuración de la fuente de datos que se aplicará a la entrada de selección.

Volver

SelectionInput: Este objeto, para encadenar.

addEventAction(eventAction)

Agrega la acción del evento que se puede realizar en el widget.

Parámetros

NombreTipoDescripción
eventActionEventActionEs el EventAction que se agregará.

Volver

Widget: El objeto, para encadenar.

addItem(text, value, selected)

Agrega un nuevo elemento que se puede seleccionar.

Parámetros

NombreTipoDescripción
textObjectEs el texto que se mostrará para este elemento. Los argumentos primitivos que no son cadenas se convierten automáticamente en cadenas.
valueObjectEs el valor de entrada del formulario que se envía a través de la devolución de llamada. Los argumentos primitivos que no son cadenas se convierten automáticamente en cadenas.
selectedBooleanIndica si el elemento está seleccionado de forma predeterminada. Si la entrada de selección solo acepta un valor (como en el caso de los botones de selección o un menú desplegable), solo establece este campo para un elemento.

Volver

SelectionInput: Este objeto, para encadenar.

addMultiSelectItem(text, value, selected, startIconUri, bottomText)

Agrega un elemento nuevo que se puede seleccionar para los menús de selección múltiple. 

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

Parámetros

NombreTipoDescripción
textObjectEs el texto que se mostrará para este elemento. Los argumentos primitivos que no son cadenas se convierten automáticamente en cadenas.
valueObjectEs el valor de entrada del formulario que se envía a través de la devolución de llamada. Los argumentos primitivos que no son cadenas se convierten automáticamente en cadenas.
selectedBooleanIndica si el elemento está seleccionado de forma predeterminada. Si la entrada de selección solo acepta un valor (como en el caso de los botones de selección o un menú desplegable), solo establece este campo para un elemento.
startIconUriObjectEn el caso de los menús de selección múltiple, es la URL del ícono que se muestra junto al campo de texto del elemento. Admite archivos PNG y JPEG.
bottomTextObjectEn el caso de los menús de selección múltiple, es una descripción o etiqueta de texto que se muestra debajo del campo de texto del elemento.

Volver

SelectionInput: Este objeto, para encadenar.

setExternalDataSource(action)

Establece la fuente de datos externa, como una base de datos relacional. 

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

Parámetros

NombreTipoDescripción
actionActionEs la fuente de datos externa.

Volver

SelectionInput: Este objeto, para encadenar.

setFieldName(fieldName)

Establece la clave que identifica esta entrada de selección en el objeto de evento que se genera cuando hay una interacción de la IU. No es visible para el usuario. Es obligatorio y debe ser único.

Parámetros

NombreTipoDescripción
fieldNameStringNombre que se asignará a esta entrada.

Volver

SelectionInput: Este objeto, para encadenar.

setId(id)

Establece el ID único asignado que se usa para identificar el widget que se modificará. La mutación de widgets solo se admite en complementos.

Parámetros

NombreTipoDescripción
idStringEs el ID del widget, con un límite de 64 caracteres y en formato de `[a-zA-Z0-9-]+`.

Volver

Widget: Este objeto, para encadenar.

setMultiSelectMaxSelectedItems(maxSelectedItems)

Establece la cantidad máxima de elementos que puede seleccionar un usuario. 

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

Parámetros

NombreTipoDescripción
maxSelectedItemsIntegerEs la cantidad máxima de elementos.

Volver

SelectionInput: Este objeto, para encadenar.

setMultiSelectMinQueryLength(queryLength)

Establece la cantidad de caracteres de texto que ingresa un usuario antes de que la app consulte el autocompletado y muestre los elementos sugeridos en la tarjeta. 

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

Parámetros

NombreTipoDescripción
queryLengthIntegerEs la cantidad de caracteres de texto.

Volver

SelectionInput: Este objeto, para encadenar.

setOnChangeAction(action)

Establece un objeto Action para que se ejecute cada vez que cambie la entrada de selección.

Parámetros

NombreTipoDescripción
actionActionLa acción por realizar.

Volver

SelectionInput: Este objeto, para encadenar.

setPlatformDataSource(platformDataSource)

Establece una fuente de datos de Google Workspace. Se usa para completar elementos en un menú de selección múltiple. 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('contacts')
        .setTitle('Selected contacts')
        .setPlatformDataSource(
            CardService.newPlatformDataSource().setCommonDataSource(
                CardService.CommonDataSource.USER,
                ),
        );
 Solo está disponible para las apps de Google Chat. No está disponible para los complementos de Google Workspace.

Parámetros

NombreTipoDescripción
platformDataSourcePlatformDataSourceEs la fuente de datos.

Volver

SelectionInput: Este objeto, para encadenar.

setTitle(title)

Establece el título que se mostrará antes del campo de entrada.

Parámetros

NombreTipoDescripción
titleStringEs el título del campo de entrada.

Volver

SelectionInput: Este objeto, para encadenar.

setType(type)

Establece el tipo de esta entrada. La configuración predeterminada es CHECKBOX.

Parámetros

NombreTipoDescripción
typeSelectionInputTypeEs el tipo de selección.

Volver

SelectionInput: Este objeto, para encadenar.

setVisibility(visibility)

Establece la visibilidad del widget. El valor predeterminado es "VISIBLE".

Parámetros

NombreTipoDescripción
visibilityVisibilityEs el Visibility del widget.

Volver

Widget: El objeto, para encadenar.