단계에 입력 위젯 추가하기
  • 21 Oct 2024
  • 4 읽을 분
  • 기여자

단계에 입력 위젯 추가하기


기사 요약

입력 위젯을 사용하여 모든 단계에 데이터 입력하기

작업자가 거쳐야 하는 단계와 라우팅 옵션의 수를 줄이려면 지침 단계 내에 데이터를 입력하는 것이 더 쉬운 경우가 많습니다. 입력 위젯을 사용하여 튤립 테이블에 직접 쓸 수도 있습니다.

다음 문서에서는 앱 단계에 데이터 입력 필드 또는 입력 위젯을 시작하는 방법에 대해 설명합니다.

사용자 입력을 저장하는 위젯 만들기

도구 모음에서 입력 옵션을 선택합니다:

Widget Toolbar.png

이 옵션을 선택하면 다음과 같은 옵션이 제공됩니다:

Inputs Dropdown.png

  • 체크박스
  • 텍스트
  • 파일
  • 숫자
  • 단일 선택
  • 다중 선택
  • 날짜 선택기
  • 이미지
  • 서명

데이터 소스 선택

변수

기존 변수를 선택하거나 새 변수를 만들어 입력 위젯에 할당합니다:

입력에 변수를 할당하면 앱 전체에서 입력 값을 참조하여 다양한 로직을 구축할 수 있습니다.

튤립 테이블 레코드

입력 위젯을 튤립 테이블 레코드에 할당하면 테이블 레코드를 직접 편집할 수 있습니다. 드롭다운에서 테이블 레코드의 열을 지정합니다:

그러면 입력 위젯의 값이 테이블 레코드에 자동으로 저장됩니다.

트리거 구성하기

대부분의 입력 위젯에는 작업이 발생할 때 트리거가 실행되도록 구성할 수 있는 옵션이 있습니다. 동작의 유형과 관련 위젯은 아래에 설명되어 있습니다.Triggers.png

Enter 키

엔터 키 트리거는 엔터 키를 눌렀을 때 조건이 충족되면 작업을 수행한다는 로직을 따릅니다. 이 옵션은 텍스트 및 숫자 입력 위젯과 연관되어 있습니다.

입력 변경

입력 변경 트리거는 입력이 변경될 때 조건이 충족되면 작업을 수행한다는 로직을 따릅니다. 이 옵션은 체크박스, 단일 선택, 다중 선택, 날짜 선택기 및 이미지 입력 위젯과 연결됩니다.

입력 위젯 유형

체크박스

