Skip to main content

Поля ввода

Компоненты ввода и вывода в полях виджета.

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

http://n2oapp.net/framework/config/schema/control-3.0

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
idСтрокаИдентификатор поля!
helpСтрокаПодсказка по полю. Поддерживаются плейсхолдеры условия.
labelСтрокаЗаголовок поля. Поддерживаются плейсхолдеры условия.Из наименования соответствующего поля выборки виджета
label-classСтрокаКласс для заголовка поля
no-labeltrue falseНе отображать заголовок. Поддерживаются плейсхолдеры условия.false
no-label-blocktrue falseНе отображать блок с заголовком. Поддерживаются плейсхолдеры условия.false
srcСтрокаReact компонент поля
classCSS классКласс компонента поля
styleCSS свойствоСтиль компонента поля
placeholderСтрокаПодсказка для ввода. Поддерживаются плейсхолдеры условия.
requiredtrue falseОбязательность поля. Поддерживаются плейсхолдеры условия.false
visibletrue falseВидимость поля. Поддерживаются плейсхолдеры условия.true
enabledtrue falseДоступность поля. Поддерживаются плейсхолдеры условия.true
descriptionСтрокаОписание поля. Поддерживаются плейсхолдеры условия.
copiedtrue falseКопируется ли это поле при default-values-mode="merge"true
depends-onСтрокаЗависимость от полей
paramСтрокаПараметр в URL для значение по умолчанию
ref-modelresolve edit filter multi datasourceМодель, в которой будет инициализация значенияresolve
ref-datasourceСсылка на источник данныхСсылка на источник данных, в котором будет инициализация значения. Задайте parent-datasourse для ссылки на источник родительской страницыИсточник данных текущего виджета
ref-field-idСтрокаСсылка на поле, для инициализация значения

Настройки

# Не отображать заголовок
n2o.api.control.no_label = false
# Не отображать блок с заголовком
n2o.api.control.no_label_block = false

Тело

<dependencies> - Зависимости компонента
<validations> - Валидации компонента
<submit> - Действие обновления компонента
<toolbar> - Меню управляющих кнопок

Простые компоненты

Базовые свойства простых компонентов:

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
default-valueСтрокаЗначение по умолчанию простого компонента

<alert>

Компонент вывода оповещения

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
titleСтрокаТекст заголовка уведомления
textСтрокаТекст уведомления
classCSS классКласс компонента уведомления
styleCSS свойствоСтиль компонента уведомления
colorprimary secondary success danger warning info light darkЦвет отображения уведомленияsecondary
hrefСтрокаСсылка для перехода при клике по уведомлению
close-buttontrue falseНаличие кнопки закрытия уведомленияfalse

Настройки

# Цвет уведомления
n2o.api.control.alert.color=secondary
# Наличие кнопки закрытия уведомления
n2o.api.control.alert.close_button=false

Пример

<alert title="title" text="text" style="width:90%" class="css-on-field"
close-button="true" color="info"
href="http://example.org"/>

<button>

Кнопка

<checkbox>

Компонент ввода флажок

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
uncheckednull falseЗначение при не выбранном состоянииnull

Настройки

# Значение при не выбранном состоянии
n2o.api.control.checkbox.unchecked=null

Пример

<checkbox id="vip" unchecked="false"/>

<code>

Компонент для просмотра программного кода с подсветкой синтаксиса

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
languagesql xml javascript groovy javaЯзык кода
themelight darkЦвет фонаlight
show-line-numberstrue falseОтображение нумерации строкtrue
starting-line-numberЧислоЗначение, с которого будет производиться нумерация1
hide-buttonstrue falseСкрытие кнопокfalse

Настройки

# Цвет фона
n2o.api.control.code.theme=light
# Отображение нумерации строк
n2o.api.control.code.show_line_numbers=true
# Значение, с которого будет производиться нумерация
n2o.api.control.code.starting_line_number=1
# Скрытие кнопок
n2o.api.control.code.hide_buttons=false

Тело
Программный код.

Пример

<code show-line-number="true" starting-line-number="1" theme="light" language="java">
if (a == b)
return true;
</code>

<code-editor>

Компонент редактирования кода

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
languagesql xml html javascript groovy javaЯзык кода
min-linesЧислоМинимальное число видимых строк5
max-linesЧислоМаксимальное число видимых строк

Настройки

# Минимальное число видимых строк
n2o.api.control.code_editor.min_lines=5

Пример

<code-editor id="editor" language="java"/>

<date-time>

Компонент ввода даты и времени

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
date-formatDD.MM.YYYY DD/MM/YYYYФормат отображения датыDD.MM.YYYY
time-formatHH:mm HH:mm:ssФормат отображения времени
minСтрокаМинимальная дата возможная для выбора. Должна быть указана в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd).
maxСтрокаМаксимальная дата возможная для выбора. Должна быть указана в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd).
utctrue falseВремя в UTCfalse
default-valueСтрокаЗначение по умолчанию простого компонента. Должно быть указано в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd).

