Документация Формулы
Разделы документации

Руководство

Обзор руководства

Бизнес-процессы и задачи

Бизнес-процессы и задачи

КОНСТРУКТОР

Страницы (внешние и внутренние)

Страница — это произвольный экран, который вы собираете сами из HTML, CSS и JavaScript. Страницы бывают двух видов:

ВидЧто этоПример
Внешняя страницаОткрывается по своему адресу (URL), как обычный сайтЛендинг, форма обратной связи, публичный калькулятор
Внутренний объектЖивёт внутри системы: своя вкладка и запись в панели «Избранное»Панель кладовщика, генератор склада

Страницы создаются в Конструкторе: раздел Страницы → Добавить.

# Свойства страницы

Справа в редакторе открывается панель «Свойства страницы» (значок шестерёнки в шапке).

ПолеЧто означает
Имя страницыНазвание, которое видит пользователь
Внутренний объектГалочка. Включает режим «внутренней» страницы
ИконкаПоявляется только при включённой галочке «Внутренний объект». Подсказка: «Отображается в табе и панели «Избранное»
URL страницыПоказывается только для внешней страницы. Например /my-custom-page
Требуется авторизацияТолько для внешней страницы. Если выключено — страница доступна без входа
Публичные данные (ID через запятую)Только если авторизация выключена: список объектов, которые смогут читать посетители без входа (только чтение, с ограничением частоты). Пример: cat_123, doc_456
Внешние CSSПо одной ссылке в строке. Например https://.../style.css
Внешние JSПо одной ссылке в строке
Подключённые компонентыГалочки компонентов. Подсказка: «Код компонентов выполняется перед модулем страницы»

Внутренний объект и внешняя страница — взаимоисключающие режимы. У внутреннего объекта вместо URL и настроек доступа появляется выбор иконки.

# Редактор

Верхние вкладки редактора:

ВкладкаЧто редактируется
HTMLРазметка содержимого страницы
CSSСтили только этой страницы
JSКод страницы. Можно вести несколько «файлов» (кнопка Новый файл); при рендеринге они склеиваются в один модуль
ПросмотрПредпросмотр страницы

Кнопка Удалить (справа вверху, красная) удаляет страницу, диалог спросит:

Удалить страницу? Это действие необратимо. Вы уверены, что хотите удалить страницу «<имя>»? Всё содержимое будет утеряно.

Кнопки — Отмена и Удалить.

# Как открывается страница

КакЧто происходит
По URLПользователь переходит на адрес — система ищет страницу с таким url и показывает её
Из модуля объектаawait formApi.showPage('Имя страницы') открывает страницу в модальном окне
Как внутренний объектОткрывается вкладкой внутри системы, как обычный объект

Открытие из модуля с настройками окна:

javascript
await formApi.showPage('Генератор склада', {
  title: 'Создание склада',
  width: '900px',
  height: '700px',
  resizable: true
});

# JavaScript на странице

В коде страницы доступен formApi — тот же набор функций, что и в модулях объектов.

МетодЧто делает
showAlert(текст, настройки)Показать сообщение
showConfirm(текст)Спросить подтверждение, вернуть «да/нет»
showPage(имя, настройки, параметры)Открыть другую страницу
getContext()Получить контекст: текущий пользователь
read(ссылка)Прочитать запись
readList(тип, имя, отбор)Прочитать список
create(тип, имя, данные)Создать запись
update(ссылка, данные)Изменить запись
delete(ссылка)Удалить запись
post(имя, id) / unpost(имя, id)Провести / отменить проведение
Почта(кому, html, тема)Отправить письмо
ai(запрос)Спросить ИИ-ассистента

Недоступны (страница не привязана к объекту): getValue, setValue, setFieldState, preloader, getTabularSection.

Пример:

javascript
async function initDashboard() {
  const ctx = formApi.getContext();
  const заказы = await formApi.readList('Документ', 'Заказы', { Статус: 'Новый' });
  const container = document.getElementById('orders-container');
  if (!container) return;
  container.innerHTML = заказы.map(o => `<div>№${o.Номер} — ${o.Сумма}</div>`).join('');
}

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('load-orders')?.addEventListener('click', initDashboard);
  initDashboard();
});

# Безопасность: что вырезается

Публичная страница собирается на сервере, и её HTML проходит через очистку по белому списку. Если что-то не разрешено — оно молча удаляется.

РазрешеноЗапрещено (вырезается)
Обычные теги: div, p, h1…h6, table, a, img, списки и др.<script> внутри HTML
Элементы форм: form, label, input, select, button, textarea и др.Обработчики onclick, onchange, onsubmit и подобные
Атрибуты: id, class, name, type, value, placeholder, disabled, href, src, data-*, aria-* и др.Атрибут style и тег <style> внутри HTML
Опасные протоколы javascript:, data:text/html в ссылках

Практические следствия:

  • Обработчики навешивайте в JavaScript-коде страницы: document.getElementById('save').addEventListener('click', …). Запись onclick="..." прямо в HTML на публичной странице не сработает.
  • CSS держите во вкладке CSS, а не тегом <style> в HTML.
  • Предпросмотр в редакторе не очищает HTML, поэтому он может отличаться от реальной публичной страницы. Проверяйте настоящий URL, а не только предпросмотр.

# Порядок загрузки

При открытии страницы система подключает по порядку:

  1. глобальные стили;
  2. formApi;
  3. содержимое страницы (HTML);
  4. внешние скрипты (ваши ссылки);
  5. модуль страницы (ваш JavaScript) — он выполняется последним, поэтому элементы HTML уже находятся на странице.

# Смотрите также