Страницы

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

page

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

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

Настройки

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

Виды страниц

<simple-page>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
name	Строка	Наименование страницы. Возможно использование плейсхолдеров	Значение `page-name` действия открытия страницы
title	Строка	Заголовок страницы. Возможно использование плейсхолдеров
show-title	true false	Отображение заголовка страницы	false
html-title	Строка	Заголовок вкладки браузера. Возможно использование плейсхолдеров	Значение `name` страницы
route	Строка	URL страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve
src	Строка	React компонент страницы
class	Строка	CSS класс страницы
style	Строка	СSS стиль страницы

Тело

Виджет
<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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
name	Строка	Наименование страницы. Возможно использование плейсхолдеров	Значение `page-name` действия открытия страницы
title	Строка	Заголовок страницы. Возможно использование плейсхолдеров
show-title	true false	Отображение заголовка страницы	false
html-title	Строка	Заголовок вкладки браузера. Возможно использование плейсхолдеров	Значение `name` страницы
route	Строка	URL страницы
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve
src	Строка	React компонент страницы
class	Строка	CSS класс страницы
style	Строка	СSS стиль страницы

Тело

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

Пример

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

<regions>

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

Тело

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

<left-right-page>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
name	Строка	Наименование страницы. Возможно использование плейсхолдеров	Значение `page-name` действия открытия страницы
title	Строка	Заголовок страницы. Возможно использование плейсхолдеров
show-title	true false	Отображение заголовка страницы	false
html-title	Строка	Заголовок вкладки браузера. Возможно использование плейсхолдеров	Значение `name` страницы
route	Строка	URL страницы
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve
src	Строка	React компонент страницы
class	Строка	CSS класс страницы
style	Строка	СSS стиль страницы

Тело

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

Пример

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

<left> и <right>

Регион для страницы с двумя регионами

Атрибуты

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

Тело

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

Пример

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

<top-left-right-page>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
name	Строка	Наименование страницы. Возможно использование плейсхолдеров	Значение `page-name` действия открытия страницы
title	Строка	Заголовок страницы. Возможно использование плейсхолдеров
show-title	true false	Отображение заголовка страницы	false
html-title	Строка	Заголовок вкладки браузера. Возможно использование плейсхолдеров	Значение `name` страницы
route	Строка	URL страницы
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve
src	Строка	React компонент страницы
class	Строка	CSS класс страницы
style	Строка	СSS стиль страницы
scroll-top-button	true false	Показать кнопку скролла в начало страницы	false

Настройки

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

Тело

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

Пример

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

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
name	Строка	Наименование страницы. Возможно использование плейсхолдеров	Значение `page-name` действия открытия страницы
title	Строка	Заголовок страницы. Возможно использование плейсхолдеров
show-title	true false	Отображение заголовка страницы	false
html-title	Строка	Заголовок вкладки браузера. Возможно использование плейсхолдеров	Значение `name` страницы
route	Строка	URL страницы
datasource	Ссылка на источник данных	Идентификатор источника данных страницы
model	resolve edit filter multi datasource	Модель данных страницы	resolve
src	Строка	React компонент страницы
class	Строка	CSS класс страницы
style	Строка	СSS стиль страницы

Настройки

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

Тело

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

<search-bar>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
class	Строка	CSS класс компонента
placeholder	Строка	Подсказка для ввода
datasource	Ссылка на источник данных	Идентификатор источника данных, в котором производится поиск
search-filter-id	Строка	Идентификатор фильтра		!
search-param	Строка	Параметр поиска	Значение `datasource` + '_' + Значение `search-filter-id`

Пример

<search-bar datasource="main" search-filter-id="name"/>

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

<datasources>

Тело

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

Пример

<page>
    <datasources>
        <datasource id="ds">...</datasource>
    </datasources>
</page>

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

Настройки

# Место расположения меню управляющих кнопок страницы
n2o.api.page.toolbar.place = bottomRight

Пример

<page>
    <toolbar place="topLeft">
        <group>...</group>
        <button>...</button>
        <sub-menu>...</sub-menu>
    </toolbar>
</page>

Действия, заданные на странице

<actions>

Тело

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

Пример

<actions>
    <action id="act1">...</action>
    <action id="act2">...</action>
    <action id="act3">...</action>
</actions>

<action>

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

Атрибуты

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

Тело

Список действий

Пример

<action id="save">
    <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="/"/>
<crumb label="Первая страница" path="../"/>
<crumb label="Пользователь {name}" path="/:id/open"/>

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

<events>

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

Тело

<on-change> - Событие, срабатывающее при изменении модели данных

Пример

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

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

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

Виды страниц

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