チュートリアル：データ入力フォームの作成

このチュートリアルでは、*入力ウィジェットを使用して、ステップに入力フォームを作成する * 変数とテーブルに入力データを保存する * ステップでテーブルのレコードを確認する

このチュートリアルでは、アプリにデータを保存する方法と、アプリからテーブルに入力データを保存する方法を学びます。

{height="" width=""} この2つの演習の最後には、次のようなデータ入力アプリができあがります。

練習1：入力データをアプリに保存する

この演習では、入力データを変数に保存する基本的なステップを作成します。

新規アプリの作成

1. {height=""幅=""}。
2. 右上の**+ Create App**をクリックします。
3. アプリ名を「Data Entry Form - Example」とする。{height="" width=""}。
4. 作成」をクリックします。

アプリの詳細ページから、右上の[**編集]**をクリックするか、無題のステップ名をクリックしてアプリエディタに入ります。

可変データソースによる入力ウィジェットの追加

1. **Inputs］**タブをクリックし、［Checkbox］を選択します。
2. サイドペインで、ラベルに名前を付けます：「Work order completed（作業指示完了）」という名前を付けます。
3. データソース]で空のボックスをクリックし、[ 変数を追加]をクリックします。
4. 変数名を "Work order completed "とし、デフォルト値を"**no "**に変更する。{height="" width=""}.

ウィジェットの構成は以下のようになる：

{height=""幅=""}」のようになります。

1. **Inputs]**タブから[**Date picker]**ウィジェットを追加します。
2. サイド・ペインで、ラベルに名前を付けます：サイド・ペインで、Labelに "Date completed "という名前を付けます。
3. Datasource]で空のボックスをクリックし、[+ Add variable]をクリックします。
4. 変数名を "Date completed "とし、+ Createをクリックする。

ウィジェットの構成は次のようになります：{height="" width=""}.

入力データを保存するトリガーを作成する

1. **Buttons]**タブをクリックし、[**Submit]**を選択します。
2. サイド・ペインで、「Triggers」の隣にある「+」記号をクリックします。
3. トリガーのタイトルを "Save app data "とする。
4. Thenセクションで、ドロップダウンからAppを選択する。次に、「Save All App Data」を選択する。{height="" width=""}保存をクリックする。

これで、変数を使用して値を保存する基本的なデータ入力ステップができました。{height="" width=""} このアプリを開発者モードでテストすると、以下のようになります。

変数が補完データに格納されていることに注目してください。

練習2：入力データをテーブルに保存する

このエクササイズでは、値を Work Orders テーブルに保存するデータ入力ステップを作成します。また、アプリのステップからテーブルのレコードを表示できるようにします。1.新しいステップを追加し、名前を「演習 2」とします。

テーブルをアプリに追加します。

1. Recordsタブをクリックし、+ Add tableを選択します。
2. Work Ordersテーブルを選択し、Addをクリックします。{height="" width=""}。
3. レコードプレースホルダーの横にある**+**アイコンをクリックします。
4. レコード・プレースホルダーに名前を付けます：「Current Work Orders（現在の作業指示）」と名付けます。レコード・プレースホルダの追加］をクリックする。

{height="" width=""} をクリックします。

データフォームの入力を作成する

1. **入力]**をクリックし、[**単一選択]**を選択します。
2. サイド・ペインで、ウィジェットにラベルを付けます：「Product" とラベル付けします。
3. データ・オプション]で、空白の**[データ・ソース]フィールドをクリックし、[変数を追加**]をクリックします。
4. 変数名を "Product "とし、+ Createをクリックする。{height="" width=""}.
5. 選択オプションで、以下のオプションを追加する：
6. 自転車フレーム
7. ホイール
8. ドライブトレイン

{数値入力ウィジェットを追加します。｝

1. ステップにNumber Inputウィジェットを追加します。
2. ラベルに名前を付ける："数量 "と名付ける。
3. データ・オプション]で、空白の[データ・ソース]フィールドをクリックし、[変数を追加]をクリックする。
4. 変数名を "Product "とし、+ Createをクリックする。{height="" width=""}。
5. Validation Rules（検証ルール）で、＋をクリックしてルールを追加する。
6. Greater Than」を選択し、静的値として「0」を入力する。

{高さ="" 幅=""}。

入力値を保存するボタン・トリガーを作成する

1. ステップにボタンを追加する。
2. サイドペインにテキストを追加する：「作業指示書を作成する。
3. トリガー］で ［+］をクリックする。
4. トリガーに名前を付ける：「入力値を新しい作業指示レコードに保存する。
5. トリガーに以下のアクションを追加する：
6. テーブルレコード → レコードの作成 → 式：RANDOMSTRING()→ 現在の作業オーダー
7. データ操作 → 保存 → 変数 → 商品 → テーブルレコード → 現在の受注 → 商品
8. データ操作 → ストア → 変数 → 数量 → テーブルレコード → 現在の受注 → 数量

{高さ＝"" 幅＝""｝

ステップで受注表を表示する

1. 埋め込み］をクリックし、［インタラクティブ・テーブル］を選択します。
2. サイド・ペインの［データソース］で、［チューリップ・テーブル］を選択します。
3. 次のドロップダウンで、作業指示テーブルを選択します。
4. {height="" width=""}.
5. Fields］の下に、以下のフィールドを追加する：
6. ID
7. 製品
8. 数量
9. 作成日
10. ステータス
11. カラー

{高さ="" 幅=""｝

1. {height=""width=""}。

これで、レコード・プレースホルダに変数を格納し、現在のプレースホルダからテーブル・レコードを作成するデータ入力フォームができました。このステップを開発者モードでテストすると、次のようになります：

{height="" width=""} です。

数量に "0 "を入力すると、エラーメッセージが表示され、許容可能な値を入力するようユーザーに促します。これは、ウィジェットに設定したバリデーションルールから可能です。

次のステップ

データ入力フォームを作成したので、アプリの構築やデータの視覚化方法について学びましょう：

• チュートリアル: 最初のアプリを作る
• チュートリアル最初の分析を作成する