Настройки

# Формат отображения даты
n2o.api.control.date_time.date_format=DD.MM.YYYY
# Всемирное координированное время
n2o.api.control.date_time.utc=false
# Тип данных
n2o.api.control.date_time.domain=date

Пример

<date-time id="date" date-format="DD.MM.YYYY" min="2018-01-01T08:00:00Z" utc="true"/>

<field>

Произвольный React компонент.

Через расширенные свойства можно указать дополнительные свойства поля.

Пример

<field src="MyControl"
ext:prop1="value1"
ext:prop2="value2"/>

Тело
<controls> - Список произвольных полей

<controls>

Список произвольных полей.

Тело
<control> - Произвольное поле

<control>

Произвольное поле.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
idСтрокаИдентификатор поля!
srcСтрокаReact компонент поля

Пример

<field src="MyControl">
<controls>
<control id="id1"></control>
</controls>
</field>

<file-upload>

Компонент загрузки файлов

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
multitrue falseПоддержка загрузки нескольких файловfalse
ajaxtrue falseПоддержка загрузки через ajax запросtrue
upload-urlСтрокаURL загрузки файла
delete-urlСтрокаURL удаления файла
value-field-idСсылка на полеПоле выборки, содержащее идентификатор файла
label-field-idСсылка на полеПоле выборки, содержащее наименование файла
message-field-idСсылка на полеПоле выборки, содержащее сообщение файла
url-field-idСсылка на полеПоле выборки, содержащее URL скачивания файла
request-paramСтрокаНаименование поля в запросе miltipart form data
show-sizetrue falseОтображение размера файлаtrue
acceptСтрокаДоступные расширения файлов (через запятую)

Пример

<file-upload id="file" label="Загрузить файл"
class="custom-class" multi="true"
ajax="true" upload-url="/n2o/data"
delete-url="/files/delete/{file.id}"
value-field-id="hash"
label-field-id="filename"
url-field-id="url" show-size="true"
accept=".img,.png"/>

<hidden>

Скрытое поле, в основном используется для вычисления различных значений, которые не надо показывать пользователю.

Атрибуты

Наследует базовые свойства простых компонентов.

Пример

<hidden id="sum" default-value="1">
<dependencies>
<set-value on="f1,f2">(function(){return parseInt(f1) + parseInt(f2)})();</set-value>
</dependencies>
</hidden>

<html>

Компонент вывода html

Тело
HTML разметка с плейсхолдерами.

Пример

Текст внутри html поддерживает плейсхолдеры данных, где name - поле формы.

<html><![CDATA[<h3 class='class1' style='color:red;'>Hello, {name}!</h3>]]></html>

<image>

Компонент вывода изображения

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
urlСтрокаURL адрес изображения
dataСтрокаИзображение в байтах
titleСтрокаЗаголовок
descriptionСтрокаПодзаголовок
shaperounded circle squareТип формы изображенияrounded
text-positiontop left right bottomРасположение текста относительно картинкиright
widthСтрокаШирина картинки. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
action-idСсылка на действие страницы или виджетаСсылка на действие, которое необходимо выполнить при клике на картинку

Настройки

# Тип формы изображения
n2o.api.field.image.shape=rounded
# Расположение текста относительно картинки
n2o.api.field.image.text_position=right
# Ширина картинки
n2o.api.field.image.width=

Тело
<actions> - Список действий
<statuses> - Список статусов

Пример

<image url="/myimage.png" title="Заголовок" description="Подзаголовок">
<statuses>
<status/>
...
<status/>
</statuses>
<actions>
<invoke>...</invoke>
<a>...</a>
</actions>
</image>

<actions>

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

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

<statuses>

Список статусов.

Тело
<status> - Элемент статуса

<status>

Элемент статуса.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
srcСтрокаReact компонент статусаStatus
field-idСтрокаПоле с данными для статуса!
iconКласс иконкиИконка статуса
placetopLeft topRight bottomLeft bottomRightРасположение статусаtopLeft

Пример

<statuses>
<status
field-id="status"
icon="{icon}"
place="topLeft"
/>
</statuses>

<image-upload>

