연습: 데이터 입력 양식 작성

Prev Next

이 단계에서는* 입력 위젯을 사용하여 단계에서 입력 양식 만들기* 입력 데이터를 변수와 테이블에 저장하기* 단계에서 테이블 레코드 검토하기를****수행합니다.

이 연습에서는 앱에 데이터를 저장하는 방법과 앱에서 테이블로 입력 데이터를 저장하는 방법을 배웁니다.

두 연습이 모두 끝나면 다음과 같은 데이터 입력 앱이 완성됩니다.ex first data entry app walkthrough

연습 1: 입력 데이터를 앱에 저장하기

이 연습에서는 입력 데이터를 변수에 저장하는 기본 단계를 만듭니다.

새 앱 만들기

  1. 탭에서 앱을 클릭합니다.Apps tab
  2. 오른쪽 상단의 + 앱 만들기를 클릭합니다.
  3. 앱의 이름을 "데이터 입력 양식 - 예시"로 지정합니다. 선택 사항으로 다른 사용자가 이 앱의 용도를 알 수 있도록 설명을 추가할 수 있습니다.ex data entry create new app
  4. 만들기를 클릭합니다.

앱 세부 정보 페이지에서 오른쪽 상단의 편집을 클릭하거나 제목 없는 단계 이름을 클릭하여 앱 편집기로 들어갈 수 있습니다.

가변 데이터 소스가 있는 입력 위젯 추가

  1. 입력 탭을 클릭하고 확인란을 선택합니다.
  2. 측면 창에서 레이블의 이름을 지정합니다: "작업 주문 완료"로 지정합니다.
  3. 데이터 소스 아래에서 빈 상자를 클릭한 다음 + 변수 추가를 클릭합니다.
  4. 변수 이름을 "작업 주문 완료"로 지정하고 기본값을 no로 변경합니다. ex data entry work order completed variable {높이="" 너비=""}를 클릭합니다.

위젯 구성은 다음과 같이 표시됩니다:

ex first data entry Input widget side pane config

  1. 입력 탭에서 날짜 선택 위젯을 추가합니다.
  2. 사이드 창에서 레이블의 이름을 지정합니다: "완료된 날짜"로 지정합니다.
  3. 데이터 소스 아래에서 빈 상자를 클릭한 다음 + 변수 추가를 클릭합니다.
  4. 변수 이름을 "완료된 날짜"로 지정하고 + 만들기를 클릭합니다.

위젯 구성은 다음과 같이 표시됩니다:ex first data entry input widget config2{높이="" 너비=""}

입력 데이터를 저장하는 트리거 만들기

  1. 버튼 탭을 클릭하고 제출을 선택합니다.
  2. 사이드 창에서 트리거 옆의 + 더하기 기호를 클릭합니다.
  3. 트리거의 제목을 "앱 데이터 저장"으로 지정합니다.
  4. 다음 섹션의 드롭다운에서 앱을 선택합니다. 그런 다음 모든 앱 데이터 저장을 선택합니다. 저장을 클릭합니다.ex first data entry save app data trigger

이제 변수를 사용하여 값을 저장하는 기본 데이터 입력 단계가 완료되었습니다. 다음은 개발자 모드에서 앱을 테스트했을 때의 모습입니다:ex first data entry exercise 1 test

변수가 단계 화면 아래에서 볼 수 있는 완료 데이터에 저장되는 것을 확인할 수 있습니다.

연습 2: 입력 데이터를 테이블에 저장하기

In order to follow this walkthrough, you must first complete the exercises in Build Your First Table.

이 연습에서는 작업 주문 테이블에 값을 저장하는 데이터 입력 단계를 만듭니다. 또한 앱 1단계에서 테이블의 레코드를 볼 수 있습니다. 새 단계를 추가하고 이름을 "연습 2"로 지정합니다.

