Войти

Компонент для ввода строки (StringInput)

Общая информация

Компонент StringInput предназначен для ввода пользователем текстовой информации

Поддерживаемые экраны

Компонент может быть задействован на экранах типа:

Внешний вид компонента

В услуге

В конструкторе

стринг_2.png

Структура компонента 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

Рисунок 3.png

Авторизуйтесь, чтобы оставить комментарий к статье