Tethys Platform
Table Of Contents
Table Of Contents

Select Input

Last Updated: August 10, 2015

class tethys_sdk.gizmos.SelectInput(name, display_text='', initial=[], multiple=False, original=False, select2_options=None, options='', disabled=False, error='', attributes={}, classes='')

Select inputs are used to select values from an given set of values. Use this gizmo to create select inputs and multi select inputs. This uses the Select2 functionality.

display_text

Display text for the label that accompanies select input

Type

str

name

Name of the input element that will be used for form submission

Type

str, required

multiple

If True, select input will be a multi-select

Type

bool

original

If True, Select2 reference functionality will be turned off

Type

bool

select2_options

Select2 options that will be passed when initializing the select2.

Type

dict

options

List of tuples that represent the options and values of the select input

Type

list

initial

List of keys or values that represent the initial selected values or a string representing a singular initial selected value.

Type

list or str

disabled

Disabled state of the select input

Type

bool

error

Error message for form validation

Type

str

attributes

A dictionary representing additional HTML attributes to add to the primary element (e.g. {"onclick": "run_me();"}).

Type

dict

classes

Additional classes to add to the primary HTML element (e.g. "example-class another-class").

Type

str

Controller Example

from tethys_sdk.gizmos import SelectInput

select_input2 = SelectInput(display_text='Select2',
                            name='select2',
                            multiple=False,
                            options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                            initial=['Three'],
                            select2_options={'placeholder': 'Select a number',
                                             'allowClear': True})

select_input2_multiple = SelectInput(display_text='Select2 Multiple',
                                     name='select21',
                                     multiple=True,
                                     options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                                     initial=['Two', 'One'])

select_input2_error = SelectInput(display_text='Select2 Disabled',
                                  name='select22',
                                  multiple=False,
                                  options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                                  disabled=True,
                                  error='Here is my error text')

select_input = SelectInput(display_text='Select',
                           name='select1',
                           multiple=False,
                           original=True,
                           options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                           initial=['Three'])

select_input_multiple = SelectInput(display_text='Select Multiple',
                                    name='select11',
                                    multiple=True,
                                    original=True,
                                    options=[('One', '1'), ('Two', '2'), ('Three', '3')])


context = {
            'select_input2': select_input2,
            'select_input2_multiple': select_input2_multiple,
            'select_input2_error': select_input2_error,
            'select_input': select_input,
            'select_input_multiple': select_input_multiple,
          }

Template Example

{% gizmo select_input2 %}
{% gizmo select_input2_multiple %}
{% gizmo select_input2_error %}
{% gizmo select_input %}
{% gizmo select_input_multiple %}

AJAX

Often dynamically loading in a select input can be useful. Here is a description of how to do so with the SelectInput gizmo.

Note

In order to use this, you will either need to use a SelectInput gizmo on the main page or register the dependencies in the main html template page using the import_gizmo_dependency tag with the select_input name in the import_gizmos block.

For example:

{% block import_gizmos %}
    {% import_gizmo_dependency select_input %}
{% endblock %}

Four elements are required:

1) A controller for the AJAX call with a SelectInput gizmo.

from tethys_sdk.gizmos import SelectInput

@login_required()
def select_input_ajax(request):
    """
    Controller for the bokeh ajax request.
    """
    select_input2 = SelectInput(display_text='Select2',
                                name='select2',
                                multiple=False,
                                options=[('One', '1'), ('Two', '2'), ('Three', '3')],
                                initial=['Three'])

    context = {'select_input2': select_input2}

    return render(request, 'app_name/select_input_ajax.html', context)

2) A template for with the tethys gizmo (e.g. select_input_ajax.html)

{% load tethys_gizmos %}

{% gizmo select_input2 %}

3) A url map to the controller in app.py

...
    UrlMap(name='select_input_ajax',
           url='app_name/select',
           controller='app_name.controllers.select_input_ajax'),
...
  1. The AJAX call in the javascript

Note

You only need to call the init function if you are using select2.

$(function() { //wait for page to load

    $.ajax({
        url: 'select',
        method: 'GET',
        success: function(data) {
            // add to page
            $("#select_div").html(data);
            // initialize if using select2
            $("#select_div").find('.select2').select2();
        }
    });

});

Table Of Contents