=============
Form examples
=============
Currently, the Framework uses `Bootstrap 2`_ with a simple and easy to use grid
system that uses 12 columns and allows you to create any kind of layouts.
It is responsive and have many components, such as dropdowns,
dropdown buttons, button groups, navs, navbars, tabs, breadcrumbs, badges,
progress bars, etc.
.. _`Bootstrap 2`: http://getbootstrap.com/2.3.2/index.html
Default edit form template
--------------------------
This template is used for creating edit forms, if an item and its owner don't
have their own edit form template
.. code-block:: html
The event below is located in the task client module and is triggered
for any item whose edit form has just been created.
It uses the
:doc:`create_inputs `
method to create inputs in the div with class "edit-body". But before that it
checks if ``init_inputs`` function is defined in the item's client module, that
can be used to specify the options parameter of the method.
It uses the
:doc:`create_inputs `
method to create input controls in the div with the "edit-body" class.
But before that, it checks whether the init_inputs function is defined in the
client module of the element, which can be used to specify the method options.
It then assigns the jQuery events to the OK and Cancel buttons.
.. code-block:: js
function on_edit_form_created(item) {
var options = {
col_count: 1
};
if (item.init_inputs) {
item.init_inputs(item, options);
}
item.create_inputs(item.edit_form.find(".edit-body"), options);
item.edit_form.find("#cancel-btn").on('click.task', function(e) {
item.cancel_edit(e)
});
item.edit_form.find("#ok-btn").on('click.task', function() {
item.apply_record()
});
}
The edit form for **Albums** catalog looks as follows:
.. image:: /programming/_images/default_edit_form_template.png
:align: center
:alt: Default edit form template
.. note::
If there are no buttons with the corresponding ids,
the code above does not generate exceptions.
If you want to overwrite JQuery events for buttons declared in the client
module of the task, in the corresponding event of the client module of the
item, you can do this using the jQuery ``off`` method:
.. code-block:: js
item.edit_form.find("#ok-btn")
.off('click.task')
.on('click', function() { some_other_function(item) });
If there is no corresponding container in the form, the ``create_inputs``
method does nothing.
Edit form template with tabs
----------------------------
This example uses the Boostrap tabs:
.. code-block:: html
The following event handler is declared in the **Customers** item client module.
It creates input controls for panes, corresponding to tabs:
.. code-block:: js
function on_edit_form_created(item) {
item.edit_form.find('#customer-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
item.create_inputs(item.edit_form.find("#cust-name"),
{fields: ['firstname', 'lastname', 'company', 'support_rep_id']}
);
item.create_inputs(item.edit_form.find("#cust-address"),
{fields: ['country', 'state', 'address', 'postalcode']}
);
item.create_inputs(item.edit_form.find("#cust-contact"),
{fields: ['phone', 'fax', 'email']}
);
}
.. image:: /programming/_images/edit_form_template_with_tabs.png
:align: center
:alt: Edit form template with tabs
Edit form template using grid layout
------------------------------------
This example uses the Boostrap grid system:
.. code-block:: html
.. code-block:: js
function on_edit_form_created(item) {
item.edit_options.width = 900;
item.create_inputs(item.edit_form.find("#edit-top"), {fields: ['name']});
item.create_inputs(item.edit_form.find("#edit-left"), {
fields: ['album', 'artist', 'composer', 'media_type'],
label_width: 90
});
item.create_inputs(item.edit_form.find("#edit-right"), {
fields: ['genre', 'milliseconds', 'bytes', 'unitprice'],
label_width: 90
});
}
.. image:: /programming/_images/edit_form_tepmlate_layout.png
:align: center
:alt: Edit form template using grid layout
Catalogs view form template
-----------------------------------
In this example there is a div with class "form-header".
The element with id "form-title" is used in the
:doc:`on_view_form_created `
method of the task to display the caption of an item and assign to it a JQuery
onclick event to execute view method to recreate the view form.
The elements with id "selected-div" and "search-form" are used in the
:doc:`on_view_form_created ` of the
catalogs group to display current value of a lookup field when the right button
is clicked to select a value and to implement search functionality of catalogs
correspondingly
The div with class "view-table" is used in the
:doc:`on_view_form_created `
event handler of the task to create a table to display item's data by using
:doc:`create_table `
method:
.. code-block:: js
if (item.view_form.find(".view-table").length) {
if (item.init_table) {
item.init_table(item, table_options);
}
item.create_table(item.view_form.find(".view-table"), table_options);
item.open(true);
}
The div with id "report-btn" is used in the
:doc:`on_view_form_created `
event handler of the task to fill dropdown button menu items with reports defined
in the
:doc:`Reports Dialog `
of the item (if they exist).
.. code-block:: html
.. image:: /programming/_images/catalogs_view_teplate.png
:align: center
:alt: Catalogs view form template
View form template with buttons at the top
------------------------------------------
In this example the form footer div is removed and buttons are placed to the
form header div. The **Actions** dropdown button is created. The code is the same
as in previous example.
.. code-block:: html
.. image:: /programming/_images/view_template_btns_top.png
:align: center
:alt: View form template with buttons at the top
View form template with detail
------------------------------
In this example the div with class "view-table" is removed and added two
divs "view-master" and "view-detail" tables for master and detail items
are created in the
:doc:`on_view_form_created `
event handler declared in the client module of **Invoices** journal:
.. code-block:: js
function on_view_form_created(item) {
var height = $(window).height() - $('body').height() - 200 - 10;
if (height < 200) {
height = 200;
}
item.filters.invoicedate1.value = new Date(new Date().setYear(new Date().getFullYear() - 1));
item.create_table(item.view_form.find(".view-master"), {
height: height,
sortable: true,
show_footer: true,
row_callback: function(row, it) {
var font_weight = 'normal';
if (it.total.value > 10) {
font_weight = 'bold';
}
row.find('td.total').css('font-weight', font_weight);
}
});
item.invoice_table.create_table(item.view_form.find(".view-detail"), {
height: 200 - 4,
dblclick_edit: false,
column_width: {'track': '25%', 'album': '25%', 'artists': '10%'}
});
item.open(true);
}
.. code-block:: html
.. image:: /programming/_images/invoices_view_form_tempate.png
:align: center
:alt: Invoices view form template