Действия

Действия, меняющие состояние React компонентов и отправляющие запросы на сервер.

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

http://n2oapp.net/framework/config/schema/action-1.0

Базовые свойства

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
src	Строка	React компонент действия	Для каждого действия свои умолчания. Для <custom> атрибут обязательный

Простые действия

<a>

Действие открытия страницы браузера

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
href	Строка	Адрес URL. Возможно использование плейсхолдеров. Подробнее о формировании ссылки		!
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров в href	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров в href	Модель родительского компонента
target	self newWindow application	Сценарий открытия ссылки: self - в текущей вкладке newWindow - в новой вкладке application - в текущем приложении (без обращения к серверу)	self

Тело

<path-param> - Параметр пути
<query-param> - Параметр запроса

Пример

<a href="https://google.com" target="newWindow"/>

<action>

Настраиваемое действие

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
type	Строка	Тип Redux действия		!
close-on-success	true false	Закрыть окно после успешного выполнения действия. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошках	false
double-close-on-success	true false	Закрыть два окна после успешного выполнения действия. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошках	false
close-on-fail	true false	Закрыть окно после неудачного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошках	false
redirect-url	Строка	URL адрес, на который произойдет переход после успешного выполнения действия. Можно задавать относительный путь и плейсхолдеры, например, redirect-url="../:id"
redirect-target	self newWindow application	Сценарий открытия ссылки после успешного выполнения операции: self - в текущей вкладке newWindow - в новой вкладке application - в текущем приложении (без обращения к серверу)	self
refresh-on-success	true false	Обновить данные после успешного выполнения действия	true
refresh-datasources	Список ссылок на источники данных	Список идентификаторов источников данных (через запятую), которые необходимо обновить после успешного выполнения действия	Идентификатор источника данных родительского компонента

Тело

<payload> - Полезная нагрузка

Пример

<action type="n2o/CUSTOM_ACTION" redirect-target="application" redirect-url="/main"
        close-on-success="true" refresh-datasources="ds1,ds2"/>

<payload>

Полезная нагрузка настраиваемого действия

Атрибуты

Может содержать любые атрибуты

Пример

<payload docId="{s3guid}" formId="{formId}"/>

<alert>

Действие уведомления

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
title	Строка	Текст заголовка уведомления
text	Строка	Текст сообщения уведомления
class	CSS класс	Класс компонента уведомления
style	CSS свойство	Стиль компонента уведомления
color	primary secondary success danger warning info light dark	Цвет уведомления. Возможно использование плейсхолдеров	secondary
href	Строка	Ссылка для перехода при клике по уведомлению
close-button	true false	Наличие кнопки закрытия уведомления	true
placement	top bottom topLeft topRight bottomLeft bottomRight	Расположение уведомления	top
timeout	Строка	Длительность показа уведомления (в мс)	3000
time	Строка	Время отправки уведомления
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров атрибутов	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров атрибутов	Модель родительского компонента

Настройки

#Цвет уведомления
n2o.api.action.alert.color = secondary
#Наличие кнопки закрытия уведомления
n2o.api.action.alert.close_button = true
#Расположение уведомления
n2o.api.action.alert.placement = top
#Таймаут различных видов сообщений (в мс), после которого они пропадают
n2o.api.message.success.timeout = 3000
n2o.api.message.primary.timeout = 3000
n2o.api.message.secondary.timeout = 3000
n2o.api.message.dark.timeout = 3000
n2o.api.message.light.timeout = 3000
n2o.api.message.danger.timeout = 8000
n2o.api.message.warning.timeout = 8000
n2o.api.message.info.timeout = 8000

Пример

<alert title="title" text="{text}" placement="top" color="info"
       timeout="5000" time="2022-02-02T12:15:23" datasource="ds1"/>

<clear>

Действие очистки модели

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
datasource	Ссылка на источник данных	Идентификатор источника данных, чья модель будет очищена	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Список моделей (через запятую), которые будут очищены	Модель родительского компонента	!
close-on-success	true false	Закрыть окно после успешного выполнения действия	false

