Общая информация
Компонент StringInput предназначен для ввода пользователем текстовой информации
Поддерживаемые экраны
Компонент может быть задействован на экранах типа:
Внешний вид компонента
В услуге
В конструкторе
Структура компонента StringInput
ВКУ |
JSON |
|||
№ |
В конструкторе |
Атрибут |
Тип |
Описание |
1 |
Идентификатор |
id |
string |
Уникальный идентификатор компонента в JSON |
2 |
Удобочитаемое имя компонента |
name |
string |
Имя компонента, отображаемое в ВКУ |
3 |
Заголовок компонента |
label |
string |
Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле |
4 |
Поле является обязательным для заполнения? |
required |
boolean |
Принуждает пользователя к взаимодействию с компонентом |
Атрибуты компонента |
||||
5 |
Отображение компонента в повторяющихся блоках (RepeatableFields) |
Можно выбрать отображение только в первом блоке или наоборот. Если оставить выпадающий список пустым, то компонент StringInput будет отображаться во всех блоках |
||
6 |
Подсказка для поля |
hint |
string |
Добавляет текст — подсказку под полем ввода |
7 |
Скрывать поле? |
hidden |
boolean |
Если выбрано true, то компонент не отображается на экране |
8 |
Уменьшить ширину поля вдвое |
boolean |
Если true, то ширина компонента уменьшается вдвое. Работает на ширине экрана свыше 576 px. На мобильных устройствах остается 100% |
|
9 |
Приведение букв к верхнему регистру |
fstuc |
string |
Позволяет автоматически делать заглавную букву в первом слове, в каждом слове или делать каждую букву заглавной |
10 |
Название поля, в которое записать ответ пользователя |
fields |
array |
Используется для сохранения значения в поле элемента спискового компонента, обрабатываемого в цикле |
11 |
Подставляет пример эталонного значения в поле для ввода |
placeholder |
string |
Позволяет отображать в поле пример заполнения серым текстом |
12 |
Отображать эталонное значение только когда поле для ввода в фокусе? |
showPlaceholderOnFocus |
boolean |
Если true, то пример заполнения будет отображаться, когда пользователь установит курсор в поле |
13 |
Установить зависимости с ранее введёнными данными |
ref |
array |
Массив объектов, в элементах которых описываются зависимости и правила отображения полей |
Предустановка значения в поле |
||||
14 |
Тип значения |
type |
string |
Позволяет выбрать тип значения для предустановки: REF, CALC, PROTECTED |
15 |
Значение |
value |
string |
Поле для ввода значения выбранного типа |
16 |
Значение по умолчанию |
defaultValue |
string |
Позволяет заполнить поле значением по умолчанию |
17 |
Только для чтения |
readonly |
string |
Если true, то запрещает пользователю редактировать значение |
18 |
Ссылка на переменную |
string, boolean |
При выборе «Задать ссылку на переменную» указывается ссылка на переменную (например, “${proactivityCreated}”), которая должна принимать значения “true”/“false” ( “true” - компонент доступен только для чтения, “false” -компонент доступен для редактирования). При выборе «Задать значение вручную» проставленный чекбокс означает, что компонент для пользователя будет доступен только для чтения |
|
Правила валидации |
||||
19 |
Тип валидации |
type |
string |
Позволяет выбрать один из типов валидации:
|
20 |
Регулярное выражение |
value |
string |
Позволяет указать регулярное выражение, в соответствии с которым будет осуществляться проверка вводимых данных |
21 |
Сообщение об ошибке, отображаемое, если правило валидации не выполняется |
errorMsg |
string |
Позволяет указать текст, который выводится пользователю в случае, если значение не соответствует правилу валидации |
22 |
В какой момент валидировать поле? |
updateOn |
string |
Позволяет выбрать событие, при котором происходит проверка значения: при вводе значения, после окончания ввода или при переходе на следующий экран |
23 |
Отображать введенные числа с разделителем групп разрядов? |
rank |
boolean |
Позволяет отображать введённые числа с разделителем групп разрядов, то есть число 12200000 показывать пользователю как 12 200 000 |
24 |
Всегда отображать маску? |
showMaskSymbols |
boolean |
Если true, то пользователь всегда будет видеть маску ввода |
25 |
Маска ввода |
mask |
string |
Позволяет установить маску ввода или выбрать одну из предустановленных масок |
26 |
Задать маску |
array of objects |
Позволяет вручную указать каждый символ маски в отдельном блоке |
|
27 |
Включение валидации обратной зависимости от чекбокса |
revertCheckbox |
boolean |
При наличии соответствующей зависимости, позволяет сделать поле доступным для редактирования в случае, если активирован чекбокс |
28 |
Пояснительные переходы |
clarifications |
array of objects |
Позволяет раскрыть блок «Настройка пояснительных переходов в компонентах» или сделать список ссылок на пояснительные переходы |
29 |
Настройка пояснительных переходов в компоненте |
acceptableTypes |
additionalProperties |
Позволяет настроить модальные окна |
30 |
Ссылки на значения атрибутов для подстановки в отображаемый текст |
refs |
array of objects |
Ссылки на значения компонентов, которые необходимо отобразить |
31 |
Настройка формирования health-метрик |
healthList |
array of objects |
Позволяет задать список событий компонента, по которым будут формироваться health-запросы |
>
32 |
Идентификатор подсказки/саджеста/suggest |
suggestionId |
string |
Механизм отображения пользователю набора подходящих для ввода данных и автоматическое заполнение полей формы этими данными |
33 |
Вычисляемые аргументы компонента (linkedValues) |
linkedValues |
array |
Атрибуты компонента, позволяющие реализовать сложный функционал |
34 |
Идентификаторы компонентов, для которых чистить кэш |
clearCasheForComponents |
array |
Если ответ на текущий компонент отличается от того, что указан в cachedAnswers, при наличии, то будут удалены все cachedValues, указанные в этом поле |
Пример JSON структуры компонента передаваемой в DTO
{ “visited”: true, “value”: “Фамилия” } |
Варианты использования
Данный компонент можно использовать для реализации проверки вводимых значений при помощи регулярных выражений, а также по заданному выражению. Для этого необходимо в расширенном режиме в блоке «Правила валидации» выбрать «Проверка значений по заданному выражению» и в поле «Выражение для проверки введённого значения» указать правило проверки
В примере ниже реализована проверка на ввод в зависимости от значений в других строках. То есть сумма первого слагаемого и удвоенного второго должна быть больше разности вводимого значения и 10