Skip to main content

Действия

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

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

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

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

Атрибуты

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

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

<a>

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

Атрибуты

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

Тело

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

Пример

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

<action>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
typeСтрокаТип Redux действия!
close-on-successtrue falseЗакрыть окно после успешного выполнения действия. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошкахfalse
double-close-on-successtrue falseЗакрыть два окна после успешного выполнения действия. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошкахfalse
close-on-failtrue falseЗакрыть окно после неудачного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошкахfalse
redirect-urlСтрокаURL адрес, на который произойдет переход после успешного выполнения действия.
Можно задавать относительный путь и плейсхолдеры, например, redirect-url="../:id"
redirect-targetself newWindow applicationСценарий открытия ссылки после успешного выполнения операции:
self - в текущей вкладке
newWindow - в новой вкладке
application - в текущем приложении (без обращения к серверу)
self
refresh-on-successtrue 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СтрокаТекст сообщения уведомления
classCSS классКласс компонента уведомления
styleCSS свойствоСтиль компонента уведомления
colorprimary secondary success danger warning info light darkЦвет уведомления. Возможно использование плейсхолдеровsecondary
hrefСтрокаСсылка для перехода при клике по уведомлению
close-buttontrue falseНаличие кнопки закрытия уведомленияtrue
placementtop bottom topLeft topRight bottomLeft bottomRightРасположение уведомленияtop
timeoutСтрокаДлительность показа уведомления (в мс)3000
timeСтрокаВремя отправки уведомления
datasourceСсылка на источник данныхИдентификатор источника данных, из которого будет взято значение для плейсхолдеров атрибутовИдентификатор источника данных родительского компонента
modelresolve 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Ссылка на источник данныхИдентификатор источника данных, чья модель будет очищенаИдентификатор источника данных родительского компонента
modelresolve edit filter multi datasourceСписок моделей (через запятую), которые будут очищеныМодель родительского компонента!
close-on-successtrue falseЗакрыть окно после успешного выполнения действияfalse

Пример

<clear model="edit"/>

<close>

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

Атрибуты

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

Настройки

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

Пример

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

<confirm>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
titleStringЗаголовок окна предупреждения
textStringТекст предупреждения
typemodal popoverТип окна предупрежденияmodal
classCSS классКласс окна предупреждения
styleCSS свойствоСтиль окна предупреждения
close-buttontrue falseНаличие закрывающего крестикаfalse

Настройки

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

Тело

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

<ok> <cancel>

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelStringЗаголовок кнопки
colorprimary secondary success danger warning info light dark linkЦвет кнопкиprimary
iconКласс иконкиИконка
classCSS классКласс кнопки
styleCSS свойствоСтиль кнопки

Настройки

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

Пример

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

<copy>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
source-modelresolve edit filter multi datasourceМодель, которая будет скопированаresolve
source-datasourceСсылка на источник данныхИдентификатор источника данных для копированияИдентификатор источника данных родительского компонента
source-field-idСтрокаИдентификатор копируемого поля источникаВся модель
target-modelresolve edit filter multi datasourceМодель, в которую производится копированиеresolve
target-datasourceСсылка на источник данныхИдентификатор источника данных, в который производится копирование.
Задайте parent-datasource для ссылки на источник родительской страницы
Значение source-datasource
target-field-idСтрокаИдентификатор поля, в которое производится копированиеВся модель
close-on-successtrue falseЗакрыть окно после успешного копирования данныхfalse
modemerge 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>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
operationcreate createMany update delete deleteManyТип операции!
primary-keyСтрокаПоле, по которому будет искаться запись при изменении/удаленииid
item-datasourceСсылка на источник данныхИдентификатор источника данных, из которого будет взята записьИдентификатор источника данных родительского компонента
item-modelresolve edit filter multi datasourceМодель, из которой будет взята записьМодель родительского компонента
item-field-idСтрокаПоле, из которого будет взята записьВся модель
datasourceСсылка на источник данныхИдентификатор источника данных списка, который будет обновленЗначение item-datasource
modelresolve 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-successtrue falseЗакрыть окно после успешного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошкахfalse
double-close-on-successtrue falseЗакрыть два окна после успешного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошкахfalse
close-on-failtrue falseЗакрыть окно после неудачного выполнения операции. Закроется модальное окно, либо откроется предыдущая страница в хлебных крошкахfalse
message-on-successtrue falseПоказать сообщение об успешном выполнении операцииtrue
clear-on-successtrue falseОчистить источник данных после успешно выполненной операцииfalse
message-on-failtrue falseПоказать сообщение о неудачном выполнении операцииtrue
message-positionfixed relativeПоложение сообщения:
fixed - фиксированное
relative - относительное
fixed
message-placementtop bottom topLeft topRight bottomLeft bottomRightПоложение сообщения при фиксации
redirect-urlСтрокаURL адрес, на который произойдет переход после успешного выполнения операции.
Можно задавать относительный путь и плейсхолдеры, например, redirect-url="../:id"
redirect-targetself newWindow applicationСценарий открытия ссылки после успешного выполнения операции:
self - в текущей вкладке
newWindow - в новой вкладке
application - в текущем приложении (без обращения к серверу)
self
refresh-on-successtrue falseОбновить данные после успешного выполнения действияtrue
refresh-datasourcesСписок ссылок на источники данныхИдентификаторы источников данных (через запятую), которые необходимо обновить после успешного выполнения операцииИдентификатор источника данных родительского компонента
optimistictrue falseВключение режима optimistic запросов на серверfalse
submit-alltrue falseОтправить всю форму или только те поля, которые прописаны в form-paramtrue
methodPOST 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СтрокаАдрес документа для печати!
typetext pdf imageТип документа для печатиpdf
keep-indenttrue falseСохранение отступов в документах. Актуально для типа textfalse
document-titleСтрокаЗаголовок документа
loadertrue falseПоказывать модальное окно с лоадером при загрузкеfalse
loader-textСтрокаТекст внутри модального окна с лоадером
base64true falseПечатать из base64false

