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='default', size='regular', initial=False, disabled=False, error='', attributes={}, 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
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 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

{% 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:

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

Four elements are required:

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

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)

{% load tethys_gizmos %}

{% gizmo toggle_switch %}

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

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

4) The AJAX call in the javascript

$(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();
         }
    });

});