A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.google.com/apps-script/reference/card-service/selection-input below:

Class SelectionInput | Apps Script

Skip to main content Class SelectionInput

Stay organized with collections Save and categorize content based on your preferences.

SelectionInput

An input field that allows choosing between a set of predefined options.

Supports form submission validation for SelectionInputType.DROP_DOWN and SelectionInputType.MULTI_SELECT menus only. When Action.setAllWidgetsAreRequired(allWidgetsAreRequired) is set to true or this widget is specified through Action.addRequiredWidget(requiredWidget), the submission action is blocked unless a value is selected.

Available for Google Workspace add-ons and Google Chat apps.

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);
Detailed documentation addItem(text, value, selected)

Adds a new item that can be selected.

Parameters Name Type Description text Object The text to be shown for this item. Non-string primitive arguments are converted to strings automatically. value Object The form input value that is sent via the callback. Non-string primitive arguments are converted to strings automatically. selected Boolean Whether the item is selected by default. If the selection input only accepts one value (such as for radio buttons or a dropdown menu), only set this field for one item. Return

SelectionInput — This object, for chaining.

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

Adds a new item that can be selected, for multi-select menus.

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',
        );
Parameters Name Type Description text Object The text to be shown for this item. Non-string primitive arguments are converted to strings automatically. value Object The form input value that is sent via the callback. Non-string primitive arguments are converted to strings automatically. selected Boolean Whether the item is selected by default. If the selection input only accepts one value (such as for radio buttons or a dropdown menu), only set this field for one item. startIconUri Object For multiselect menus, the URL for the icon displayed next to the item's text field. Supports PNG and JPEG files. bottomText Object For multiselect menus, a text description or label that's displayed below the item's text field. Return

SelectionInput — This object, for chaining.

setExternalDataSource(action)

Sets external data source, such as a relational data base.

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'),
        );
Parameters Name Type Description action Action The external data source. Return

SelectionInput — This object, for chaining.

setFieldName(fieldName)

Sets the key that identifies this selection input in the event object that is generated when there is a UI interaction. Not visible to the user. Required, must be unique.

Parameters Name Type Description fieldName String The name to assign to this input. Return

SelectionInput — This object, for chaining.

setMultiSelectMaxSelectedItems(maxSelectedItems)

Sets the maximum number of items that a user can select.

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',
        );
Parameters Name Type Description maxSelectedItems Integer The maximum number of items. Return

SelectionInput — This object, for chaining.

setMultiSelectMinQueryLength(queryLength)

Sets the number of text characters that a user inputs before the app queries autocomplete and displays suggested items on the card.

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',
        );
Parameters Name Type Description queryLength Integer The number of text characters. Return

SelectionInput — This object, for chaining.

setOnChangeAction(action)

Sets an Action to be performed whenever the selection input changes.

Parameters Name Type Description action Action The action to take. Return

SelectionInput — This object, for chaining.

setPlatformDataSource(platformDataSource)

Sets a data source from Google Workspace. Used to populate items in a multiselect menu.

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

Only available for Google Chat apps. Not available for Google Workspace add-ons.

Parameters Return

SelectionInput — This object, for chaining.

setTitle(title)

Sets the title to be shown ahead of the input field.

Parameters Name Type Description title String The input field title. Return

SelectionInput — This object, for chaining.

setType(type)

Sets the type of this input. Defaults to CHECKBOX.

Parameters Return

SelectionInput — This object, for chaining.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-01-30 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-01-30 UTC."],[[["SelectionInput is an input field that allows users to choose from predefined options, available for Google Workspace Add-ons and Google Chat apps."],["It supports various input types like checkboxes, radio buttons, and multi-select menus, each with specific functionalities and customization options."],["Developers can programmatically add items, set titles, and assign actions to be triggered when the selection changes, enhancing user interaction and data collection."],["Multi-select menus offer advanced features such as setting the maximum selectable items, minimum query length for autocomplete, and integration with external or platform data sources."],["SelectionInput provides a flexible and powerful way to gather user input within Google Workspace and Chat applications, streamlining workflows and enhancing user experiences."]]],["`SelectionInput` is an input field for choosing from predefined options, including checkboxes, radio buttons, and multi-select menus. It supports form validation for dropdown and multi-select types, blocking submission if no value is selected when required. Key actions include adding selectable items with `addItem` or `addMultiSelectItem`, setting a field name (`setFieldName`), defining selection limits (`setMultiSelectMaxSelectedItems`), setting an external data source (`setExternalDataSource`), specifying query length for autocomplete (`setMultiSelectMinQueryLength`), defining an action when a selection is made `(setOnChangeAction)`, and setting the display title (`setTitle`).\n"]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4