Добавление виджетов ввода в шаги
  • 05 Jan 2024
  • 5 Минуты для чтения
  • Авторы

Добавление виджетов ввода в шаги


Вводный текст

Ввод данных на любом шаге с помощью виджетов ввода

Чтобы сократить количество шагов и вариантов маршрутизации, которые должен пройти оператор, часто проще вводить данные на шаге инструкции. Вы также можете вводить данные непосредственно в таблицы Tulip с помощью виджетов ввода.

В следующей статье описывается, как инициировать поле ввода данных, или виджет ввода, на любом шаге приложения.

Создание виджета для хранения пользовательского ввода

Выберите опцию "Ввод" на панели инструментов:

Widget Toolbar.png

После выбора у вас появятся следующие возможности:

Inputs Dropdown.png

  • Флажок
  • Текст
  • Файл
  • Номер
  • Одиночный выбор
  • Мультиселект
  • Выбор даты
  • Изображение
  • Подпись

Выбор источника данных

Переменная

Выберите существующую переменную или создайте новую переменную, чтобы назначить ее виджету ввода:

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

Запись в тюльпановой таблице

Назначив виджет ввода на запись таблицы Tulip, вы можете напрямую редактировать запись таблицы. Укажите столбец записи таблицы в выпадающем списке:

Это автоматически сохранит значение виджета ввода в записи таблицы.

Настройка триггеров

Во многих виджетах ввода есть возможность настроить триггер, который будет срабатывать при выполнении того или иного действия. Ниже описаны типы действий и соответствующие им виджеты.Triggers.png

Клавиша ввода

Триггер "Клавиша ввода" работает по следующей логике: при нажатии клавиши ввода, если выполняются условия, выполняется действие. Этот параметр связан с виджетами ввода текста и цифр.

Изменение ввода

Триггер Input Change работает по следующей логике: при изменении ввода, если условия выполнены, выполняется действие. Этот параметр связан с виджетами ввода checkbox, single select, multiselect, date picker и image.

Типы виджетов ввода

Флажок

Опция флажка обеспечивает булевский вывод, который можно перевести в состояние "Да" или "Нет", установив или сняв флажок. Более подробную информацию о флажках можно найти на сайте эта статья здесь.

Текст

При выборе текстового ввода вы можете назначить виджет столбцу таблицы Tulip или переменной. Аналогично флажку, переменная должна быть назначена виджету текстового ввода, чтобы использовать данные позже в приложении. Выберите эту переменную из списка текстовых переменных или создайте ее в строке из выпадающего списка "Выбор переменной".

Эта переменная ведет себя так же, как и переменная, созданная в форме ввода Form Step.

Если вы хотите сделать виджет ввода текста более крупным, выберите переключатель "Несколько строк" в контекстной панели. Затем вы можете изменить размеры, чтобы заполнить любое пространство.

Файл

Виджет ввода файла аналогичен текстовому вводу с возможностью назначить ввод столбцу таблицы Tulip или переменной. Переменная должна быть назначена виджету ввода файла, чтобы использовать данные позже в приложении. Выберите переменную из списка файловых переменных или создайте ее в строке из выпадающего списка "Выбор переменной".File Input Widget.png

Чтобы импортировать файл с устройства в виджет ввода, можно воспользоваться кнопкой загрузки в виде облака или ввести URL-адрес файла напрямую.

Число

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

После добавления переменной в этом случае появляется дополнительная опция.

В параметре Формат для отображения информации можно выбрать целочисленный или десятичный тип. Целочисленный тип отображает только целое число, а десятичный - до выбранного количества значащих цифр. Параметр Precision определяет количество отображаемых цифр.

Одиночный выбор

Чтобы наилучшим образом использовать этот виджет, убедитесь, что вы уже разбираетесь в массивах.

Виджет ввода Single Select позволяет выбрать опцию из списка, имея ряд мощных конфигураций. Как и в других виджетах ввода, вы можете выбрать тип источника данных: запись таблицы Tulip или переменная:

Один из очень простых способов использования - назначить или создать текстовую переменную в поле Variable и отобразить ее в виде выпадающего списка со статически созданными значениями. Вы можете добавить опции, выбрав "Новая опция" чуть ниже поля " Опции". После этого все выглядит следующим образом:

Если вы измените поле Display на Menu, виджет примет следующий вид для отображения:

Вы также можете перечислить параметры как части переменной массива.

В этом случае можно выбрать все компоненты выбранного Массива. Массив - это переменная, выбранная под Options, а переменная с именем 'Test' будет хранить выбранное пользователем значение из списка опций.

Использование конфигурации переменной массива является чрезвычайно мощным, поскольку позволяет брать опции из существующего массива, а также добавлять новые значения в массив для выбора. Например, кнопка может добавить опцию в этот виджет, добавив триггер. Триггер может выглядеть примерно так:

В этом примере кнопка добавляет опцию "Что-то новое" в виджет меню или выпадающего ввода.

Multiselect

Опция Multiselect имеет те же конфигурации, что и виджет Single Select, с некоторыми небольшими отличиями в настройках. Виджет Multiselect не может быть назначен на запись таблицы Tulip. Кроме того, результирующий вывод этого виджета должен быть текстовым массивом, а не просто текстовой переменной, как в виджете Single Select.

Это позволяет выбрать несколько вариантов из меню или выпадающего списка и вывести их в переменную Array. Конфигурация параметров просмотра и выбора точно такая же, как и в виджете Single Select, описанном выше. Виджет Multiselect будет отображаться так, как показано ниже.

Выбор даты

После выбора выберите или создайте переменную времени даты, которая будет связана с виджетом, или столбец таблицы Tulip Table. Если в качестве источника данных выбрана запись таблицы Tulip Table Record, данные будут записываться непосредственно в таблицу. Если в качестве источника данных выбрана переменная, вывод выбранного Datetime будет храниться в указанной переменной.

После этого виджет позволяет пользователю выбирать дату в приложении на обычном шаге. В проигрывателе интерфейс выглядит следующим образом:

Image

Виджет Image позволяет оператору либо сделать изображение на шаге, либо загрузить его из локального хранилища. Этому виджету нужна переменная типа данных Image URL, чтобы сохранить полученное изображение в соответствующей переменной.

Выбрав источник данных Tulip Table Record, вы можете сохранить изображение непосредственно в Tulip Table. Обратите внимание, что соотношение сторон также можно настроить в контекстной панели для этого виджета.

В проигрывателе пользователи также могут "перевернуть" и "повернуть" изображение с камеры в реальном времени.

Подпись

Виджет ввода подписи можно использовать для того, чтобы потребовать от оператора подписать и подтвердить данные в переменной, поля в записи таблицы или и то, и другое.Signature Input Widget.png

Данные, которые должны быть подтверждены подписью, должны быть определены, а виджет ввода включает в себя и другие параметры конфигурации, такие как назначение лица, подписавшего подпись, добавление описания значения подписи и обязательное добавление комментария, если это необходимо.


Вы нашли то, что искали?

Вы также можете зайти на community.tulip.co, чтобы задать свой вопрос или узнать, сталкивались ли другие с подобным вопросом!


Была ли эта статья полезной?