Пример

<clear model="edit"/>

<close>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
unsaved-data-prompt	true false	Показать предупреждение о наличии несохраненных данных	true
refresh	true false	Обновить источник данных родительского виджета при закрытии страницы	false

Настройки

#Обновить источник данных родительского виджета при закрытии страницы
n2o.api.action.close.refresh_on_close = false

Пример

<close unsaved-data-prompt="false"/>

<confirm>

Действие открытия окна подтверждения

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
title	String	Заголовок окна предупреждения
text	String	Текст предупреждения
type	modal popover	Тип окна предупреждения	modal
class	CSS класс	Класс окна предупреждения
style	CSS свойство	Стиль окна предупреждения
close-button	true false	Наличие закрывающего крестика	false

Настройки

#Тип окна предупреждения
n2o.api.action.confirm.mode = modal
#Наличие закрывающего крестика
n2o.api.action.confirm.close_button = false

Тело

<ok> - Кнопка подтверждения
<cancel> - Кнопка отмены

<ok> <cancel>

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
label	String	Заголовок кнопки
color	primary secondary success danger warning info light dark link	Цвет кнопки	primary
icon	Класс иконки	Иконка
class	CSS класс	Класс кнопки
style	CSS свойство	Стиль кнопки

Настройки

#Цвет кнопки подтверждения
n2o.api.action.confirm.ok_color = primary
#Цвет кнопки отмены
n2o.api.action.confirm.cancel_color = secondary

Пример

<confirm title="Подтверждение" text="Вы уверены?">
    <ok label="Да"/>
    <cancel label="Нет"/>
</confirm>

<copy>

Действие копирования данных

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
source-model	resolve edit filter multi datasource	Модель, которая будет скопирована	resolve
source-datasource	Ссылка на источник данных	Идентификатор источника данных для копирования	Идентификатор источника данных родительского компонента
source-field-id	Строка	Идентификатор копируемого поля источника	Вся модель
target-model	resolve edit filter multi datasource	Модель, в которую производится копирование	resolve
target-datasource	Ссылка на источник данных	Идентификатор источника данных, в который производится копирование. Задайте parent-datasource для ссылки на источник родительской страницы	Значение source-datasource
target-field-id	Строка	Идентификатор поля, в которое производится копирование	Вся модель
close-on-success	true false	Закрыть окно после успешного копирования данных	false
mode	merge replace add	Тип слияния данных: merge - за основу берется модель target, значения из source копируются с заменой replace - за основу берется модель source add - используется для массивов. За основу берется массив target, к нему добавляются все записи из source массива	merge

Настройки

#Закрыть окно после успешного копирования данных
n2o.api.action.copy.close_on_success = false

Пример

<copy source-field-id="id"
      target-datasource="table"
      target-field-id="dictionary.id"
      close-on-success="false"/>

<edit-list>

Действие редактирования записи списка без обращения к серверу

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
operation	create createMany update delete deleteMany	Тип операции		!
primary-key	Строка	Поле, по которому будет искаться запись при изменении/удалении	id
item-datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взята запись	Идентификатор источника данных родительского компонента
item-model	resolve edit filter multi datasource	Модель, из которой будет взята запись	Модель родительского компонента
item-field-id	Строка	Поле, из которого будет взята запись	Вся модель
datasource	Ссылка на источник данных	Идентификатор источника данных списка, который будет обновлен	Значение item-datasource
model	resolve edit filter multi datasource	Модель данных списка, которая будет обновлена	Значение item-model
list-field-id	Строка	Поле списка, которое будет обновлено	Вся модель

Настройки

#Поле, по которому будет искаться запись при изменении/удалении
n2o.api.action.edit_list.primary_key = id

Пример

<edit-list operation="update" item-datasource="docs" item-model="resolve"/>

<invoke>

