Toggle Switch

Last Updated: August 10, 2015

class tethys_sdk.gizmos.ToggleSwitch(name, display_text='', on_label='ON', off_label='OFF', on_style='primary', off_style='secondary', size='regular', initial=False, disabled=False, error='', success='', attributes=None, classes='')

Toggle switches can be used as an alternative to check boxes for boolean or binomial input. Toggle switches are implemented using the excellent Bootstrap Switch reference project.

display_text

Display text for the label that accompanies switch

Type:

str

name

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

Type:

str, required

on_label

Text that appears in the "on" position of the switch

Type:

str

off_label

Text that appears in the "off" position of the switch

Type:

str

on_style

Color of the "on" position. Either: 'default', 'info', 'primary', 'success', 'warning', or 'danger'

Type:

str

off_style

Color of the "off" position. Either: 'default', 'info', 'primary', 'success', 'warning', or 'danger'

Type:

str

size

Size of the switch. Either: 'large', 'small', or 'mini'.

Type:

str

initial

The initial position of the switch (True for "on" and False for "off")

Type:

bool

disabled

Disabled state of the switch

Type:

bool

error

Error message for form validation

Type:

str

success

Success 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

python
from tethys_sdk.gizmos import ToggleSwitch

toggle_switch = ToggleSwitch(
    display_text='Defualt Toggle',
    name='toggle1'
)

toggle_switch_styled = ToggleSwitch(
    display_text='Styled Toggle',
    name='toggle2',
    on_label='Yes',
    off_label='No',
    on_style='success',
    off_style='danger',
    initial=True,
    size='large'
)

toggle_switch_disabled = ToggleSwitch(
    display_text='Disabled Toggle',
    name='toggle3',
    on_label='On',
    off_label='Off',
    on_style='success',
    off_style='warning',
    size='mini',
    initial=False,
    disabled=True,
    error='Here is my error text'
)

context = {
    'toggle_switch': toggle_switch,
    'toggle_switch_styled': toggle_switch_styled,
    'toggle_switch_disabled': toggle_switch_disabled,
}

Template Example

python
{% gizmo toggle_switch %}
{% gizmo toggle_switch_styled %}
{% gizmo toggle_switch_disabled %}

AJAX

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

Note

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

For example:

python
{% block import_gizmos %}
    {% import_gizmo_dependency toggle_switch %}
{% endblock %}

Four elements are required:

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

python
import json

@login_required()
def toggle_ajax(request):
    """
    Controller for the datatable ajax request.
    """

    toggle_switch = ToggleSwitch(display_text='Defualt Toggle',
                                 name='toggle1')

    context = {'toggle_switch': toggle_switch}

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

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

python
{% load tethys_gizmos %}

{% gizmo toggle_switch %}

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

python
...
    UrlMap(name='toggle_ajax',
           url='app-name/toggle_ajax',
           controller='app_name.controllers.toggle_ajax'),
...

4) The AJAX call in the javascript

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

    $.ajax({
        url: 'toggle_ajax',
        method: 'GET',
        success: function(data) {
            //add DataTable  to page
            $("#toggle_div").html(data);

            //Initialize DataTable
            $("#toggle_div").find('.bootstrap-switch').bootstrapSwitch();
         }
    });

});