입력 위젯에 대한 데이터 유효성 검사

Prev Next

위젯, 버튼, 트리거를 사용하여 Tulip에서 데이터를 검증하는 방법에 대해 알아보세요.

운영자 입력에 데이터 유효성 검증을 적용하면 품질 문제를 줄이고 프로세스에서 사용되는 양식을 표준화할 수 있습니다. 사용자가 유효성 검증 요구 사항에 부합하지 않는 데이터 값을 입력하면 오류 메시지가 표시됩니다. 또한, 입력된 데이터가 요구 사항을 충족하지 않을 경우 트리거 로직을 사용하여 운영자가 앱을 계속 진행하지 못하도록 막을 수 있습니다.

데이터 유효성 검사는 다음과 같은 이점을 통해 앱 구축 과정을 훨씬 더 원활하게 만듭니다.

  • 트리거 관리 간소화: 트리거의 수와 복잡성을줄여앱 개발 및 유지 관리를 효율화합니다. 앱 개발에 소요되는 시간을 단축할 수 있습니다.
  • 동적 단계 생성: 버튼의 활성화/비활성화 기능을 통해 앱에 동적 제어 기능을추가하여상호작용성과 유연성을 높일 수 있습니다.
  • 앱 유지 관리 부담 감소: 앱을 검토하고 이해하는 데 소요되는 시간을 줄일 수 있습니다. 트리거에 미치는 영향을 걱정할 필요 없이 위젯을 복사하여 붙여넣을 수 있습니다.

또한 동적으로 활성화 및 비활성화되는 버튼을 통해 직관적인 앱 경험을 제공할 수 있습니다.

입력 위젯별로 사용 가능한 유효성 검사 규칙

모든 입력 위젯을 데이터 유효성 검사에 사용할 수 있지만, 일부 입력 위젯에는 데이터 매개변수를 설정하는 유효성 검사 규칙이 있습니다. 아래 표는 각 Input Widget에서 사용할 수 있는 유효성 검사 규칙을 요약한 것입니다.

입력 위젯 유효성 검사 규칙
체크박스 해당 없음
텍스트 포함, 포함되지 않음, ~로 시작, ~로 끝남, 최대 문자 수, 최소 문자 수, 이메일 주소, URL ( 여기에 따름)
여러 줄 포함, 시작, 끝, 최대 문자 수, 최소 문자 수, 포함되지 않음
파일 해당 없음
숫자 같음, 다름,보다 큼,보다 크거나 같음,보다 작음,보다 작거나 같음,범위 내(포함),범위 외(제외), 정확한 소수점 자리 수
단일 선택 해당 없음
다중 선택 최소 선택 개수, 최대 선택 개수
데이터 선택기 '이다', '이전', '이후', '범위 내(포함)', '범위 외(제외)', '~일 또는 그 이전', '~일 또는 그 이후'
이미지 해당 없음
전자 서명 해당 없음

유효성 검사 규칙 생성

  1. 유효성 검사 규칙을 사용할 수 있는 입력 위젯을 선택합니다(위 표 참조).
  2. 컨텍스트 창에서 ‘유효성 검사 규칙’ 옆에 있는 + 아이콘을 클릭합니다.
  3. 입력 위젯에 추가할 규칙을 선택합니다.

Validation Rules side pane ex

  1. 검증할 규칙의 데이터 소스를 선택합니다. 정적 값이나 변수를 사용할 수 있습니다.

Validation rules configuration ex

  1. + 버튼을 클릭하여 규칙을 추가합니다.

유효성 검사 규칙 순서 변경

유효성 검사 규칙의 순서는 입력된 데이터 값이 유효하지 않을 때 가장 먼저 표시되는 오류 메시지의 순서와 일치합니다.

아래 예시에서 입력된 데이터는 두 유효성 검사 규칙 모두를 위반합니다. 그러나 표시되는 오류 메시지는 먼저 구성된 규칙과 관련된 것입니다.

예 1“Tulip 포함”이 첫 번째로 실패한 규칙이므로, 이에 따라 오류 메시지가 표시됩니다.

Validation Rule Order Ex1

예 2“Hello로 시작” 규칙이 가장 먼저 실패하므로, 이에 따라 오류 메시지가 표시됩니다.

Validation Rule Order Ex2

이를 통해 앱 제작자는 운영자에게 표시할 오류 메시지의 우선순위를 지정할 수 있습니다. 유효성 검사 규칙의 순서를 변경하려면 여섯 개의 점 아이콘을 클릭한 후 규칙 앞이나 뒤로 드래그하세요.

Reorder Validation Rules

입력 데이터 필수 지정

