Действия

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

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

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

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

Атрибуты

Наименование	Тип	Описание
src	Строка	Тип Redux действия

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

<a>

Действие открытия ссылки

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
href	Строка	Адрес URL. Возможно использование плейсхолдеров. Подробнее о формировании ссылки		!
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров в href	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров в href	Модель родительского компонента
target	newWindow self application	Сценарий открытия ссылки: newWindow - в новой вкладке (относительный путь добавляется после хоста) self - в текущей вкладке (относительный путь добавляется после хоста) 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-target	newWindow self application	Сценарий открытия ссылки: newWindow - в новой вкладке (относительный путь добавляется после хоста) self - в текущей вкладке (относительный путь добавляется после хоста) 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	Строка	Текст сообщения. Возможно использование плейсхолдеров
color	primary secondary success danger warning info light dark	Цвет уведомления. Возможно использование плейсхолдеров	secondary
placement	top bottom topLeft topRight bottomLeft bottomRight	Расположение уведомления	top
href	Строка	URL перехода при клике по уведомлению
time	Строка	Время отправки уведомления
timeout	Строка	Длительность показа уведомления (в мс)	3000
close-button	true false	Наличие кнопки закрытия	true
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров атрибутов	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров атрибутов	Модель родительского компонента
class	Строка	CSS класс уведомления
style	Строка	CSS стиль уведомления

Настройки

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

Пример

<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
close-button	true false	Наличие закрывающего крестика	false
class	Строка	CSS класс окна подтверждения
style	Строка	CSS стиль окна подтверждения

Настройки

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

Тело

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

<ok> <cancel>

Атрибуты

Наименование	Тип	Описание
label	Строка	Заголовок кнопки
color	primary secondary success danger warning info light dark link	Цвет кнопки
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-datasource	Ссылка на источник данных	Идентификатор источника данных для копирования	Идентификатор источника данных родительского компонента
source-model	resolve edit filter multi datasource	Модель, которая будет скопирована	resolve
source-field-id	Строка	Идентификатор копируемого поля источника	Вся модель
target-datasource	Ссылка на источник данных	Идентификатор источника данных, в который производится копирование	Значение source-datasource
target-model	resolve edit filter multi datasource	Модель, в которую производится копирование	resolve
target-field-id	Строка	Идентификатор поля, в которое производится копирование	Вся модель
mode	merge replace add	Тип слияния данных: merge - за основу берется модель target, значения из source копируются с заменой replace - за основу берется модель source add - используется для массивов. За основу берется массив target, к нему добавляются все записи из source массива	merge
close-on-success	true false	Закрыть окно после успешного копирования данных	false
validate	true false	Срабатывание валидации полей при выполнении действия	true

Настройки

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

Пример

<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 адрес операции	Формируется из идентификатора действия
method	POST PUT DELETE	Выполняемый HTTP метод	POST
submit-all	true false	Отправить всю форму или только те поля, которые прописаны в form-param	true
optimistic	true false	Включение режима optimistic запросов на сервер	false
close-on-success	true false	Закрыть окно\страницу после успешного выполнения операции. Закроется окно, либо откроется предыдущая страница в хлебных крошках	false
double-close-on-success	true false	Закрыть два окна\страницы после успешного выполнения операции. Закроются два окна, либо откроется страница на два уровня назад в хлебных крошках	false
close-on-fail	true false	Закрыть окно\страницу после неудачного выполнения операции. Закроется окно, либо откроется предыдущая страница в хлебных крошках	false
clear-on-success	true false	Очистить источник данных после успешного выполнения операции	false
message-on-success	true false	Показать сообщение после успешного выполнения операции	true
message-on-fail	true false	Показать сообщение после неудачного выполнения операции	true
message-position	fixed relative	Положение сообщения: fixed - фиксированное (поверх страницы) relative - относительное (над виджетом)	fixed
message-placement	top bottom topLeft topRight bottomLeft bottomRight	Положение сообщения при фиксации	top
use-fail-out	true false	Использование параметров <fail-out/> после неудачного выполнения операции	true
redirect-url	Строка	URL, на который произойдет переход после успешного выполнения операции
redirect-target	newWindow self application	Сценарий открытия ссылки: newWindow - в новой вкладке (относительный путь добавляется после хоста) self - в текущей вкладке (относительный путь добавляется после хоста) application - в текущей вкладке (относительный путь добавляется после #)	self
refresh-on-success	true false	Обновить данные после успешного выполнения операции	true
refresh-datasources	Список ссылок на источники данных	Список идентификаторов источников данных (через запятую), которые необходимо обновить после успешного выполнения действия	Идентификатор источника данных родительского компонента

Настройки

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

Тело

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

Пример

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

<on-fail>

Действие, выполняемое в случае операции, завершившейся ошибкой

Тело

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

Пример

<button label="Сохранить">
    <invoke operation-id="create"/>
    ...
    <alert text="Данные сохранены" color="success"/>
    <on-fail>
        <alert text="Сохранение завершилось ошибкой" color="danger"/>
        <close/>
    </on-fail>
</button>

<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/document.pdf" document-title="Заявление"/>

<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
validate	true false	Срабатывание валидации полей при выполнении действия	true

Настройки

# Срабатывание валидации полей при выполнении действия
n2o.api.action.set_value.validate = true

**Тело**

JS выражение

**Примеры**

```xml
<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="ds"/>

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

<switch>

Оператор switch

Атрибуты

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

Тело

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

Пример

<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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
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-on-close	true false	Обновить данные после закрытия модального окна	false
refresh-datasources	Список ссылок на источники данных	Список идентификаторов источников данных, которые будут обновлены	Идентификатор источника данных родительского компонента
unsaved-data-prompt-on-close	true false	Предупредить о несохраненных данных на форме при закрытии страницы	false

Настройки

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

<open-page>

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

Тело

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

Пример

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

<show-modal>

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

Атрибуты

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

Настройки

#Размер модального окна
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>
    <datasources>...</datasources>
    <breadcrumbs>...</breadcrumbs>
    <toolbars>...</toolbars>
    <actions>...</actions>
</show-modal>

<open-drawer>

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

Атрибуты

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

Настройки

#Ширина окна
n2o.api.action.open_drawer.width = 400
#Позиция окна
n2o.api.action.open_drawer.placement = right
#Наличие крестика для закрытия 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
#Фиксирование подвала (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>
    <datasources>...</datasources>
    <breadcrumbs>...</breadcrumbs>
    <toolbars>...</toolbars>
    <actions>...</actions>
</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="personId" value="{id}" datasource="master" model="filter"/>