Страницы

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

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

Пример

<?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

Тело

Список регионов, Список источников данных, Список действий, Список хлебных крошек, Меню управляющих кнопок страницы, Список событий

Пример

<?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>

<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, Список источников данных, Список действий, Список хлебных крошек, Меню управляющих кнопок страницы, Список событий

Пример

<?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>

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
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, Список источников данных, Список действий, Список хлебных крошек, Меню управляющих кнопок страницы, Список событий

Пример

<?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>

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
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

Тело

Поисковая строка, Список регионов, Список источников данных, Список действий, Список хлебных крошек, Меню управляющих кнопок страницы, Список событий

Пример

<?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"/>

Встроенный источник данных

<datasource>

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

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

Настройки

# Значение по умолчанию аттрибута 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
generate	crud submit close	Генерация стандартных действий

Пример

<actions generate="save, close">
  <action>...</action>
  <action>...</action>
  <action>...</action>
</actions>

<action>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор действия
name	Строка	Наименование	Вычисляется по операции объекта
route	Строка	URL действия	Формируется из идентификатора действия
icon	Класс иконки	Иконка действия	Вычисляется, если `id` действия из списка стандартных действий.
hotkey	Сочетание клавиш	Горячая клавиша вызова	Вычисляется, если `id` действия из списка стандартных действий. Например, для `save` горячая клавиша `Enter`.
visible	true false	Видимость действия	true
enabled	true false	Доступность действия	true
model	resolve edit filter multi datasource	Модель, на которой выполнится действие	resolve
datasource	Ссылка на источник данных	Идентификатор источника данных для выполнения действия

Тело

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

Пример

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

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

<breadcrumbs>

Настройки

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

Тело

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

Пример

<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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
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>​

<left-right-page>​

Регионы <left> <right>​

<top-left-right-page>​

Регионы <top> <left> <right>​

<searchable-page>​

<search-bar>​

Встроенный источник данных​

<datasource>​

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

<toolbar>​

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

<actions>​

<action>​

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

<breadcrumbs>​

<crumb>​

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

<events>​

<on-change>​

Виды страниц

<simple-page>

<page>

<left-right-page>

Регионы <left> <right>

<top-left-right-page>

Регионы <top> <left> <right>

<searchable-page>

<search-bar>

Встроенный источник данных

<datasource>

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

<toolbar>

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

<actions>

<action>

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

<breadcrumbs>

<crumb>

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

<events>

<on-change>