Страницы

Тип метаданных

page

Библиотека компонентов

http://n2oapp.net/framework/config/schema/page-4.0

Настройки

# Показывать заголовок
n2o.api.page.show_title=false

Виды страниц

<simple-page>

Страница с единственным виджетом.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
name	Строка	Наименование страницы	Берётся из виджета
title	Строка	Заголовок страницы
html-title	Строка	Заголовок вкладки браузера	Наименование страницы
route	Строка	URL страницы	Формируется из идентификатора страницы
modal-size	sm lg	Размер модального окна, если страница открыта в модальном окне
show-title	true false	Показывать заголовок страницы?	false
model	resolve edit filter multi datasource	Модель данных страницы	resolve

Тело
Виджет
<breadcrumbs> - Хлебные крошки

Пример

<?xml version='1.0' encoding='UTF-8'?>
<simple-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
    name="Моя страница">
    <breadcrumbs>...</breadcrumbs>
    <form>...</form>
</simple-page>

<page>

Страница с регионами.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
src	Строка	React компонент страницы
name	Строка	Наименование страницы
title	Строка	Заголовок страницы
html-title	Строка	Заголовок вкладки браузера	Наименование страницы
route	Строка	URL страницы	Формируется из идентификатора страницы
modal-size	sm lg	Размер модального окна, если страница открыта в модальном окне
show-title	true false	Показывать заголовок страницы?	false
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve

Тело
<regions> - Регионы страницы
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
    name="Моя страница">
    <breadcrumbs>...</breadcrumbs>
    <regions>...</regions>
    <actions>...</actions>
    <toolbar>...</toolbar>
    <datasources>...</datasources>
    <events>...</events>
</page>

<regions>

Регионы страницы.

Тело
Список элементов регионов

<left-right-page>

Страница с двумя регионами.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
src	Строка	React компонент страницы
name	Строка	Наименование страницы
title	Строка	Заголовок страницы
html-title	Строка	Заголовок вкладки браузера	Наименование страницы
route	Строка	URL страницы	Формируется из идентификатора страницы
modal-size	sm lg	Размер модального окна, если страница открыта в модальном окне
show-title	true false	Показывать заголовок страницы?	false
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve

Тело
<left> - Регион слева
<right> - Регион справа
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<left-right-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
    name="Моя страница">
    <datasources>...</datasources>
    <actions>...</actions>
    <toolbar>...</toolbar>
    <left>...</left>
    <right>...</right>
</left-right-page>

<left>

<right>

Регионы для left-right-page.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
width	Строка	Ширина региона. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`

Тело
Список регионов
Список виджетов

Пример

<left width="40%">...</left>
<right width="60%">...</right>

<top-left-right-page>

Страница с тремя регионами.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
src	Строка	React компонент страницы
name	Строка	Наименование страницы
title	Строка	Заголовок страницы
html-title	Строка	Заголовок вкладки браузера	Наименование страницы
route	Строка	URL страницы	Формируется из идентификатора страницы
modal-size	sm lg	Размер модального окна, если страница открыта в модальном окне
show-title	true false	Показывать заголовок страницы?	false
scroll-top-button	true false	Показывается ли кнопка скролла в начало страницы	false
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve

Настройки

# Показывается ли кнопка скролла в начало страницы
n2o.api.page.top_left_right.scroll_top_button=false

Тело
<top> - Регион сверху
<left> - Регион слева
<right> - Регион справа
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<top-left-right-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
    name="Моя страница">
    <datasources>...</datasources>
    <actions>...</actions>
    <toolbar>...</toolbar>
    <top>...</top>
    <left>...</left>
    <right>...</right>
</top-left-right-page>

<top>

<left>

<right>

Регионы для top-left-right-page.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
width	Строка	Ширина региона. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`
fixed	true false	Зафиксирован ли регион. Фиксироваться может максимум 2 региона из 3	false
offset	Число	Отступ от верхней границы при фиксировании

Настройки

# Зафиксирован ли регион
n2o.api.page.top_left_right.region.fixed=false

Тело
Список регионов
Список виджетов

Пример

<top fixed="true" offset="100">...</top>
<left width="40%">...</left>
<right fixed="true" width="60%" offset="100">...</right>

<searchable-page>

Страница с поисковой строкой.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
src	Строка	React компонент страницы
name	Строка	Наименование страницы
title	Строка	Заголовок страницы
html-title	Строка	Заголовок вкладки браузера	Наименование страницы
route	Строка	URL страницы	Формируется из идентификатора страницы
modal-size	sm lg	Размер модального окна, если страница открыта в модальном окне
show-title	true false	Показывать заголовок страницы?	false
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve

