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