2.4.1. Добавление динамических элементов на форму создания

Добавим на форму создания динамические элементы:

• ограничим ввод даты:

o нельзя указать дату начала отпуска ранее, чем текущая дата;
o нельзя указать дату окончания отпуска ранее, чем дата начала;​

• будем выводить описание отпуска как инструкцию к форме.

Чтобы добавить динамические элементы, воспользуемся дизайнером интерфейсов. Для этого в настройках формы добавим форму создания элемента.

Настройки формы​

Создание формы​

Создание формы​

После этого откроется дизайнер интерфейсов.

​

Форма создания в дизайнере интерфейсов​

Виджет Стандартная форма элемента содержит в себе те свойства приложения, которые добавлены на форму создания в её настройках. Удалим этот виджет и добавим свойства по отдельности. Они расположены на боковой панели на вкладке Свойства.

Свойства приложения в дизайнере интерфейсов​

Свойства, добавленные на форму создания​

Ограничение ввода дат

Ограничить ввод дат можно с помощью сценария.

Важно

Сценарий — это код, который описывает поведение виджета в тех или иных условиях.
Сценарии могут быть:

• Клиентскими — выполняются в браузере пользователя;
• Серверными — обрабатываются на сервере ELMA365;
• Смешанными — сценарий, который выполняется на стороне клиента и вызывает серверный метод.

Серверные сценарии выполняются без ограничения доступа к элементам приложения, клиентские — с ограничением. Например, если в каком-либо приложении ограничен доступ к элементам, то при попытке загрузить элемент, к которому у текущего пользователя нет доступа, клиентский код вернёт ошибку, а серверный выполнится успешно. Аналогично при получении списка элементов, на стороне Клиента вернутся только те, к которым есть доступ, на стороне Сервера — все.

Как правило, сценарии для виджетов не требуют больших мощностей для реализации, и мы рекомендуем писать их на стороне Клиента.

Работа со сценариями осуществляется на языке TypeScript в удобной среде разработки в дизайнере интерфейсов на вкладке Сценарии.

Полное описание возможностей сценариев и примеров можно найти в TypeScript SDK.

Перейдём в настройки свойства Дата начала. На вкладке События создадим сценарий на стороне Клиента для события при изменении значения. Такой сценарий будет выполняться, когда пользователь изменит значение в поле Дата начала.

​

Создание сценария​

Нажмём на кнопку Открыть и перейдём в редактор сценариев. Напишем сценарий, который ограничивает ввод Даты окончания.

Сценарий на изменение значения даты начала​

Код:

async function change_startdate(): Promise<void> {

    if (Context.data.date_start) // если заполнена Дата начала
    {
        Context.fields.date_end.data.setFilter((self, global) => global.and( // установить фильтр для Даты окончания
        self.gt(Context.data.date_start!), // значение должно быть больше Даты начала
        ));
    }
    else
    {
        Context.fields.date_end.data.clearFilter(); // сбросить фильтр
    }
}

Чтобы ограничить ввод даты начала по текущей дате, необходимо использовать сценарий, который вызывается при загрузке формы. Для этого используется системная функция onInit().

Сценарий «onInit»​

Код:

async function onInit(): Promise<void> {

    Context.fields.date_start.data.setFilter((self, global) => global.and( // установить фильтр для Даты начала
        self.gte(new Datetime()), // значение должно быть больше и равно текущей дате
        ));
}

Опубликуем форму и посмотрим, как она выглядит для пользователя:

Дата начала ограничена по текущей дате


Дата окончания ограничена по дате начала​

Добавление инструкции

Добавим инструкцию для пользователя, которая будет загружаться из описания Вида отпуска. Для этого откроем в дизайнере интерфейсов форму создания и добавим свойство Описание в контекст формы.

Важно

Контекст формы — это служебные переменные, которые используются для её настройки. Они нужны для написания сценариев, определяющих поведение формы, а также для получения информации из приложений, загрузки файлов и т. д.

Создание свойства в контексте формы​

Теперь перейдём в шаблон формы и настроим виджет Инструкция:

Создание свойства в контексте формы​

Свяжем свойство Описание с текстом инструкции:

Настройка виджета «Инструкция»​

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

Создание сценария​

Сценарий​

Код:

async function change_leave_type(): Promise<void> {
    if (Context.data.leave_type) // если заполнен Вид отпуска
    {
        const leaveType = await Context.data.leave_type.fetch(); // получить данные элемента приложения Вид отпуска
        ViewContext.data.description = leaveType.data.description; // заполнить описание в контексте формы
    }
    else
    {
        ViewContext.data.description = 'Выберите вид отпуска.';
    }
}

Опубликуем форму и посмотрим, как она выглядит:

Инструкция на форме создания​

Изменённая инструкция на форме создания​

Спасибо за оставленные комментарии. Мы обновили Краткое руководство по созданию Low-code решений. В эту статью добавили ссылку на детальное описание работы с шаблоном формы в дизайнере интерфейсов.