Действие выполнения операции объекта

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
operation-id	Ссылка на операцию объекта	Идентификатор операции, которая будет выполнена		!
object-id	Ссылка на объект	Идентификатор объекта, содержащий выполняемую операцию
route	Строка	URL адрес действия	Формируется из идентификаторов страницы, виджета и действия
close-on-success	true false	Закрыть окно после успешного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошках	false
double-close-on-success	true false	Закрыть два окна после успешного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошках	false
close-on-fail	true false	Закрыть окно после неудачного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошках	false
message-on-success	true false	Показать сообщение об успешном выполнении операции	true
clear-on-success	true false	Очистить источник данных после успешно выполненной операции	false
message-on-fail	true false	Показать сообщение о неудачном выполнении операции	true
message-position	fixed relative	Положение сообщения: fixed - фиксированное relative - относительное	fixed
message-placement	top bottom topLeft topRight bottomLeft bottomRight	Положение сообщения при фиксации
redirect-url	Строка	URL адрес, на который произойдет переход после успешного выполнения операции. Можно задавать относительный путь и плейсхолдеры, например, redirect-url="../:id"
redirect-target	self newWindow application	Сценарий открытия ссылки после успешного выполнения операции: self - в текущей вкладке newWindow - в новой вкладке application - в текущем приложении (без обращения к серверу)	self
refresh-on-success	true false	Обновить данные после успешного выполнения действия	true
refresh-datasources	Список ссылок на источники данных	Идентификаторы источников данных (через запятую), которые необходимо обновить после успешного выполнения операции	Идентификатор источника данных родительского компонента
optimistic	true false	Включение режима optimistic запросов на сервер	false
submit-all	true false	Отправить всю форму или только те поля, которые прописаны в form-param	true
method	POST PUT DELETE	Вызываемый метод	POST

Настройки

#Включение режима optimistic запросов на сервер
n2o.api.action.invoke.optimistic = false
#Вызываемый метод
n2o.api.action.invoke.method = POST

Тело

<path-param> - Параметр пути
<form-param> - Параметр запроса
<header-param> - Параметр заголовка запроса

Пример

<invoke operation-id="update" model="edit"
        confirm="false" close-on-success="true" method="POST">
    <form-param id="..." value="..."/>
    <path-param name="..." value="..."/>
    <header-param name="..." value="..."/>
</invoke>

<print>

Действие печати

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
url	Строка	Адрес документа для печати		!
type	text pdf image	Тип документа для печати	pdf
keep-indent	true false	Сохранение отступов в документах. Актуально для типа text	false
document-title	Строка	Заголовок документа
loader	true false	Показывать модальное окно с лоадером при загрузке	false
loader-text	Строка	Текст внутри модального окна с лоадером
base64	true false	Печатать из base64	false

Настройки

#Тип документа для печати
n2o.api.action.print.document_type = pdf
#Сохранение отступов в документах
n2o.api.action.print.keep_indent = false
#Показывать модальное окно с лоадером при загрузке
n2o.api.action.print.loader = false
#Печатать из base64
n2o.api.action.print.base64 = false

Тело

<path-param> - Параметр пути
<query-param> - Параметр запроса

Пример

<print url="/files/" keep-indent="true" document-title="Document"/>

<refresh>

Действие обновления источника данных

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
datasource	Ссылка на источник данных	Идентификатор источника данных	Идентификатор источника данных родительского компонента

Пример

<refresh datasource="reports"/>

<set-value>

Действие установки значения в модель

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
source-datasource	Ссылка на источник данных	Идентификатор источника данных, из которого берется значение	Идентификатор источника данных родительского компонента
source-model	resolve edit filter multi datasource	Модель, из которой берется значение	Модель родительского компонента
target-datasource	Ссылка на источник данных	Идентификатор источника данных, в который будет записано значение	Идентификатор источника данных родительского компонента
target-model	resolve edit filter multi datasource	Модель, в которую будет записано значение	Модель родительского компонента
to	Строка	Поле, в которое будет записано значение	Вся модель
merge-mode	merge replace add	Тип слияния данных: merge - за основу берется модель target, значения из source копируются с заменой replace - за основу берется модель source add - используется для массивов. За основу берется массив target, к нему добавляются все записи из source массива	replace