Настройки

#Триггер вызова поиска (CHANGE, ENTER, BUTTON)
n2o.api.page.searchable.trigger=CHANGE
#Задержка поиска при CHANGE тригере
n2o.api.page.searchable.throttle-delay=1000

Тело
<search-bar> - Поисковая строка
<regions> - Регионы страницы
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<searchable-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
    name="Моя страница">
    <search-bar/>
    <regions>...</regions>
    <actions>...</actions>
    <toolbar>...</toolbar>
</page>

<search-bar>

Поисковая строка.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
class	CSS класс	Класс компонента
placeholder	Строка	Подсказка для ввода
datasource	Ссылка на источник данных	Идентификатор источника данных, в котором производится поиск	Главный виджет страницы
search-filter-id	Строка	Идентификатор фильтра		!
search-param	Строка	Параметр поиска	Идентификатор виджета + Идентификатор фильтра (table_name)

Пример

<search-bar button-label="Искать" datasource="main" search-filter-id="name"/>

Источники данных страницы

<datasources>

Тело
Источники данных

Меню управляющих кнопок

Настройки

# Значение по умолчанию аттрибута place группы кнопок в тулбаре страницы
n2o.api.page.toolbar.place=bottomRight

Пример

<page>
    <toolbar place="topLeft" generate="submit, close">
        <group>...</group>
        <button>...</button>
        <sub-menu>...</sub-menu>
    </toolbar>
</page>

Встроенные действия

<actions>

Список действий над объектом.

Тело
<action> - Действие страницы

Пример

<actions>
  <action>...</action>
  <action>...</action>
  <action>...</action>
</actions>

<action>

Действие страницы.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
id	Строка	Идентификатор действия		!

Тело
Обработчики действий

Пример

<action id="save">
  <close/>
  <invoke
    operation-id="update"
    model="edit"
    confirm="false"/>
  <open-page page-id="test"/>
</action>

Хлебные крошки

<breadcrumbs>

Настройки

# Добавление навигационной цепочки на страницу
n2o.api.page.breadcrumbs=true

Тело
<crumb> - Хлебная крошка

note

При отсутствии дочерних элементов хлебные крошки страницы будут построены в режиме по умолчанию

Пример

<breadcrumbs>
    <crumb label="Первая страница" path="/"/>
    <crumb label="Вторая страница" path="/test"/>
    <crumb label="Третья страница"/>
</breadcrumbs>

<crumb>

Хлебная крошка.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
label	Строка	Название хлебной крошки		!
path	Строка	Путь для перехода по хлебной крошке

Пример

<crumb label="Домашняя страница" path="/"/>

События страницы

<events>

События, отслеживаемые на странице.

Пример

<events>
    <on-change>...</on-change>
    <on-change>...</on-change>
</events>

Тело
<on-change> - Событие изменения модели данных

<on-change>

Событие изменения модели данных.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор события
field-id	Строка	Поле источника данных, в котором будут отслеживаться изменения	По умолчанию изменения будут отслеживаться во всех полях модели
model	resolve edit filter multi datasource	Модель источника данных, в которой будут отслеживаться изменения	resolve
datasource	Ссылка на источник данных	Источник данных, в котором будут отслеживаться изменения
action-id	Ссылка на действие страницы	Действие страницы, которое будет вызвано при изменении данных

Настройки

# Тип события <on-change> на клиенте
n2o.api.page.event.on_change.type=OnChange

Тело
Обработчики действий

Пример

<on-change datasource="ds2" field-id="name">
    <invoke>...</invoke>
    <alert>...</alert>
</on-change>

Виды страниц​

<simple-page>​

<page>​

<regions>​

<left-right-page>​

<left>​

<right>​

<top-left-right-page>​

<top>​

<left>​

<right>​

<searchable-page>​

<search-bar>​

Источники данных страницы​

<datasources>​

Меню управляющих кнопок​

<toolbar>​

Встроенные действия​

<actions>​

<action>​

Хлебные крошки​

<breadcrumbs>​

<crumb>​

События страницы​

<events>​

<on-change>​

Виды страниц

<simple-page>

<page>

<regions>

<left-right-page>

<left>

<right>

<top-left-right-page>

<top>

<left>

<right>

<searchable-page>

<search-bar>

Источники данных страницы

<datasources>

Меню управляющих кнопок

<toolbar>

Встроенные действия

<actions>

<action>

Хлебные крошки

<breadcrumbs>

<crumb>

События страницы

<events>

<on-change>