Поля ввода

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

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

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

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
id	Строка	Идентификатор поля		!
help	Строка	Подсказка по полю. Поддерживаются плейсхолдеры условия.
label	Строка	Заголовок поля. Поддерживаются плейсхолдеры условия.	Из наименования соответствующего поля выборки виджета
label-class	Строка	Класс для заголовка поля
no-label	true false	Не отображать заголовок. Поддерживаются плейсхолдеры условия.	false
no-label-block	true false	Не отображать блок с заголовком. Поддерживаются плейсхолдеры условия.	false
src	Строка	React компонент поля
class	CSS класс	Класс компонента поля
style	CSS свойство	Стиль компонента поля
placeholder	Строка	Подсказка для ввода. Поддерживаются плейсхолдеры условия.
required	true false	Обязательность поля. Поддерживаются плейсхолдеры условия.	false
visible	true false	Видимость поля. Поддерживаются плейсхолдеры условия.	true
enabled	true false	Доступность поля. Поддерживаются плейсхолдеры условия.	true
description	Строка	Описание поля. Поддерживаются плейсхолдеры условия.
copied	true false	Копируется ли это поле при default-values-mode="merge"	true
depends-on	Строка	Зависимость от полей
param	Строка	Параметр в URL для значение по умолчанию
ref-model	resolve 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	Строка	Текст уведомления
class	CSS класс	Класс компонента уведомления
style	CSS свойство	Стиль компонента уведомления
color	primary secondary success danger warning info light dark	Цвет отображения уведомления	secondary
href	Строка	Ссылка для перехода при клике по уведомлению
close-button	true 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>

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

Атрибуты

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

Настройки

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

Пример

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

<code>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
language	sql xml javascript groovy java	Язык кода
theme	light dark	Цвет фона	light
show-line-numbers	true false	Отображение нумерации строк	true
starting-line-number	Число	Значение, с которого будет производиться нумерация	1
hide-buttons	true 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
language	sql 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-format	DD.MM.YYYY DD/MM/YYYY	Формат отображения даты	DD.MM.YYYY
time-format	HH: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).
utc	true false	Время в UTC	false
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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
multi	true false	Поддержка загрузки нескольких файлов	false
ajax	true 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-size	true 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	Строка	Подзаголовок
shape	rounded circle square	Тип формы изображения	rounded
text-position	top 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	Класс иконки	Иконка статуса
place	topLeft topRight bottomLeft bottomRight	Расположение статуса	topLeft

Пример

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

<image-upload>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
multi	true false	Поддержка загрузки нескольких файлов	false
ajax	true 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-size	true false	Отображение размера файла	true
show-name	true false	Отображение имени файла	false
accept	Строка	Доступные расширения файлов (через запятую)
list-type	image card	Тип отображения при мультивыборе (image - в строку только изображения с возможностью просмотра (опционально) и удаления, card - вид горизонтальной карточки с показом названия, размера и кнопками удаления и просмотра (опционально))	image
can-lightbox	true false	Возможность просмотра изображения в большом окне	false
can-delete	true false	Возможность удаления изображения	true
icon	Класс иконки	Иконка по умолчанию в области загрузки
width	Строка	Ширина области загрузки. Доступные единицы измерения: `px`. При указании числа оно будет приведено к `px`
height	Строка	Высота области загрузки. Доступные единицы измерения: `px`. При указании числа оно будет приведено к `px`
icon-size	Строка	Размеры иконки. Доступные единицы измерения: `px`. При указании числа оно будет приведено к `px`	Размер области загрузки
show-tooltip	true false	Наличие тултипа	true
shape	rounded 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-formatting	off 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>