Примеры

<set-value target-datasource="users" target-model="resolve" to="fullname">
    return firstName + ' ' + lastName;
</set-value>

<set-value to="clock">moment().format('hh:mm:ss')</set-value>

<submit>

Действие сохранения источника данных

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
datasource	Ссылка на источник данных	Идентификатор источника данных	Идентификатор источника данных родительского компонента

Пример

<submit datasource="ds1"/>

Действия по условию

<switch>

Переключатель действий

Атрибуты

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

Тело

<case> - Действие по условию
<default> - Действие по умолчанию

Пример

<switch value-field-id="code">
    <case value="A">
        <open-page page-id="test"/>
    </case>
    <case value="B">
        <invoke operation-id="create"/>
        <invoke operation-id="save"/>
    </case>
    <default>
        <close/>
    </default>
</switch>

<if> <else-if> <else>

<if>

Условный оператор if/else.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
test	Строка	Условие для выполнения действия оператора		!
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого берется значения для test	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель источника данных, из которой берется значения для test	Модель родительского компонента

Тело

Действия для выполнения при срабатывании условия.

<else>

Элемент <else> не имеет атрибутов.

Тело

Действия для выполнения при срабатывании условия.

<else-if>

Условный оператор else-if.

Атрибуты

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

Тело

Действия для выполнения при срабатывании условия

Пример

<button label="Сохранить с условием">
    <if test="code == 'A' &amp;&amp; type == 1">
        <invoke operation-id="save"/>
    </if>
    <else-if test="code == 'A' &amp;&amp; type == 2">
        <invoke operation-id="update"/>
        <show-modal page-id="card"/>
    </else-if>
    <else>
        <alert text="Не выполнены условия"/>
    </else>
</button>

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

Базовые свойства

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
page-id	Ссылка на страницу	Идентификатор открываемой страницы		!
page-name	Строка	Имя открываемой страницы
route	Строка	URL действия	Формируется на основе идентификаторов страницы, виджета и действия
target	application newWindow	Сценарий действия открытия страницы: newWindow - в новой вкладке application - в текущем приложении	application
refresh-datasources	Список ссылок на источники данных	Список идентификаторов источников данных, которые будут обновлены после успешного выполнения операции	Идентификатор источника данных родительского компонента
refresh-on-close	true false	Обновление источника данных после закрытия модального окна	false

Настройки

#Показать предупреждение о наличии несохраненных данных в форме
n2o.api.action.unsaved_data_prompt = false

<open-page>

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

Наименование	Тип	Описание	Значение по умолчанию
unsaved-data-prompt-on-close	true false	Предупредить о несохраненных данных на форме при закрытии страницы	false

Тело

<params> - Список параметров пути и параметров запроса
<datasources> - Список переопределений источников данных
<breadcrumbs> - Список хлебных крошек
<toolbars> - Список меню управляющих кнопок страницы
<actions> - Список действий страницы

Пример

<open-page
       page-id="employee"
       route="/open">
    <params>
        <path-param>...</path-param>
        <query-param>...</query-param>
    </params>
    <breadcrumbs>
        <crumb>...</crumb>
    </breadcrumbs>
    <datasources>
        <datasource ... />
    </datasources>
</open-page>

<show-modal>

Действие открытия модального окна

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
modal-size	sm md lg xl	Размер модального окна	lg
scrollable	true false	Будет ли модальное окно фиксированного размера, а полоса прокрутки внутри	false
has-header	true false	Наличие шапки	true
class	CSS класс	Класс компонента модального окна
style	CSS свойство	Стиль компонента модального окна
backdrop	false true static	Наличие фона модального окна и закрытие по клику на фон: false - прозрачный фон, клик по фону не закрывает модальное окно true - темный фон, клик по фону закрывает модальное окно static - темный фон, клик по фону не закрывает модальное окно	static
unsaved-data-prompt-on-close	true false	Предупредить о несохраненных данных на форме при закрытии модального окна	false

