Quick Start

Template Gizmos are building blocks that can be used to create beautiful interactive controls for web apps. Using gizmos, developers can quickly add date-pickers, plots, and maps to their templates with minimal coding. This app provides examples and links to the documentation developers need to get started using Gizmos.

What does "minimal coding" mean? Take a look at the following example. Let's say you want to include a date picker in your template using a gizmo. First, import the DatePickerOptions class and initialize a new object with the configuration options for the date picker (more on that later) in your view/controller for the template and add it to the context dictionary:

from tethys_gizmos.gizmo_options import DatePickerOptions

def my_view(request):
    date_picker_options = DatePickerOptions(
        name='date1',
        display_text='Date',
        autoclose=True,
        format='MM d, yyyy',
        start_date='2/15/2014',
        start_view='decade',
        today_button=True,
        initial='February 15, 2014'
    )

    context = {
        'date_picker_options': date_picker_options
    }

    return render(request, 'path/to/my/template.html', context)

Next, open the template you intend to add the gizmo to and load the tethys_gizmos library. Be sure to do this somewhere near the top of your template—before any gizmo occurrences. This only needs to be done once for each template that uses gizmos.

{% load tethys_gizmos %}

Then, use the gizmo tag to insert the date picker anywhere in your template. Pass the the options dictionary that you passed to the template from your view as arguments:

{% gizmo date_picker_options %}

All together your template may look something like this:

{% extends "tethys_apps/app_base.html" %}
{% load static tethys_gizmos %}

{%  block app_content %}
  {% gizmo date_picker_options %}
{%  endblock %}

How it Works

Gizmos are composed of HTML, JavaScript, and CSS. When the template is rendered, each of the gizmo tags are replaced by the HTML that is needed to render the gizmo. All gizmos accept a Python dictionary with options for configuring the gizmo. This page provides live demos of each gizmo with links to code examples and explanations of the options. The tethys_gizmos library must be loaded at the top of the template to provide the gizmo template tag.