Tethys Platform
Table Of Contents
Table Of Contents

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

});