Skip to main content

Страницы

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

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-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
modelresolve 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-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve 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-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve 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-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
scroll-top-buttontrue falseПоказывается ли кнопка скролла в начало страницыfalse
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve 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
fixedtrue falseЗафиксирован ли регион. Фиксироваться может максимум 2 региона из 3false
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-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve 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>

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

Атрибуты

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

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

Атрибуты

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

Пример

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

<action>

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

Атрибуты

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

Тело

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

Пример

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

Настройки

# Добавление навигационной цепочки на страницу
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СтрокаПоле источника данных, в котором будут отслеживаться измененияПо умолчанию изменения будут отслеживаться во всех полях модели
modelresolve 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>