Настройки

#Тип документа для печати
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-modelresolve edit filter multi datasourceМодель, из которой берется значениеМодель родительского компонента
target-datasourceСсылка на источник данныхИдентификатор источника данных, в который будет записано значениеИдентификатор источника данных родительского компонента
target-modelresolve edit filter multi datasourceМодель, в которую будет записано значениеМодель родительского компонента
toСтрокаПоле, в которое будет записано значениеВся модель
merge-modemerge 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Ссылка на источник данныхИдентификатор источника данных, из которого будет взято значениеИдентификатор источника данных родительского компонента
modelresolve 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Идентификатор источника данных родительского компонента
modelresolve 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 действияФормируется на основе идентификаторов страницы, виджета и действия
targetapplication newWindowСценарий действия открытия страницы:
newWindow - в новой вкладке
application - в текущем приложении
application
refresh-datasourcesСписок ссылок на источники данныхСписок идентификаторов источников данных, которые будут обновлены после успешного выполнения операцииИдентификатор источника данных родительского компонента
refresh-on-closetrue falseОбновление источника данных после закрытия модального окнаfalse

Настройки

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

<open-page>

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

НаименованиеТипОписаниеЗначение по умолчанию
unsaved-data-prompt-on-closetrue 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-sizesm md lg xlРазмер модального окнаlg
scrollabletrue falseБудет ли модальное окно фиксированного размера, а полоса прокрутки внутриfalse
has-headertrue falseНаличие шапкиtrue
classCSS классКласс компонента модального окна
styleCSS свойствоСтиль компонента модального окна
backdropfalse true staticНаличие фона модального окна и закрытие по клику на фон:
false - прозрачный фон, клик по фону не закрывает модальное окно
true - темный фон, клик по фону закрывает модальное окно
static - темный фон, клик по фону не закрывает модальное окно
static
unsaved-data-prompt-on-closetrue 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 окна

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
closabletrue falseНаличие крестика для закрытия drawer окнаtrue
backdroptrue falseНаличие фонаtrue
close-on-escapetrue falseЗакрыть окно при нажатии на Esctrue
close-on-backdroptrue falseЗакрыть окно по клику на фонtrue
widthСтрокаШирина окна. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px400
heightСтрокаВысота окна. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
placementleft top right bottomПозиция окнаright
fixed-footertrue falseФиксирование подвала (footer)false
unsaved-data-prompt-on-closetrue 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Ссылка на источник данныхИдентификатор источника данных, из которого будет взято значениеИдентификатор источника данных родительского компонента
modelresolve edit filter multi datasourceМодель, из которой будет взято значениеМодель родительского компонента

Пример

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

<query-param>

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

Атрибуты

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

Пример

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

<header-param>

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

Атрибуты

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

Пример

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

<form-param>

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

Атрибуты

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

Пример

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

Тело

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

Тело

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

Пример

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

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

<crumb>

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

Атрибуты

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

Пример

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