Компонент загрузки изображений

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
multitrue falseПоддержка загрузки нескольких файловfalse
ajaxtrue falseПоддержка загрузки через ajax запросtrue
upload-urlСтрокаURL загрузки файла
delete-urlСтрокаURL удаления файла
value-field-idСсылка на полеПоле выборки, содержащее идентификатор файла
label-field-idСсылка на полеПоле выборки, содержащее наименование файла
message-field-idСсылка на полеПоле выборки, содержащее сообщение файла
url-field-idСсылка на полеПоле выборки, содержащее URL скачивания файла
request-paramСтрокаНаименование поля в запросе miltipart form data
show-sizetrue falseОтображение размера файлаtrue
show-nametrue falseОтображение имени файлаfalse
acceptСтрокаДоступные расширения файлов (через запятую)
list-typeimage cardТип отображения при мультивыборе (image - в строку только изображения с возможностью просмотра (опционально) и удаления, card - вид горизонтальной карточки с показом названия, размера и кнопками удаления и просмотра (опционально))image
can-lightboxtrue falseВозможность просмотра изображения в большом окнеfalse
can-deletetrue falseВозможность удаления изображенияtrue
iconКласс иконкиИконка по умолчанию в области загрузки
widthСтрокаШирина области загрузки. Доступные единицы измерения: px. При указании числа оно будет приведено к px
heightСтрокаВысота области загрузки. Доступные единицы измерения: px. При указании числа оно будет приведено к px
icon-sizeСтрокаРазмеры иконки. Доступные единицы измерения: px. При указании числа оно будет приведено к pxРазмер области загрузки
show-tooltiptrue falseНаличие тултипаtrue
shaperounded circle squareТип формы изображенияrounded

Настройки

# Отображение имени файла
n2o.api.control.image_upload.show_name=false
# Тип отображения при мультивыборе
n2o.api.control.image_upload.list_type=image
# Возможность просмотра изображения в большом окне
n2o.api.control.image_upload.can_lightbox=false
# Возможность удаления изображения
n2o.api.control.image_upload.can_delete=true
# Наличие тултипа
n2o.api.control.image_upload.show_tooltip=true
# Тип формы изображения
n2o.api.control.image_upload.shape=rounded
# Ширина области загрузки
n2o.api.control.image_upload.width=
# Высота области загрузки
n2o.api.control.image_upload.height=

Пример

<image-upload id="icon" label="Загрузить изображение"
list-type="card" can-lightbox="true"
can-delete="false" width="500px"
multi="true"
ajax="true" upload-url="/n2o/data"
delete-url="/files/delete/{file.id}"
value-field-id="hash"
label-field-id="filename"
url-field-id="url" show-size="true"
accept=".img,.png"/>

<input-money>

Компонент ввода денежных единиц

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
suffixСтрокаСуффикс
prefixСтрокаПрефикс
thousands-separatorСтрокаЗнак, отделяющий группу из трех разрядов
decimal-separatorСтрокаЗнак, отделяющий дробную часть
integer-limitЧислоОграничение по количеству знаков целой части
fraction-formattingoff manual autoФорматирование дробной частиoff

Настройки

# Форматирование дробной части
n2o.api.control.input.money.fraction_formatting=off
#префикс по умолчанию для input-money
n2o.api.control.input_money.prefix=
#суффикс по умолчанию для input-money
n2o.api.control.input_money.suffix=

Пример

<input-money id="money" prefix="$" thousands-separator=" "
decimal-separator="," integer-limit="100" fraction-formatting="manual">
</input-money>

<input-text>

Компонент ввода однострочного текста или чисел

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
domainТип данныхТип данных
precisionЧислоМаксимальная длина дробной части (используется только для domain="numeric")8
lengthЧислоМаксимальное количество символов в тексте (используется только для domain="string")
maxЧислоМаксимальное допустимое число (используется только для числовых domain)
minЧислоМинимальное допустимое число (используется только для числовых domain)
stepСтрокаШаг инкремента / декремента чисел (используется только для числовых domain). Если step="0", то кнопки "вверх вниз" будут отсутствоватьДля domain целых чисел step="1", для domain numeric step="0.01"
measureСтрокаЕдиница измерения

Настройки

# Максимальная длина дробной части
n2o.api.control.input.text.precision=8

Пример

<input-text id="name" length="10" domain="string"/>

<markdown>

Компонент, который позволяет задавать текст согласно markdown разметки и отображать его в виде html.
Текст внутри markdown поддерживает:

  • Плейсхолдеры данных, где name - поле формы
<markdown> Text {name} </markdown>

Значение данных также может содержать markdown текст

