Автозаполнение ФВД с помощью JavaScript

Автозаполнение полей ФВД — это настройка, где с помощью добавления кода JavaScript реализуется логика и правила автоматического заполнения данных в полях формы ввода данных (ФВД).

Настройка автозаполнения полей ФВД может быть полезна для упрощения и ускорения работы с формами. Например:

Можно настроить автоматическое заполнение поля «Регион» на основе организации, указанной в настройках пользователя.
Или: при создании или изменении записи в ФВД можно автоматически заполнять поле «Автор» данными пользователя, работающего с формой.

Это снижает вероятность ошибок и экономит время при вводе данных.

Настройка автозаполнения доступна только пользователям с ролью «Администратор».

Пример функции для автозаполнения поля ФВД.


/**
 * Функция-шаблонизатор для компонента типа HsTextField, которая определяет, как будут выглядеть данные для автозаполнения в поле.
 * @param {{
 *   name: string,
 *   surname: string,
 *   [key: string]: any
 * }} userData - Объект с данными пользователя, содержащий как минимум поля `name` и `surname`.
 * @returns {string} Строка, содержащая имя и фамилию пользователя.
 */
const fillTextField = (userData) => {
    return `${userData?.name} ${userData?.surname}`;
};

/**
 * Функция-шаблонизатор для компонента типа HsDateField, которая определяет, как будут выглядеть данные для автозаполнения в поле.
 * @returns {Date} Текущая дата.
 */
const fillDate = () => {
    return new Date();
};

/**
 * Функция, которая извлекает данные пользователя для автозаполнения.
 * @param {*} state - Состояние приложения, из которого извлекаются данные пользователя.
 * @returns {Object} Объект с данными пользователя или пустой объект, если данные отсутствуют.
 */
const getUserData = (state) => {
    return state.user.data ?? {};
};

/**
 * Описание правил, определяющих, какая функция будет вызвана в зависимости от типа компонента.
 * - Если тип компонента `component.type` равен `HsDateField`, выполняется условие в блоке `case 'HsDateField'`.
 * - Если тип компонента `component.type` равен `HsTextField`, выполняется условие в блоке `case 'HsTextField'`.
 * - Во всех остальных случаях выполняется блок `default`.
 */
switch (component.type) {
    case 'HsDateField':
        return isInit ? fillDate() : '01.01.01';
    case 'HsTextField':
        const fieldType = getFieldType(tables.fieldTypes, field.form_field_type_id);
        return fieldType === 'string' ?
            (isInit ? fillTextField(getUserData(state)) : 'Другое значение') :
            null;
    default:
        return null;
}

Настройка автозаполнения

При открытии формы ввода данных нажмите на кнопку «Добавить функцию».
В открывшемся окне введите название функции и код на языке JavaScript. В теле функции укажите логику обработки данных и возвращаемое значение для обновления поля, включая вспомогательные функции.
Нажмите «Сохранить» и обновите страницу.
Важно: Рекомендуем редактировать код в отдельном редакторе, потому что встроенное поле не подсвечивает синтаксические ошибки. Если допущена ошибка в запросе, автозаполнение не будет работать.
После сохранения функции перейдите в режим редактирования формы ввода данных.
Перейдите в настройки поля ввода.
Раскройте раздел «Автозаполнение», включите его и выберите нужную функцию из списка. Сохраните изменения и обновите страницу. Автозаполнение настроено.

Редактирование функции

Чтобы отредактировать существующую функцию, выберите нужную функцию, измените текст запроса, нажмите «Сохранить» и обновите страницу.

Удаление автозаполнения

Чтобы удалить настройки автозаполнения, нажмите «Удалить» в настройках функции и перезагрузите страницу.