유효성 검사 규칙을 필수로 표시하면, 입력이 유효한 것으로 간주되기 위해 운영자가 입력을 완료해야 한다는 규칙이 추가됩니다. 모든 입력 위젯 유형에 이 기능을 사용할 수 있습니다. 입력 위젯이 필수로 표시되면 앱에서 해당 입력 위젯 옆에 빨간색 별표가 나타납니다. 이를 설정하려면 사이드 패널의 ‘유효성 검사 규칙’ 섹션 헤더 아래에 있는 ‘필수 표시’ 슬라이더를 토글하세요.

Validation rules mark required

입력 유효성 검사 오류 메시지

사이드 패널의 ‘유효성 검사 규칙’ 섹션 내 ‘오류 서식’ 드롭다운 메뉴에서는 앱이 Player에서 실행될 때 입력 데이터 오류가 운영자에게 어떻게 표시될지에 대한 옵션을 제공합니다.

Validation rules error formatting

운영자에게 오류를 표시하는 세 가지 옵션은 다음과 같습니다. 1. 유효성 검사 규칙 오류 메시지 표시 * 입력 필드를 빨간색 테두리로 표시하고 운영자에게 오류 메시지를 표시합니다. 2. 입력 필드만 테두리 표시 * 입력 필드를 빨간색 테두리로 표시합니다. 3. 오류 숨기기 * 시각적 표시가 제공되지 않습니다.

버튼의 동적 활성화 및 비활성화

동적 컨트롤을 사용하여 운영자가 버튼을 누를 수 있는 시점을 결정합니다. 버튼이 비활성화되면 색상이 흐릿하게 표시되며, 운영자는 해당 버튼을 누를 수 없습니다.

Enabled vs disabled buttons

이 컨트롤은 전자 서명 위젯에서도 사용할 수 있습니다.

Enabled vs disabled eSignature

선택한 버튼에 대한 사이드 패널의 ‘상호작용’ 섹션에서 ‘활성화’ 상태를 설정하여 버튼을 동적으로 활성화하거나 비활성화할 수 있습니다. 기본적으로 버튼의 활성화 상태는 ‘예’로 설정되어 있습니다.

button side pane enabled state yes

버튼의 활성화 상태를 결정하는 동적 제어를 추가하는 방법에는 다음과 같은 몇 가지가 있습니다. 1. 부울 변수 지정 2. 유효성 검사 규칙이 적용된 입력 위젯이 포함된 단계에서 사용자 입력의 유효성 3. 입력된 모든 항목이 유효성 검사 규칙을 충족하는지 확인하는 ‘모든 위젯’ 옵션

Button side pane enabled state all widgets

  1. 표현식 사용

표현식을 사용하여 버튼 활성화/비활성화

특정 위젯 집합을 기준으로 버튼의 활성화/비활성화 여부를 설정하려면 ‘표현식 사용’을 선택하여 사용자 정의 조건을 작성하십시오.

부울 조건(true 또는 false)으로 평가되는 표현식을 작성해야 합니다. 유효한 표현식을 올바르게 구성하면 표현식 편집기의 왼쪽 하단에 해당 사실이 표시됩니다.

**예제 1:**아래 예제에서는 모듈로 연산을 사용하여 숫자 입력 위젯에 입력된 값이 홀수인지 짝수인지 판단합니다. 값이 홀수이면 버튼이 활성화되고, 짝수이면 버튼이 비활성화됩니다.

enable-disable buttons expressions ex1(1)

예제 2:표현식을사용하면여러 조건을 결합할 수도 있습니다. 아래 예제에서 버튼이 활성화되려면 값이 홀수여야 하며, 숫자 입력 위젯에 설정된 유효성 검사 조건도 충족해야 합니다.

enable-disable buttons expressions ex2(1)

아래의 입력 값을 입력하면 버튼이 비활성화됩니다. 입력된 값이 홀수이긴 하지만, 입력 위젯의 유효성 검사 규칙을 충족하지 않기 때문입니다.

enable-disable buttons expressions ex2 invalid input

아래의 입력 값은 입력된 값이 홀수이면서 입력 위젯의 유효성 검사 규칙도 충족하므로 버튼이 활성화됩니다.

enable-disable buttons expressions ex2 valid input

트리거에서의 입력 위젯 유효성 검사

트리거의 If 조건에서 입력 위젯 유효성 검사를 사용할 수 있습니다. 이를 통해 앱 개발자는 운영자가 입력한 특정 값에 의존하지 않고 해당 값의 유효성에 기반한 로직을 신속하게 생성할 수 있습니다.

Input validation trigger ex1

위젯 유효성 정보는 트리거를 사용하여 변수 및 테이블 레코드에 저장할 수도 있습니다.

Input validation trigger ex2


원하시는 정보를 찾으셨나요?

community.tulip.co에 방문하여 질문을 게시하거나 다른 사용자들이 비슷한 문제를 겪은 적이 있는지 확인해 보세요!