<markdown>{mymarkdown}</markdown>
<markdown>
[relative_link](/example) \n
[absolute_link](http://example.com) \n
http://example.com
</markdown>
  • Переход на новую строку через тэг <br>
  • Переход на новую строку через двойной пробел " "
  • Переход на новую строку через \n
<markdown>
<![CDATA[
Первая строка <br>
Вторая строка
]]>
</markdown>
<markdown>
Вторая строка \n
Третья строка
Четвертая строка
</markdown>
  • Внутри текста можно использовать тэг <n2o-button>, чей id равен id выполняемого действия
<n2o-button id="openNewPage" />

С помощью class="n2o-markdown-link" можно сделать кнопку в виде ссылки

Атрибуты

НаименованиеТипОписание
actionsСтрокаСписок идентификаторов действий (через запятую), которые используются внутри markdown. Действия должны быть описаны внутри виджета или страницы, в разделе <actions>

Пример

<markdown>
Text attributes _italic_, **bold**, `monospace`.

Paragraphs are separated
by a blank line.

Two spaces at the end of a line
produce a line break.

Bullet lists nested within numbered list:

1. fruits
* apple
* banana
2. vegetables
- carrot
- broccoli

A [link](http://example.com).
</markdown>

<masked-input>

Компонент ввода текста с маской

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
maskСтрокаМаска текста!
measureСтрокаЕдиница измерения
clear-on-blurtrue falseСтирать ли значение при уходе с поляtrue

Настройки

# Стирать ли значение при уходе с поля
n2o.api.control.masked_input.clear_on_blur=true

Пример

<masked-input id="phone" mask="+7 (999) 999-99-99"/>

<number-picker>

Компонент выбора числа из диапазона

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
minЧислоМинимальное значение0
maxЧислоМаксимальное значение100
stepЧислоШаг изменения значения1

Настройки

# Минимальное значение
n2o.api.control.number_picker.min=0
# Максимальное значение
n2o.api.control.number_picker.max=100
# Шаг изменения значения
n2o.api.control.number_picker.step=1

Пример

<number-picker id="count" min="2" max="10"/>

<output-list>

Компонент вывода многострочного текста. В случае, если в данных приходит ссылка, текст будет отображаться как ссылка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
label-field-idСтрокаПоле выборки, содержащее значение элементаname
href-field-idСтрокаПоле выборки, содержащее ссылку элементаhref
targetnewWindow self applicationСпособ открытия ссылокnewWindow
separatorСтрокаРазделитель между элементамипробел
directionrow columnНаправление отображения элементов (в строку или в столбец).column

Настройки

# Поле выборки, содержащее значение элемента
n2o.api.control.output_list.label_field_id=name
# Поле выборки, содержащее ссылку элемента
n2o.api.control.output_list.href_field_id=href
# Способ открытия ссылок
n2o.api.control.output_list.target=newWindow
# Разделитель между элементами
n2o.api.control.output_list.direction=column
# Направление отображения элементов (в строку или в столбец)
n2o.api.control.output_list.separator=' '

Пример

<output-list id="list" label-field-id="label" href-field-id="link"
target="application" direction="row" separator=","/>

<output-text>

Компонент вывода однострочного текста

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
iconКласс иконкиИконка
icon-positionleft rightПозиция иконки относительно текстаleft
formatСтрокаФормат выводимого текста

Настройки

#Позиция иконки относительно текста
n2o.api.control.output_text.icon_position=left
# Три точки в конце, когда текст уходит за рамки строки
n2o.api.control.output_text.ellipsis=false
# true/false - вставить в конце строки "Подробнее"
# Число - через сколько строк будет "Подробнее"
n2o.api.control.output_text.expandable=false

Пример

<output-text id="text" icon="fa fa-plus" icon-position="right" format="number 0,0.00"/>

<password>

Компонент ввода пароля

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
eyetrue falseОтображать кнопку "Показать пароль" или нетtrue
lengthЧислоМаксимальная длина текста элемента

Настройки

# Отображать кнопку "Показать пароль" или нет
n2o.api.control.password.eye=true

Пример

<password id="password" eye="true"/>

<progress>

Компонент отображения прогресса

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
maxЧислоМаксимальное значение!
bar-textСтрокаОписание шкалы прогресса
animatedtrue falseВключает анимацию. При включении отображает полоскиfalse
stripedtrue falseОтображение полосок на шкале прогрессаfalse
colorprimary secondary success danger warning info light darkЦвет шкалы прогресса. Возможно использование плейсхолдеров
bar-classСтрокаКласс шкалы прогресса

Настройки

# Включает анимацию. При включении отображает полоски
n2o.api.control.progress.animated=false
# Отображение полосок на шкале прогресса
n2o.api.control.progress.striped=false

Пример

<progress id="progress" max="100" color="info"/>

<rating>

Компонент рейтинг

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
maxintegerРейтинг по шкале от 1 до max5
halftrue falseМожно ставить оценку с половиной (например 3.5)false
show-tooltiptrue false

Настройки

# Рейтинг по шкале от 1 до max
n2o.api.control.rating.max=5
# Можно ставить оценку с половиной
n2o.api.control.rating.half=false

Пример

 <rating max="5" show-tooltip="false" half="false"/>

<search-buttons>

На открываемой странице будут добавлены кнопки "Найти" и "Сбросить". Кнопка "Найти" будет выполнять фильтрацию записей согласно указанным условиям. Кнопка "Сбросить" сбрасывает значение всех фильтров.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
search-labelСтрокаЛейбл кнопки поискаНайти
reset-labelСтрокаЛейбл кнопки сбросаСбросить
clear-ignoreСтрокаПоля, игнорируемые при сбросе фильтров

Пример

<search-buttons id="search" clear-ignore="name,surname"/>

<search-button>

Кнопка "Найти", выполняющая фильтрацию записей согласно указанным условиям.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelСтрокаЛейбл кнопкиНайти
colorprimary secondary success danger warning info light dark linkЦвет кнопкиprimary

Компонент также использует базовые атрибуты кнопок N2O

Настройки

# Лейбл кнопки
n2o.api.control.search_button.label = Найти
# Цвет кнопки
n2o.api.control.search_button.color = primary

Пример

<search-button id="search" color="danger" badge="test" icon="fa fa-search"/>

<clear-button>

Кнопка "Сбросить", выполняющая очистку полей фильтров таблицы.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelСтрокаЛейбл кнопкиСбросить

Компонент также использует базовые атрибуты кнопок N2O

Настройки

# Лейбл кнопки
n2o.api.control.clear_button.label = Сбросить

Пример

<clear-button id="search" color="primary" badge="test"/>

<slider>

Компонент ползунок

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
modesingle rangeОдиночный ползунок / мульти-режимsingle
verticaltrue falseВертикальное расположение элементаfalse
measureСтрокаЕдиница измерения
minЧислоМинимальное значение
maxЧислоМаксимальное значение
stepЧислоШаг приращения1

Настройки

# Включает подсказку
n2o.api.control.slider.tooltip=true
# Одиночный ползунок / мульти-режим
n2o.api.control.slider.mode=single
# Вертикальное расположение элемента
n2o.api.control.slider.vertical=false
# Шаг приращения
n2o.api.control.slider.step=1

Пример

<slider id="percent" measure="%" min="0" max="100" step="5"/>

<status>

Компонент отображения статуса

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
colorprimary secondary success danger warning info light darkЦвет индикатора
textСтрокаТекст статуса!
text-positionleft rightРасположение текстаright

Настройки

# Расположение текста
n2o.api.control.status.text_position=right

Пример

<status id="status" color="success" text="Задача выполнена"/>

<text>

Компонент текста

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
formatСтрокаФормат текста

Тело
Текст с плейсхолдерами.

Пример

<text>Привет, {username}</text>

<text format="number 0,0">${sum}</text>

<text-area>

Компонент ввода многострочного текста

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
min-rowsЧислоМинимальная высота поля в строках текста
max-rowsЧислоМаксимальная высота поля в строках текста

Пример

<text-area id="comment" max-rows="10" placeholder="Введите свой комментарий"/>

<text-editor>

Компонент редактирования текста

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
toolbar-urlСтрокаПуть до файла конфигурации тулбара

Пример

<text-editor id="editor" toolbar-url="META-INF/resources/toolbar.json"/>

<time-picker>

Компонент ввода времени

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
prefixСтрокаПрефикс
mode"hour,minute,second"; "hour,minute"; "hour"; "minute"Режим отображения списка выбораhour,minute,second
time-formatСтрокаФормат времениHH:mm:ss
formatdigit symbolsФормат отображения времени, digit ("00:00:00") или symbols ("15 мин")symbols
default-valueВремяЗначение по умолчанию

Настройки

# Режим отображения списка выбора
n2o.api.control.time_picker.mode=hour,minute,second
# Формат времени
n2o.api.control.time_picker.time_format=HH:mm:ss
# Формат отображения времени
n2o.api.control.time_picker.format=symbols

Пример

<time-picker id="test1" prefix="from: " format="digit" mode="hour,minute" time-format="hh:mm"/>

Списковые компоненты

Базовые свойства списковых компонентов

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
query-idИдентификатор выборкиВыборка, возвращающая список вариантов для выбора. Если не задана, необходимо задать &ltoptions&gt
label-field-idПоле выборкиПоле выборки, отвечающее за отображение варианта выбора
search-filter-idПоле выборкиИдентификатор фильтра, отвечающего за поиск вариантов выбора при вводеlabel-field-id
sort-field-idПоле сортировкиПоле выборки, отвечающее за сортировку вариантов выбораlabel-field-id
group-field-idПоле выборкиПоле выборки, отвечающее за группировку вариантов выбора
image-field-idПоле выборкиПоле выборки, отвечающее за картинку вариантов выбора
badge-field-idПоле выборкиПоле выборки, отвечающее за значение в ячейке с текстом
badge-color-field-idПоле выборкиПоле выборки, отвечающее за цвет ячейки с текстом
badge-positionleft rightПозиция значкаright
badge-shaperounded circle squareФорма значкаsquare
badge-image-field-idПоле выборкиПоле выборки, отвечающее за картинку в значке
badge-image-positionleft rightПозиция картинки в значкеleft
badge-image-shaperounded circle squareФорма картинки в значкеcircle
icon-field-idПоле выборкиПоле выборки, отвечающее за иконку вариантов выбора
status-field-idПоле выборкиПоле выборки, отвечающее за статус в списковых компонентах
enabled-field-idСтрокаИдентификатор поля, которое определяет (true/false) доступен элемент для выбора или нет
cachetrue falseКэшировать результаты выборкиfalse
sizeЧислоКоличество вариантов выбора на одной странице10
searchtrue falseВозможность поиска по значениюtrue, если есть query-id
begin-paramСтрокаПараметр в URL для значения по умолчанию начала интервала
end-paramСтрокаПараметр в URL для значения по умолчанию конца интервала
datasourceСсылка на источник данныхИдентификатор источника данных, из которого будут браться варианты для выбора
value-field-idСтрокаПоле, отвечающее за идентификатор варианта выбора

Настройки

#Позиция значка в ButtonField
n2o.api.control.button.badge.position=right
#Форма значка в ButtonField
n2o.api.control.button.badge.shape=circle
#Позиция картинки в значке в ButtonField
n2o.api.control.button.badge.image_position=left
#Форма картинки в значке в ButtonField
n2o.api.control.button.badge.image_shape=circle

Тело
<default-value> - Значение по умолчанию спискового компонента
<options> - Список вариантов для выбора
<filters> - Предустановленные фильтры выборки спискового компонента

<default-value>

Значение по умолчанию спискового компонента

Атрибуты

НаименованиеТипОписание
idСтрокаИдентификатор
nameСтрокаНаименование

Пример

<select id="gender">
<default-value id="1" name="Мужской"/>
<options>...</options>
<filters>...</filters>
</select>

<options>

Список вариантов для выбора

Пример

<select id="gender">
<options>
...
</options>
</select>

Тело
<option> - Вариант выбора

<option>

Вариант выбора

Атрибуты

НаименованиеТипОписание
idСтрокаИдентификатор
nameСтрокаНаименование

Пример

<options>
<option id="1" name="Мужской"/>
<option id="2" name="Женский"/>
</options>

<filters>

Предустановленные фильтры выборки спискового компонента.

Тело
Предустановленные фильтры

Пример

<select query-id="contacts">
<filters>
<eq field-id="type" value="{type.id}"/>
</filters>
</select>

<auto-complete>

Компонент ввода текста с автоподбором

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
query-idСтрокаИдентификатор запроса за данными для автоподбора
datasourceСсылка на источник данныхИдентификатор источника данных, из которого будут браться варианты для выбора
value-field-idСтрокаИдентификатор поля выборки, отвечающего за идентификатор варианта выбора.name
label-field-idСтрокаИдентификатор поля выборки, отвечающего за отображение варианта выбораЗначение value-field-id, иначе name
search-filter-idСтрокаИдентификатор фильтра, отвечающего за поиск вариантов выбора при вводеname
tagstrue falseОтображение выбранных элементов тегамиfalse
max-tag-text-lengthЧислоМаксимальная длина текста элемента10

Тело
Предустановленные фильтры

Настройки

# Отображение выбранных элементов тегами
n2o.api.control.auto_complete.tags=false
# Максимальная длина текста элемента
n2o.api.control.auto_complete.max_tag_text_length=10
# Идентификатор поля выборки, отвечающего за идентификатор варианта выбора.
n2o.api.control.auto_complete.value_field_id=name

Пример

<auto-complete query-id="labels" value-field-id="surname"
search-filter-id="surnameLike" tags="true"/>

<checkbox-group>

Компонент группы чекбоксов

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
inlinetrue falseОтображение элементов на одной строкеfalse
typedefault btnТип:
default - в виде чекбоксов
btn - в виде обычных кнопок
default

Настройки

# Отображение элементов на одной строке
n2o.api.control.checkbox_group.inline=false
# Тип
n2o.api.control.checkbox_group.type=default

Пример

<checkbox-group id="gender" inline="false" type="default"/>

<input-select>

Компонент ввода текста с выбором из выпадающего списка

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
typesingle multi checkboxesТип выбора в выпадающем спискеsingle
reset-on-blurtrue falseСтирание значения при потере фокусаtrue
description-field-idСтрокаИдентификатор поля для отображения дополнительной информации в опциях выпадающего списка
max-tag-countЧислоМаксимальное количество элементов в поле (для режима с множественным выбором)
max-tag-text-lengthЧислоМаксимальная длина текста элемента (для режима с множественным выбором)10
throttle-delayЧислоЗадержка перед поиском. Указывается в миллисекундах300
search-min-lengthЧислоМинимальное число символов для начала поиска0
value-field-idСтрокаПоле, отвечающее за идентификатор варианта выбораid

Настройки

# Стирание значения при потере фокуса
n2o.api.control.input_select.reset_on_blur=true
# Максимальная длина текста элемента (для режима с множественным выбором)
n2o.api.control.input_select.max_tag_text_length=10
# Задержка перед поиском в мс
n2o.api.control.input_select.throttle_delay=300
# Минимальное число символов для начала поиска
n2o.api.control.input_select.search_min_length=0

Пример

<input-select id="gender" label="Пол" query-id="genders" type="single"/>

<input-select-tree>

Компонент ввода с выбором в выпадающем списке в виде дерева.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
parent-field-idСтрокаИдентификатор родительского поля!
has-children-field-idСтрокаНаличие дочерних элементов.
master-field-idСтрокаИдентификатор master поля
detail-field-idСтрокаИдентификатор detail поля
value-field-idСтрокаИдентификатор узла дерева.
ajaxtrue falseПоддержка загрузки через ajax запросfalse
checkboxestrue falseОтображение чекбоксов в элементах дерева. Переводит InputSelectTree в мульти режимfalse
checking-strategychild parent allСтратегия выбора данных из дереваall
max-tag-countЧислоМаксимальное количество элементов в поле (для режима с множественным выбором)
max-tag-text-lengthЧислоМаксимальная длина текста элемента (для режима с множественным выбором)10
sizeЧислоКоличество узлов(включая дочерние) выводимых деревом200
throttle-delayЧислоЗадержка перед поиском. Указывается в миллисекундах300
search-min-lengthЧислоМинимальное число символов для начала поиска0

Настройки

# Поддержка загрузки через ajax запрос
n2o.api.control.input_select_tree.ajax=false
# Отображение чекбоксов в элементах дерева. Переводит InputSelectTree в мульти режим.
n2o.api.control.input_select_tree.checkboxes=false
# Стратегия выбора данных из дерева
n2o.api.control.input_select_tree.checking_strategy=all
# Максимальная длина текста элемента (для режима с множественным выбором)
n2o.api.control.input_select_tree.max_tag_text_length=10
# Количество узлов(включая дочерние) выводимых деревом
n2o.api.control.input_select_tree.size=200
# Задержка перед поиском в мс
n2o.api.control.input_select_tree.throttle_delay=300
# Минимальное число символов для начала поиска
n2o.api.control.input_select_tree.search_min_length=0

Пример

<input-select-tree id="address" label="Адрес" checkboxes="true" checking-strategy="child"
parent-field-id="parent_id" label-field-id="name" value-field-id="id"
query-id="address" has-children-field-id="hasChildren" search-filter-id="name"/>

<radio-group>

Компонент радио кнопок

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
inlinetrue falseОтображение элементов на одной строкеfalse, при type='tabs' inline='true'
typedefault btn tabsТип кнопок:
default - радио кнопки
btn - в виде обычных кнопок
tabs - в виде вкладок
default

Настройки

# Отображение элементов на одной строке, если type!=tabs
n2o.api.control.radio_group.inline=false
# Отображение элементов на одной строке, если type=tabs
n2o.api.control.radio_group.tabs_inline=true
# Тип кнопок
n2o.api.control.radio_group.type=default

Пример

<radio-group id="gender" inline="false" type="default"/>

<select>

Компонент выбора из выпадающего списка

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
typesingle checkboxesТип выбора в выпадающем спискеsingle
cleanabletrue falseОпция очистки компонентаtrue
select-formatСтрокаУниверсальный заголовок поля. Все варианты select-format будут работать только когда тип checkboxes. Нужно использовать либо универсальный заголовок, либо 3 вида заголовков при разном числе элементов. Если не задать ни один, то число выбранных элементов не будет отображаться
select-format-oneСтрокаЗаголовок поля при одном элементе
select-format-fewСтрокаЗаголовок поля при нескольких элементах
select-format-manyСтрокаЗаголовок поля при большом числе элементов
description-field-idСтрокаИдентификатор поля для отображения дополнительной информации в опциях выпадающего списка

Настройки

# Компонент выбора из выпадающего списка
n2o.api.control.select.type=single
# Опция очистки компонента
n2o.api.control.select.cleanable=true

Пример

<select id="gender" label="Пол" query-id="genders" cleanable="false" />

Интервальные компоненты

Базовые свойства интервальных компонентов

<default-value>

Значение по умолчанию интервального компонента

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
beginСтрокаЗначение начала интервала
endСтрокаЗначение окончания интервала
utctrue falseВсемирное координированное времяfalse

Пример

<date-interval>
<default-value begin="01.01.2019" end="31.12.2019"/>
</date-interval>

<date-interval>

Компонент ввода интервала дат

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
date-formatDD.MM.YYYY DD/MM/YYYYФормат отображения датыDD.MM.YYYY
time-formatHH:mm HH:mm:ssФормат отображения времени
minСтрокаМинимальная дата возможная для выбора. Должна быть указана в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd).
maxСтрокаМаксимальная дата возможная для выбора. Должна быть указана в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd).
utctrue falseВсемирное координированное времяfalse
note

