Добавление виджетов ввода в шаги
  • 01 Nov 2022
  • 5 Минуты для чтения
  • Авторы

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


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

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

Данные можно вводить на шаге формы, но как насчет ввода данных на стандартном производственном шаге?

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

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

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

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

Widget Toolbar.png{height="" width=""}.

После выбора у вас появятся следующие опции:

Inputs Dropdown.png

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

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

Переменная

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

{height="" width="350"}.

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

Запись в таблице Tulip

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

{height="" width="350"}.

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

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

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

Клавиша Enter

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

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

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

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

Флажок

Опция флажка обеспечивает булевский вывод, который можно перевести в состояние "Да" или "Нет", установив или сняв флажок. Более подробную информацию о флажках можно найти в [этой статье здесь](https://support.tulip.co/docs/how-to-use-the-checkbox-widget.

Текст

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

{height="" width="350"}.

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

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

Файл

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

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

Число

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

{height="" width="250"}.

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

{height="" width="250"}.

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

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

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

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

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

{height="" width="250"}.

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

{height="" width="250"}.

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

{height="" width="350"}.

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

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

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

Multiselect

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

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

Виджет выбора даты

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

{height="" width="350"}.

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

{height="" width="350"}.

Изображение

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

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

{height="" width="600"}.

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

Подпись

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

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


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

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


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