Form Helpers

Opal comes with a selection of templatetags that can help you with the repetitive task of generating Bootstrap and Opal compatible markup for your forms.

{% checkbox ... %}

Generates a checkbox


{% datepicker ... %}

Generates a datepicker


{% datetimepicker ... %}

Generates a date time fields, a date field on one line and a time field on another


{% input ... %}

The input template tag generates you a form input that will play nicely with Opal's styling.


Inputs with units

We also often want to display the unit of a particular field to help our users - consistent styling for this is available by using the unit argument e.g.

{% input label="Weight" model="editing.weight" unit="kg" %}

{% radio ... %}

Generates an inline radio input


{% select ... %}

Generates an inline select input


{% textarea ... %}

Generates an inline textarea input


Inference from subrecord fields

A very common pattern is to render form fields that relate to fields of Subrecords. Template tags will use this to infer useful information. The display name will be set to the verbose_name and the the ng-model will be inferred.

If its required, it will set as a required field. If its a CharField with a max length it will set a validation rule accordingly.

If the field is a free text or foreign key we will infer the lookup list.

Alternatively if the field has choices attatched to it we will infer the choices into the field.

{% input field="Allergies.drug" %}

Note unlike the traditional choices implementation only the last value of the choices is used and saved to the database

  Colours = (
    ('P', 'Purple'),
    ('R', 'Red'),

What is displayed to the user and saved to the database is 'Purple' or 'Red' respectively.

All inferences can be overridden by declarations in the template tag. For Example

{% input field="Allergies.drug" label="Something else" %}

Will render the input with a different label.

{% static ... %}

Generates a bootstrap Static div (for displaying data from fields as uneditable but formatted nicely with appropriate styles).

Takes one positional argument, a string representing the subrecord field path.

{% static "" %}
<!-- Renders as -->
<div class="form-group">
  <label class="control-label col-sm-3">
  <p class="form-control-static col-sm-8">
    [[ ]]

{% icon "icon-name" %}

Renders a Bootstrap style Icon tag. If the icon starts with fa or glyphicon then we will insert the preceding fa.

{% icon "fa-user-md" %}
<i class="fa fa-user-md"></i>

{% icon "cusom-icon"}
<i class="custom-icon"></i>