Значение по умолчанию begin и end должны быть указаны в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd).

Настройки

# Формат отображения даты
n2o.api.control.date_interval.date_format=DD.MM.YYYY
# Всемирное координированное время
n2o.api.control.date_interval.utc=false

Пример

<date-interval id="interval" date-format="DD/MM/YYYY"/>

<interval-field>

Компонент интервала

Тело
<begin> - Компонент начала интервала
<end> - Компонент конца интервала

<begin>

Компонент начала интервала

Тело
Поле ввода

<end>

Компонент конца интервала

Тело
Поле ввода

Пример

<interval-field id="range">
<begin>
<input-text id="start-range" domain="integer" max="5" min="0"/>
</begin>
<end>
<input-text id="end-range" domain="integer" max="5" min="0"/>
</end>
</interval-field>

Зависимости компонента

Базовые атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
onСтрокаПоля, от которых зависит условие зависимостиВычисляется по условию
apply-on-inittrue falseСрабатывает ли при инициализации виджетаtrue
note

Атрибут on необходимо указывать, чтобы зависимость срабатывала каждый раз при изменении указанных полей, а не только при инициализации.

Настройки

# Срабатывает ли при инициализации виджета
n2o.api.control.dependency.apply_on_init=true

Пример

<input-text id="name">
<dependencies>
...
</dependencies>
</input-text>

