=============
create_inputs
=============

.. js:function:: create_inputs(container, options) 

**domain**: client 

**language**: javascript

Description
===========

Use ``create_inputs`` to create data-aware visual controls (inputs, cheboxes) 
for editing 
:doc:`fields <at_fields>`
of the item.

This method is usually used in the ``on_edit_form_created`` evets triggered by


The following parameters are passed to the method:

* ``container`` - an JQuery object that will contain visual controls

* ``options`` - options that specify how controls are displayed

The ``options`` parameter is an object that may have following attributes:

* ``fields`` - a list of field names, if specified, a visual control will be 
  create for each field whose name is in this list, if not specified (the 
  default) then the fields attribute of an 
  :doc:`edit_options <at_edit_options>`
  will be used (by default it lists all edit fields, specified in the 
  Administrator (Edit button for the item)),

* ``col_count`` - the number of columns that will be created for visual controls, 
  the default value is 1, 
  
* ``label_on_top``: the default value is false. If this value is false, the 
  labels are placed to the left of controls, otherwise the are created above the
  controls
  
* ``tabindex`` - if tabindex is specified, it will the tabindex of the first 
  visual control, tabindex of all subsequent controls will be increased by 1.
  
* ``autocomplete`` - the default value is false. If this attribute is set to 
  true, the autocomplete attribute of controls is set to "on"   

Before creating controls an application empties a container.

Example
=======

.. code-block:: js

    function on_edit_form_created(item) {
        item.edit_options.width = 600;
        item.create_filter_inputs(item.edit_form.find(".edit-body"), {
            fields: ['name', 'adress', 'phone', 'email'],
        });
        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();
        });
    }

See also
========

:doc:`fields <at_fields>`

:doc:`Visual editing of records </programming/interface/visual_editing>`

:doc:`Data-aware controls </programming/interface/data_controls>`

:doc:`create_edit_form <m_create_edit_form>`


