Основное

Сгенерированный интерфейс — это обычная веб-страница. Многие возможности подключаются прямо в разметке через data-* атрибуты (их проставляет конструктор), а поведение страницы задаётся объектом конфигурации. Здесь — что это за атрибуты и какие параметры есть у интерфейса.

Атрибуты разметки

Полезно понимать, что делают data-* атрибуты, даже если их расставляет конструктор.

Переводы

Текст элемента и его атрибуты можно связать с ключами локализации:

<span data-i18n="startWorkflow">Запустить</span>
<input data-i18n="searchPlaceholder" data-i18n-attr="placeholder">

При смене языка такие элементы обновляются автоматически.

Действия рабочего процесса

Кнопки управления сценарием размечаются через data-action:

<button data-action="start-workflow">Запустить</button>
<button data-action="stop-workflow">Остановить</button>
<button data-action="reset-workflow">Сбросить</button>

Интерфейс сам обрабатывает нажатия: собирает данные формы, запускает или останавливает сценарий, сбрасывает поля.

Подсказки

<button data-tooltip="Нажмите, чтобы начать" data-tooltip-position="top">?</button>

Выбор файла (в настольном приложении)

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

Поля вне формы

Элементы ввода, не входящие в <form>, помечаются как источники данных, чтобы их значения тоже попадали в сценарий при запуске.

Конфигурация интерфейса

Настройки интерфейса хранятся в объекте window.interfaceConfig. Его заполняет конструктор, но вы можете прочитать значения или задать их до инициализации. Ниже — параметры, полезные разработчику:

Пример:

window.interfaceConfig = {
  theme: 'dark',
  language: 'ru',
  resources: {
    apiUrl: 'https://api.example.com'
  },
  eventHandlers: {
    'workflow:start': (payload) => console.log('Старт', payload.data),
    'workflow:stop':  ()        => console.log('Стоп')
  }
};