<enabling>

Условие доступности

Атрибуты

НаименованиеТипОписание
messageСтрокаСообщение о причине недоступности

Тело
Java Script выражение.

Пример

<dependencies>
<enabling on="type">type.id == 1</enabling>
<!-- Поле доступно, если type.id равен 1 -->
</dependencies>

<fetch>

Обновление модели компонента при изменении зависимых полей.

Нужен для списковых компонентов с открытым списком (<radio-group>, <checkbox-group>), у которых есть фильтры от других полей.

Пример

<dependencies>
<fetch on="type"/>
<!-- При изменении поля type будет выполнен запрос данных и списковый компонент отобразит обновленные варианты -->
</dependencies>

<fetch-value>

Обновление модели поля ввода

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
query-idСтрокаИдентификатор выборки!
value-field-idСтрокаПоле выборки, значение которого будет проставлено в модель поля вводаВся модель
sizeЧислоКоличество возвращаемых записей

Тело
Предустановленные фильтры

Пример

<dependencies>
<fetch-value on="type" query-id="queryId" value-field-id="name" size="10">
<filters>
...
</filters>
</fetch-value>
<!-- При изменении поля type будет выполнен запрос данных и значение name будет проставлено в текущее поле -->
</dependencies>

<requiring>

Условие обязательности заполнения

