Form templates of the project are located in the div with the templates class
inside the body tag in the
Index.html
file.
When
load
method is executed, it cuts out the div with templates class from the
body and stores it in the
templates
attribute as a JQuery object.
To add a form template for an item you should add a div with the name-suffix
class in the templates div, where name is the
item_name
of the item and suffix
is the form type: view, edit, filter, param.
For example:
<div class="invoices-edit">
...
</div>
is an edit form template of the invoices item.
For a detail before its name there should be the name of its master, separated by a hyphen:
<div class="invoices-invoice_table-edit">
...
</div>
If an item doesn’t have a form template then the form template of its owner, if defined, will be used.
So the template
<div class="journals-edit">
...
</div>
will be used to create edit forms of items that Journals group owns and that do not have its own edit form template.
If, after searching this way, no template was found for an item, the template
with the default-suffix class will
be used to create a form.
So the template
<div class="default-edit">
...
</div>
will be used to create edit forms for items that have no templates defined for them and their owners.
When a new project is created the index.html already contains such templates.
Below is an example of default edit form template from index.html file:
<div class="default-edit">
<div class="form-body">
<div class="edit-body"></div>
<div class="edit-detail"></div>
</div>
<div class="form-footer">
<button type="button" id="ok-btn" class="btn expanded-btn">
<i class="icon-ok"></i> OK<small class="muted"> [Ctrl+Enter]</small>
</button>
<button type="button" id="cancel-btn" class="btn expanded-btn">
<i class="icon-remove"></i> Cancel
</button>
</div>
</div>
There are more template examples in the Form examples section.