이 확인란 옵션은 부울 출력을 제공하며, 확인란을 선택하거나 선택 취소하여 예 또는 아니요로 바꿀 수 있습니다. 체크박스에 대한 자세한 내용은 이 문서(https://support.tulip.co/docs/how-to-use-the-checkbox-widget)를 참조하세요.

텍스트

텍스트 입력을 선택하면 위젯을 튤립 테이블의 열 또는 변수에 할당할 수 있습니다. 체크박스와 마찬가지로 나중에 앱에서 데이터를 사용하려면 텍스트 입력 위젯에 변수를 할당해야 합니다. 텍스트 변수 목록에서 이 변수를 선택하거나 변수 선택 드롭다운에서 인라인으로 생성합니다.

이 변수는 양식 단계 입력에서 생성된 변수와 동일한 방식으로 작동합니다.

텍스트 입력 위젯을 더 크게 만들려면 컨텍스트 창에서 '여러 줄' 토글을 선택합니다. 그런 다음 공백을 채우도록 치수를 변경할 수 있습니다.

파일

파일 입력 위젯은 텍스트 입력과 비슷하지만, 튤립 표의 열 또는 변수에 입력을 할당할 수 있는 기능이 있습니다. 나중에 앱에서 데이터를 사용하려면 파일 입력 위젯에 변수를 할당해야 합니다. 파일 변수 목록에서 이 변수를 선택하거나 변수 선택 드롭다운에서 인라인으로 생성합니다.File Input Widget.png

구름 모양의 업로드 버튼을 사용하여 디바이스에서 입력 위젯으로 파일을 가져오거나 파일 URL을 직접 입력할 수 있습니다.

숫자

숫자 입력 위젯도 입력한 데이터를 적절하게 사용하기 위해 숫자 변수를 할당해야 한다는 점에서 이전 위젯과 유사합니다. 기존 변수를 선택하거나 이름을 입력하고 만들기를 선택하여 변수를 생성할 수 있습니다.

변수를 추가하면 이 경우 추가 옵션이 표시됩니다.

형식 옵션에서는 정보 표시를 위해 정수와 십진수를 모두 선택할 수 있습니다. 정수는 정수만 표시하고 소수는 선택한 유효 숫자 수까지 표시합니다. 정밀도 옵션은 표시할 자릿수를 결정합니다.

단일 선택

이 위젯을 가장 잘 사용하려면 배열을 이미 이해하고 있는지 확인하세요.

단일 선택 입력 위젯을 사용하면 목록에서 여러 가지 강력한 구성으로 옵션을 선택할 수 있습니다. 다른 입력 위젯과 마찬가지로 데이터 소스 유형을 튤립 테이블 레코드 또는 변수로 선택할 수 있습니다:

이를 사용하는 매우 간단한 방법 중 하나는 변수 필드에 텍스트 변수를 할당하거나 생성하여 정적으로 생성된 값과 함께 드롭다운으로 표시하는 것입니다. 옵션 필드 바로 아래에서 '새 옵션'을 선택하여 옵션을 추가할 수 있습니다. 완료되면 다음과 같이 표시됩니다:

표시 필드를 메뉴로 변경하면 위젯이 다음과 같은 형태로 표시됩니다:

옵션을 배열 변수의 일부로 나열할 수도 있습니다.

이 방법에서는 선택한 Array의 모든 구성 요소를 선택할 수 있습니다. 배열은 옵션 아래에서 선택된 변수이며, 'Test'라는 이름의 변수는 옵션 목록에서 사용자가 선택한 값을 저장합니다.

배열 변수 구성은 기존 배열에서 옵션을 가져올 수 있을 뿐만 아니라 새로운 값을 배열에 푸시하여 선택할 수 있기 때문에 매우 강력합니다. 예를 들어 버튼에 트리거를 추가하여 이 위젯에 옵션을 추가할 수 있습니다. 트리거는 다음과 같이 보일 수 있습니다:

이 예에서는 버튼이 메뉴 또는 드롭다운 입력 위젯에 '새로운 것' 옵션을 추가합니다.

다중 선택

다중 선택 옵션은 단일 선택 위젯과 동일한 구성을 따르지만 몇 가지 구성에 약간의 차이가 있습니다. 다중 선택 위젯은 튤립 테이블 레코드에 할당할 수 없습니다. 또한 이 위젯의 결과 출력은 단일 선택 위젯에서와 같이 단순한 텍스트 변수가 아닌 텍스트 배열이어야 합니다.

이렇게 하면 메뉴 또는 드롭다운에서 여러 옵션을 선택하고 이를 배열 변수로 출력할 수 있습니다. 보기 및 선택 옵션의 구성은 위에 설명된 단일 선택 위젯 옵션과 완전히 동일합니다. 다중 선택 위젯은 아래와 같이 표시됩니다.

날짜 선택기

선택한 후에는 위젯과 연결할 날짜 변수를 선택하거나 생성하거나 튤립 테이블의 열을 선택합니다. 데이터 소스로 튤립 테이블 레코드를 선택하면 입력이 테이블에 직접 기록됩니다. 변수를 데이터 소스로 선택하면 선택한 날짜/시간의 출력이 지정된 변수에 저장됩니다.

그런 다음 위젯을 사용하면 앱 내에서 사용자가 일반적인 단계에서 날짜 시간을 선택할 수 있습니다. 인터페이스는 플레이어에서 다음과 같이 표시됩니다:

이미지

이미지 위젯을 사용하면 운영자가 스텝에서 이미지를 찍거나 로컬 저장소에서 이미지를 업로드할 수 있습니다. 이 위젯은 촬영한 이미지를 적절한 변수에 저장하기 위해 이미지 URL 데이터 유형 변수가 필요합니다.

튤립 테이블 레코드의 데이터 소스를 선택하면 이미지를 튤립 테이블에 직접 저장할 수 있습니다. 이 위젯의 컨텍스트 창에서 가로 세로 비율을 조정할 수도 있습니다.

플레이어 내에서 사용자는 카메라에서 라이브 뷰를 '뒤집기' 및 '회전'할 수도 있습니다.

서명

서명 입력 위젯은 운영자가 변수, 테이블 레코드의 필드 또는 둘 다의 데이터에 서명하고 유효성을 검사하도록 요구하는 데 사용할 수 있습니다.Signature Input Widget.png

서명으로 유효성을 검사할 데이터를 정의해야 하며, 입력 위젯에는 서명자 지정, 서명 의미에 대한 설명 추가, 필요에 따라 댓글 필수 지정 등 다른 구성 옵션도 포함되어 있습니다.


원하는 것을 찾았나요?

community.tulip.co로 이동하여 질문을 게시하거나 다른 사람들이 비슷한 질문을 한 적이 있는지 살펴볼 수도 있습니다!


이 문서가 도움이 되었습니까?