Best practice

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

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

   

2. Колонки:

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

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

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

     

3. Кнопки

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

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

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

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

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

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

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

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

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

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

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

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

     

4. Кнопки

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

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

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

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

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

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

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

Формы задач

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

1. Все кнопки располагаются с выравниванием по левому краю формы

2. Сначала располагаются кнопки с отрицательной резолюцией серого цвета

3. С правого края располагаются кнопки с положительной резолюцией синего цвета

4. Если требуется, между кнопками отрицательной и положительной резолюции располагаются кнопки нейтральной резолюции серого цвета.

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

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

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

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;

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

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

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

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

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

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

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

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

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