Перейти к основному содержимому

Модальная форма

Создание и управление формами в модальных окнах.

Введение​

Модальное окно — это элемент (UI), позволяющий открыть форму без необходимости пользователю покидать текущую страницу.

Использование модальных окон значительно улучшает пользовательский опыт (UX), позволяя выполнять операции CRUD (Создание, Чтение, Обновление, Удаление) без необходимости перезагружать страницу или терять контекст текущего экрана.

Netuno автоматически управляет взаимодействием с backend и внедрением необходимого HTML.

Предварительные требования​

Для реализации примеров вам потребуется:

  • Доступ к среде разработки вашего приложения Netuno.
  • Форма, правильно настроенная в панели администратора (backoffice) Netuno.
  • Базовые знания JavaScript и работы с событиями в DOM.

В следующих примерах мы будем использовать универсальную форму под названием "тест".

Если у вас возникнут вопросы по этим шагам, см.: Формы.

Базовая структура​

Создание и управление модальными окнами в Netuno централизовано в объекте netuno.modal.

Метод netuno.modal.create() создает базовую структуру модального окна в интерфейсе. Он принимает объект конфигурации со следующими свойствами:

  • name (String): Имя формы (созданной в backoffice), которая будет основой для модального окна.
  • callback (Function): Функция, выполняемая сразу после внедрения структуры модального окна в DOM (но до ее отображения); получает в качестве параметра элемент созданного модального окна.

Функция обратного вызова​

Внутри функции обратного вызова необходимо определить, каким будет состояние (режим) формы, используя встроенные функции загрузки:

  • Режим списка — netuno.loadForm(): Отображает таблицу поиска и список записей этой формы.

  • Режим редактирования/создания — netuno.loadFormEdit(): Отображает поля ввода формы. Может использоваться для вставки новой записи или редактирования существующей.

Реализация​

Ниже подробно описаны три наиболее распространенных сценария использования.

1. Режим списка​

netuno.loadForm() используется, когда вы хотите, чтобы пользователь просматривал все данные формы в виде таблицы (сетки) поиска.

netuno.modal.create({
  name: 'тест',
  callback: function (модальноеОкно) {
    // 1. Находит внутренний контейнер, предназначенный для формы
    let контейнерФормы = модальноеОкно.find('[netuno-form]');
    // 2. Внедряет список данных формы в контейнер
    netuno.loadForm(контейнерФормы); 
    // 3. Показывает модальное окно пользователю
    netuno.modal.show(модальноеОкно);
  }
});

2. Режим создания​

netuno.loadFormEdit() используется для кнопок типа "Добавить новый". Открывает пустую форму, готовую для ввода данных.

netuno.modal.create({
  name: 'тест',
  callback: function (модальноеОкно) {
    let контейнерФормы = модальноеОкно.find('[netuno-form]');
    // Загружает форму в режиме вставки (новая запись)
    netuno.loadFormEdit(контейнерФормы); 
    netuno.modal.show(модальноеОкно);
  }
});
информация

При использовании netuno.loadFormEdit() без передачи ID Netuno понимает, что вы хотите использовать "экран редактирования" с нуля. Он загружает интерфейс с пустыми полями ввода, готовыми для создания новой записи. В этом сценарии Netuno внутренне инициирует событие netuno:new.

3. Режим редактирования​

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

// Пример: редактирование записи с ID 1234
const idЗаписи = 1234; 

netuno.modal.create({
  name: 'тест',
  callback: function (модальноеОкно) {
    let контейнерФормы = модальноеОкно.find('[netuno-form]');
    // Внедряет данные записи 1234 в поля формы
    netuno.loadFormEdit(контейнерФормы, idЗаписи); 
    netuno.modal.show(модальноеОкно);
  }
});

События​

Контейнер формы ([netuno-form]) генерирует пользовательские события, сопровождающие жизненный цикл взаимодействия пользователя.

Рекомендуется использовать эти события для запуска специфической бизнес-логики вашего frontend (например, обновления таблиц в фоне, показа уведомлений и т. д.).

ТИП СОБЫТИЯОПИСАНИЕ
netuno:newГенерируется при отображении экрана создания нового элемента.
netuno:editГенерируется при отображении экрана редактирования существующего элемента.
netuno:saveГенерируется при добавлении нового элемента.
netuno:backГенерируется после нажатия кнопки возврата.
netuno:deleteГенерируется после удаления элемента.

Пример: перехват нескольких событий​

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

netuno.modal.create({
  name: 'тест',
  callback: function (модальноеОкно) {
    let контейнерФормы = модальноеОкно.find('[netuno-form]');
    
    // Отслеживание экрана вставки
    контейнерФормы.on('netuno:new', function(событие) {
       console.info("Интерфейс создания загружен.");
    });

    // Отслеживание успешного сохранения
    контейнерФормы.on('netuno:save', function(событие) {
       console.success("Запись успешно сохранена!");
       // Пример: автоматически закрыть модальное окно после сохранения
       netuno.modal.hide(модальноеОкно); 
    });

    // Отображение модального окна в режиме списка и его показ
    netuno.loadForm(контейнерФормы);
    netuno.modal.show(модальноеОкно);
  }
});

Если у вас возникнут трудности или предложения по улучшению, свяжитесь с нами. Наша команда и сообщество готовы помочь.

Удачной разработки!