Тело
Java Script выражение.

Пример

<dependencies>
<requiring on="type">type.id == 1</requiring>
<!-- Поле обязательно для заполнения, если type.id равен 1 -->
</dependencies>

<reset>

Сброс значения

Тело
Java Script выражение.

Пример

<dependencies>
<reset on="type">type.id == 1</reset>
<!-- Сбросить значение, если type.id равен 1 -->
</dependencies>

<set-value>

Условие установки значений

Тело
Java Script тело функции.

Пример

<dependencies>
<set-value on="type">
if (type.id == 1)
return "Test";
</set-value>
<!-- Поле заполнится значением "Test", если type.id равен 1 -->
</dependencies>

<visibility>

Условие видимости

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
resettrue falseСбросить значение при скрытииfalse

Настройки

# Сбросить значение при скрытии
n2o.api.control.visibility.reset=false

Тело
Java Script выражение.

Пример

<dependencies>
<visibility on="type" reset="true">type.id == 1</visibility>
<!-- Поле видимо, если type.id равен 1 -->
</dependencies>

Валидации компонента

<validations>

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
white-listСписок идентификаторов через запятуюВалидации объекта, сообщения которых будут показаны под этим полем

Пример

<validations white-list="checkUniqueName, checkAdult">
...
</validations>

Тело
Список валидаций

Действие обновления компонента

<submit>

Отправка полей формы на сервер при их изменении

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
operation-idСтрокаИдентификатор операции, которая должна вызваться!
message-on-successtrue falseПоказать сообщение об успешном выполнении действияfalse
message-on-failtrue falseПоказать сообщение о неудачном выполнении действияfalse
message-positionfixed relativeФиксированное или относительное положение сообщения
message-placementtop bottom topLeft topRight bottomLeft bottomRightПоложение сообщения при фиксации
message-widget-idСтрокаИдентификатор виджета для отображения сообщения, если position = relative
submit-alltrue falseОтправить все данные или только те, что прописаны в form-paramtrue
auto-submit-onchange blurОтправка данных по событию
routeСтрокаURL запроса
refresh-on-successtrue falseНеобходимо ли обновлять виджетfalse
refresh-datasourcesСтрокаСсылка на обновляемые источники данных

Тело

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

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

<toolbar>

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

Пример

<input-text>
<toolbar>
...
</toolbar>
</input-text>