앱에 테이블 추가하기

  1. 레코드 탭을 클릭하고 + 표 추가를 선택합니다.
  2. 작업 지시서 테이블을 선택한 다음 추가를 클릭합니다.ex first data entry add table
  3. 레코드 플레이스홀더 옆의 + 아이콘을 클릭합니다.
  4. 레코드 플레이스홀더의 이름을 지정합니다: "현재 작업 주문"이라고 합니다. 레코드 플레이스홀더 추가를 클릭합니다.

ex first data entry record placeholder

데이터 양식 입력 만들기

  1. 입력을 클릭하고 단일 선택을 선택합니다.
  2. 측면 창에서 위젯에 레이블을 지정합니다: "제품"이라고 레이블을 지정합니다.
  3. 데이터 옵션에서데이터 소스 필드를 클릭한 다음 + 변수 추가를 클릭합니다.
  4. 변수 이름을 "Product"로 지정한 다음 + 생성을 클릭합니다.ex first data entry product input data source
  5. 선택 옵션에서 다음 옵션을 추가합니다:
  6. 자전거 프레임
  7. 바퀴
  8. 구동계

ex first data entry product selection options

  1. 단계에 숫자 입력 위젯을 추가합니다.
  2. 레이블 이름을 지정합니다: "수량"으로 지정합니다.
  3. 데이터 옵션에서데이터 소스 필드를 클릭한 다음 + 변수 추가를 클릭합니다.
  4. 변수 이름을 "Product"로 지정한 다음 + 생성을 클릭합니다.ex first data entry quantity config
  5. 유효성 검사 규칙에서 +를 클릭하여 규칙을 추가합니다.
  6. 보다 큼을 선택하고 정적 값으로 "0"을 입력합니다.

ex first data entry validate quantity input

입력 값을 저장하는 버튼 트리거 만들기

  1. 단계에 버튼을 추가합니다.
  2. 측면 창에 텍스트를 추가합니다: "작업 주문 만들기"라는 텍스트를 추가합니다.
  3. 트리거 아래에서 +를 클릭합니다.
  4. 트리거의 이름을 지정합니다: "새 작업 주문 레코드에 입력 값 저장"이라고 합니다.
  5. 트리거에 다음 작업을 추가합니다:
  6. 테이블 레코드 → 레코드 만들기 → 표현식: 랜덤스트링() → 현재 작업 주문
  7. 데이터 조작 → 저장 → 변수 → 제품 → 테이블 레코드 → 현재 작업 주문 → 제품
  8. 데이터 조작 → 저장소 → 변수 → 수량 → 테이블 레코드 → 현재 작업 주문 → 수량

ex first data entry trigger actions

작업 주문 테이블 단계별 보기

  1. 임베드를 클릭하고 대화형 테이블을 선택합니다.
  2. 데이터 소스 아래의 사이드 패널에서 튤립 테이블을 선택합니다.
  3. 다음 드롭다운에서 작업 주문 테이블을 선택합니다.
  4. 연결된 자리 표시자 아래에서 현재 작업 주문을 선택합니다.ex first data entry interactive table datasource
  5. 필드 아래에 다음 필드를 추가합니다:
  6. ID
  7. 제품
  8. 수량
  9. 생성 날짜
  10. 상태
  11. 색상

ex first data entry interactive table fields

  1. 위젯 주변의 사각형을 클릭하고 드래그하여 치수를 조정하고 모든 필드를 확인합니다.ex first data entry adjust interactive table

이제 변수를 레코드 플레이스홀더에 저장하고 현재 플레이스홀더에서 테이블 레코드를 생성하는 데이터 입력 양식이 생겼습니다. 다음은 개발자 모드에서 테스트했을 때 단계의 모습입니다:

ex first data entry exercise 2 test

수량에 "0"을 입력하면 사용자에게 허용되는 값을 입력하라는 오류 메시지가 표시됩니다. 이는 위젯에서 설정한 유효성 검사 규칙에서 가능합니다.ex first data entry number widget error message

다음 단계

이제 데이터 입력 양식을 만들었으므로 앱 구축 또는 데이터 시각화 방법에 대해 알아보세요: