Модальное окно

Данный раздел содержит описание примера работы с модальным окном. Проект-расширение клиентской части Web-клиента. Содержит клиентский скрипт c функцией showModalDialog реализующей отображение ModalDialog. ModalDialogComponent — React компонент, отвечающий за представление модельного окна и его событий.

Ссылка на пример на GitHub: ModalDialog.

Пример рассчитан на версию Web-клиента 6.1 или выше.

Перечень необходимых инструментов:

Сборка и установка

  1. Откройте консоль в папке ModalDialogWebExtension и выполните команду npm install, затем npm update и в конце npm run build:prod.

  2. Скопируйте каталог SamplesOutput\Content\Modules\ModalDialogWebExtension в каталог Путь к сайту Web-клиента\Content\Modules.

  3. Перезапустите dvwebclient.

Проверка примера

  1. Запустите конструктор разметок

  2. Импортируйте разметку из файла ModalDialogLayout.xml без условий использования. При этом будет добавлена разметка в тип карточки документ, вид ДокументУД\Исходящий

  3. Задайте для разметки условия использования, поменяв также порядок разметок в условиях использования, чтобы разметка стала первой разметкой для редактирования

  4. Перезапустите dvwebclient.

  5. Откройте новый документ ДокументУД\Исходящий и нажмите кнопку Редактировать. При этом должна открыться разметка с кнопкой вызова модального окна и текстовым полем.

  6. При нажатии на кнопку ShowModalDialog отображается модальное окно, в котором присутствует текстовое поле для ввода. После ввода сообщения и нажатия на кнопку ОК, значение из этого поля копируется в текстовое поле на разметке и сохраняется в качестве имени документа.