Настройки

#Размер модального окна
n2o.api.action.show_modal.size = lg
#Будет ли модальное окно фиксированного размера, а полоса прокрутки внутри
n2o.api.action.show_modal.scrollable = false
#Наличие шапки
n2o.api.action.show_modal.has_header = true
#Наличие фона модального окна и закрытие по клику на фон
n2o.api.action.show_modal.backdrop = static

Тело

<params> - Список параметров пути и параметров запроса
<datasources> - Список переопределений источников данных
<breadcrumbs> - Список хлебных крошек
<toolbars> - Список меню управляющих кнопок страницы
<actions> - Список действий страницы

Пример

<show-modal
       page-id="employee">
    <params>
        <path-param>...</path-param>
        <query-param>...</query-param>
    </params>
    <breadcrumbs>
        <crumb>...</crumb>
    </breadcrumbs>
    <datasources>
        <datasource ... />
    </datasources>
</show-modal>

<open-drawer>

Действие открытия drawer окна

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
closable	true false	Наличие крестика для закрытия drawer окна	true
backdrop	true false	Наличие фона	true
close-on-escape	true false	Закрыть окно при нажатии на Esc	true
close-on-backdrop	true false	Закрыть окно по клику на фон	true
width	Строка	Ширина окна. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px	400
height	Строка	Высота окна. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
placement	left top right bottom	Позиция окна	right
fixed-footer	true false	Фиксирование подвала (footer)	false
unsaved-data-prompt-on-close	true false	Предупредить о несохраненных данных на форме при закрытии drawer окна	false

Настройки

#Наличие крестика для закрытия drawer окна
n2o.api.action.open_drawer.closable = true
#Наличие фона
n2o.api.action.open_drawer.backdrop = true
#Закрыть окно при нажатии на Esc
n2o.api.action.open_drawer.close_on_escape = true
#Закрыть окно по клику на фон
n2o.api.action.open_drawer.close_on_backdrop = true
#Ширина окна
n2o.api.action.open_drawer.width = 400
#Позиция окна
n2o.api.action.open_drawer.placement = right
#Фиксирование подвала (footer)
n2o.api.action.open_drawer.fixed_footer = false

Тело

<params> - Список параметров пути и параметров запроса
<datasources> - Список переопределений источников данных
<breadcrumbs> - Список хлебных крошек
<toolbars> - Список меню управляющих кнопок страницы
<actions> - Список действий страницы

Пример

<open-drawer
       page-id="employee">
    <params>
        <path-param>...</path-param>
        <query-param>...</query-param>
    </params>
    <breadcrumbs>
        <crumb>...</crumb>
    </breadcrumbs>
    <datasources>
        <datasource ... />
    </datasources>
</open-drawer>

Параметры запроса

<path-param>

Параметр пути

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
name	Строка	Имя параметра		!
value	Строка	Значение параметра
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение	Модель родительского компонента

Пример

<path-param name="person_id" value="{id}" datasource="master" model="filter"/>

<query-param>

Параметр запроса

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
name	Строка	Имя параметра		!
value	Строка	Значение параметра
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение	Модель родительского компонента

Пример

<query-param name="person_id" value="{id}" datasource="master" model="filter"/>

<header-param>

Параметр заголовка запроса

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
name	Строка	Имя параметра		!
value	Строка	Значение параметра
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение	Модель родительского компонента

Пример

<header-param name="person-id" value="{id}" datasource="master" model="filter"/>

<form-param>

Параметр тела запроса

Атрибуты

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

Пример

<form-param id="person_id" value="{id}" datasource="master" model="filter"/>

Тело

Параметры запроса

Хлебные крошки страницы

<breadcrumbs>

Тело

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

Пример

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

note

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

<crumb>

Хлебная крошка страницы

Атрибуты

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

Пример

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