Best practice
=============

.. _best_practice_form:

Формы справочников, дочерних элементов (table-form)
----------------------------------------------------

 1. Все элементы формы располагаются внутри контейнера. Шапка формы и кнопки  статичны, а скроллироваться могут только поля на форме. На примере справочника контрагентов:

     .. image:: _static/form_best_practice/02.png
       :width: 600
       :align: center
   
 2. Колонки:

    * Если на форме располагается от 1 до 3 полей, то они размечаются в одну колонку.

    * Если на форме 4 и более полей, то все поля на форме должны располагаться в 2 колонки. 

    * Если необходимо функциональное деление колонок, используются панели с заголовками. Колоночное деление может располагаться как внутри панели, так и панель может находиться внутри колонки

      .. image:: _static/form_best_practice/07.png
       :width: 600
       :align: center

|

      .. image:: _static/form_best_practice/03.png
       :width: 600
       :align: center

 3. Кнопки

    * располагаются снизу формы, 

    * слева по ширине 1/4 ширины формы располагается кнопка **"Отмена"** серого цвета, 

    * справа по 1/4 ширины формы располагается кнопка **"Сохранить"** синего цвета. 

    * необходимо убирать большой отступ под кнопками снизу формы.

 Пример идеального расположения и вида кнопок:

      .. image:: _static/form_best_practice/04.png
       :width: 600
       :align: center

Формы создания заявок
-----------------------

 1. Все элементы формы должны располагаться внутри контейнера. Шапка формы и кнопки должны быть статичны, а скроллироваться могут только поля на форме. На примере формы договора:

 2. Все поля на форме должны располагаться в 2 колонки. Если необходимо функциональное деление колонок, используются панели с заголовками. Панели располагаются также внутри колонок.

 3. Критерии к **панелям**:

    * Поля в панелях группируются по смыслу

    * Панель обязательно должна иметь название

    * Необходимо оптимизировать расположение панелей, чтобы пустого пространства было как можно меньше, но все поля были отформатированы по ширине и высоте, т.е. располагались таблично

      .. image:: _static/form_best_practice/03.png
       :width: 600
       :align: center

 4. Кнопки 

    * кнопки располагаются снизу формы, 

    * слева по ширине 1/4 ширины формы располагается кнопка **"Отмена"** серого цвета, 

    * справа по 1/4 ширины формы располагается кнопка **"Создать"** синего цвета. 

    * слева от кнопки **"Создать"** по ширине 1/4 ширины формы располагается кнопка **"Сохранить"** серого цвета. 

    * необходимо убирать большой отступ под кнопками снизу формы.

Пример расположения и вида кнопок: 

      .. image:: _static/form_best_practice/05.png
       :width: 600
       :align: center

 Обычно на форме задач располагается поле "Комментарий" и кнопки согласования. В зависимости от требований процесса наполнение может меняться.

Формы задач
-------------

.. _best_practice_task_form:

Требования к кнопкам:

    1. Все кнопки располагаются с выравниванием по левому краю формы.
    2. Сначала располагаются кнопки с отрицательной резолюцией серого цвета.
    3. С правого края располагаются кнопки с положительной резолюцией синего цвета.
    4. Если требуется, между кнопками отрицательной и положительной резолюции располагаются кнопки нейтральной резолюции серого цвета.

Пример формы задач:

      .. image:: _static/form_best_practice/06.png
       :width: 600
       :align: center

Использование функции Citeck.helpers.getMLValue(nameObj)
---------------------------------------------------------

Функция ``Citeck.helpers. getMLValue(nameObj)`` принимает параметр - объект с ключами, которые совпадают с ключами существующих локализаций и значениями - названиями в данных локализациях.

      .. image:: _static/form_best_practice/getMLValue_01.png
       :width: 600
       :align: center

.. code-block::

    var statuses  = _.get(data, “stats.statuses”);
    var arr = [];

    for(var i = 0; i < statuses.length; i++) {
    var val = { value: statuses[i].id, label: Citeck.helpers.getMLValue(statuses[i].name) };
    arr.push(val);
    }

    values = arr;

**Пример реализации:**

В системе выбран Русский язык – отображаются статусы на русском:

      .. image:: _static/form_best_practice/getMLValue_02.png
       :width: 600
       :align: center

В системе выбран Английский язык  – отображаются статусы на английском:

      .. image:: _static/form_best_practice/getMLValue_03.png
       :width: 600
       :align: center

Использование функции отправки основной формы
---------------------------------------------------------

В любом компоненте есть возможность вызвать сабмит основной (родительской) формы сразу после какого-то действия в дочерней форме при помощи обработки события ``instance.on('change')``.

      .. image:: _static/form_best_practice/submitForm_01.png
       :width: 600
       :align: center

.. code-block::

    instance.on('change' , function(event) {
    if (event.changed && event.changed.value) {
    instance.root.submit()
    }
    });

При спользовании ``instance.root.submit()`` есть возможность указать два необязательных параметра:

    1. Если нужно выполнить проверку или подготовить данные перед отправкой, можно определить первым аргментом функцию-колбэк, которая будет выполнять необходимые действия

    2. Вторым аргументом также можно передать опции в случае их необходимости для функции-колбэка. Опции передаются в виде объекта