Жирный, курсив и моноширинный шрифты
Ненумерованные списки
Ссылки абсолютные и относительные
Автоматические url ссылки (https://www.markdownguide.org/extended-syntax/#automatic-url-linking)

<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-blur	true 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
target	newWindow self application	Способ открытия ссылок	newWindow
separator	Строка	Разделитель между элементами	пробел
direction	row 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-position	left 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>

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

Атрибуты

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

Настройки

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

Пример

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

<progress>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
max	Число	Максимальное значение		!
bar-text	Строка	Описание шкалы прогресса
animated	true false	Включает анимацию. При включении отображает полоски	false
striped	true false	Отображение полосок на шкале прогресса	false
color	primary 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
max	integer	Рейтинг по шкале от 1 до max	5
half	true false	Можно ставить оценку с половиной (например 3.5)	false
show-tooltip	true 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	Строка	Лейбл кнопки	Найти
color	primary 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
mode	single range	Одиночный ползунок / мульти-режим	single
vertical	true 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
color	primary secondary success danger warning info light dark	Цвет индикатора
text	Строка	Текст статуса		!
text-position	left 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
format	digit 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-position	left right	Позиция значка	right
badge-shape	rounded circle square	Форма значка	square
badge-image-field-id	Поле выборки	Поле выборки, отвечающее за картинку в значке
badge-image-position	left right	Позиция картинки в значке	left
badge-image-shape	rounded circle square	Форма картинки в значке	circle
icon-field-id	Поле выборки	Поле выборки, отвечающее за иконку вариантов выбора
status-field-id	Поле выборки	Поле выборки, отвечающее за статус в списковых компонентах
enabled-field-id	Строка	Идентификатор поля, которое определяет (true/false) доступен элемент для выбора или нет
cache	true false	Кэшировать результаты выборки	false
size	Число	Количество вариантов выбора на одной странице	10
search	true 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
tags	true 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
inline	true false	Отображение элементов на одной строке	false
type	default 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
type	single multi checkboxes	Тип выбора в выпадающем списке	single
reset-on-blur	true 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	Строка	Идентификатор узла дерева.
ajax	true false	Поддержка загрузки через ajax запрос	false
checkboxes	true false	Отображение чекбоксов в элементах дерева. Переводит InputSelectTree в мульти режим	false
checking-strategy	child 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
inline	true false	Отображение элементов на одной строке	false, при type='tabs' inline='true'
type	default 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
type	single checkboxes	Тип выбора в выпадающем списке	single
cleanable	true 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	Строка	Значение окончания интервала
utc	true false	Всемирное координированное время	false

Пример

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

<date-interval>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
date-format	DD.MM.YYYY DD/MM/YYYY	Формат отображения даты	DD.MM.YYYY
time-format	HH: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).
utc	true 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-init	true 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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
reset	true 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-success	true false	Показать сообщение об успешном выполнении действия	false
message-on-fail	true false	Показать сообщение о неудачном выполнении действия	false
message-position	fixed relative	Фиксированное или относительное положение сообщения
message-placement	top bottom topLeft topRight bottomLeft bottomRight	Положение сообщения при фиксации
message-widget-id	Строка	Идентификатор виджета для отображения сообщения, если position = relative
submit-all	true false	Отправить все данные или только те, что прописаны в form-param	true
auto-submit-on	change blur	Отправка данных по событию
route	Строка	URL запроса
refresh-on-success	true false	Необходимо ли обновлять виджет	false
refresh-datasources	Строка	Ссылка на обновляемые источники данных

Тело

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

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

Пример

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

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

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

<alert>​

<button>​

<checkbox>​

<code>​

<code-editor>​

<date-time>​

<field>​

<controls>​

<control>​

<file-upload>​

<hidden>​

<html>​

<image>​

<actions>​

<statuses>​

<status>​

<image-upload>​

<input-money>​

<input-text>​

<markdown>​

<masked-input>​

<number-picker>​

<output-list>​

<output-text>​

<password>​

<progress>​

<rating>​

<search-buttons>​

<search-button>​

<clear-button>​

<slider>​

<status>​

<text>​

<text-area>​

<text-editor>​

<time-picker>​

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

<default-value>​

<options>​

<option>​

<filters>​

<auto-complete>​

<checkbox-group>​

<input-select>​

<input-select-tree>​

<radio-group>​

<select>​

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

<default-value>​

<date-interval>​

<interval-field>​

<begin>​

<end>​

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

<enabling>​

<fetch>​

<fetch-value>​

<requiring>​

<reset>​

<set-value>​

<visibility>​

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

<validations>​

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

<submit>​

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

<toolbar>​

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

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

<alert>

<button>

<checkbox>

<code>

<code-editor>

<date-time>

<field>

<controls>

<control>

<file-upload>

<hidden>

<html>

<image>

<actions>

<statuses>

<status>

<image-upload>

<input-money>

<input-text>

<markdown>

<masked-input>

<number-picker>

<output-list>

<output-text>

<password>

<progress>

<rating>

<search-buttons>

<search-button>

<clear-button>

<slider>

<status>

<text>

<text-area>

<text-editor>

<time-picker>

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

<default-value>

<options>

<option>

<filters>

<auto-complete>

<checkbox-group>

<input-select>

<input-select-tree>

<radio-group>

<select>

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

<default-value>

<date-interval>

<interval-field>

<begin>

<end>

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

<enabling>

<fetch>

<fetch-value>

<requiring>

<reset>

<set-value>

<visibility>

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

<validations>

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

<submit>

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

<toolbar>