ステップに入力ウィジェットを追加する

入力ウィジェットをステップに追加する

入力ウィジェットを使ってステップにデータを入力

データはフォームステップに入力できますが、標準的な生産ステップにデータを入力するのはどうでしょうか？

オペレーターが通過しなければならないステップやルーティングオプションの数を減らすために、別のフォームステップではなく、指示ステップ内でデータを入力する方が簡単なことがよくあります。入力ウィジェットを使用して、チューリップ・テーブルに直接書き込むこともできます。

次の記事では、任意のアプリステップにデータ入力フィールド（入力ウィジェット）を作成する方法を説明します。

ユーザー入力を保存するウィジェットの作成

ツールバーの入力オプションを選択します：

選択すると、以下のオプションがあります：

• チェックボックス
• テキスト
• ファイル
• 番号
• 単一選択
• 複数選択
• 日付ピッカー
• 画像
• 署名

データソースの選択

変数

既存の変数を選択するか、入力ウィジェットに割り当てる新しい変数を作成します：

入力に変数を割り当てることで、入力値をアプリ全体で参照し、様々なロジックを構築することができます。

チューリップテーブルレコード

入力ウィジェットをTulipテーブルレコードに割り当てることで、テーブルレコードを直接編集できます。ドロップダウンでテーブルレコードのカラムを指定します：

これにより、入力ウィジェットの値が自動的にテーブルレコードに保存されます。

トリガーの設定

入力ウィジェットの多くには、アクションが発生したときにトリガーを設定するオプションがあります。アクションの種類と関連するウィジェットを以下に説明します。

エンターキー

Enter キーのトリガは、Enter キーが押されたときに、条件が満たされればアクションを実行するというロジックに従います。このオプションは、テキストと数値の入力ウィジェットに関連付けられます。

入力変更

入力変更トリガは、入力が変更されたときに、条件が満たされればアクションを実行するというロジックに従います。このオプションは、チェックボックス、単一選択、複数選択、日付ピッカー、および画像入力ウィジェットに関連付けられます。

入力ウィジェットの種類

チェックボックス

チェックボックスオプションは、ブール値出力を提供し、チェックボックスのオン/オフによってYesまたはNoにすることができます。チェックボックスの詳細については、この記事はこちら をご覧ください。

テキスト

テキスト入力を選択すると、ウィジェットをチューリップテーブルの列、または変数に割り当てることができます。チェックボックスと同様に、アプリの後半でデータを使用するために、変数をテキスト入力ウィジェットに割り当てる必要があります。テキスト変数のリストからこの変数を選択するか、変数選択ドロップダウンからインラインで作成します。

{height=""幅="350"}。

これはフォームステップ入力で作成された変数と同じように動作します。

テキスト入力ウィジェットを大きくしたい場合は、コンテキストペインで "Multiple Lines" トグルを選択します。すると、任意のスペースを埋めるように寸法を変更できます。

ファイル

ファイル入力ウィジェットはテキスト入力と似ていますが、入力をチューリップテーブルの列、または変数に割り当てることができます。アプリの後半でデータを使用するには、ファイル入力ウィジェットに変数を割り当てる必要があります。ファイル変数のリストからこの変数を選択するか、変数選択ドロップダウンからインラインで作成します。

クラウド型のアップロードボタンを使用して、デバイスから入力ウィジェットにファイルをインポートするか、ファイルのURLを直接入力することができます。

数値

数値入力ウィジェットも前のウィジェットに似ており、入力されたデータを適切に使用するために数値変数を割り当てる必要があります。既存の変数を選択するか、名前を入力して［作成］を選択して変数を作成します。

変数を追加すると、この場合は追加のオプションが表示されます。

Formatオプションでは、情報の表示にIntegerと Decimalの両方を選択することができます。整数型は整数のみを表示し、小数型は選択された有効桁数まで表示します。精度オプションは、表示されるこの桁数を決定します。

単一選択

このウィジェットを使用するには、配列を理解している必要があります。

単一選択入力ウィジェットを使用すると、リストからオプションを選択することができます。他の入力ウィジェットと同様に、データソースの種類をTulip Table RecordまたはVariableから選択することができます：

これを使用する1つの非常に簡単な方法は、変数フィールドにテキスト変数を割り当てるか作成し、静的に作成された値を持つドロップダウンとして表示することです。Optionsフィールドのすぐ下にある'New Option'を選択することで、オプションを追加することができます。完了すると以下のようになります：

DisplayフィールドをMenuに変更すると、ウィジェットは以下のような形式で表示されます：

オプションを Array変数の一部としてリストすることもできます。

この方法では、選択されたArrayのすべてのコンポーネントを選択することができます。Arrayは、Optionsの下で選択された変数であり、'Test'という名前の変数は、オプションのリストからユーザーが選択した値を保存します。

Array Variableの設定は非常に強力で、既存の配列からオプションを取り出したり、新しい値を配列にプッシュして選択することができます。例として、ボタンは、トリガーを追加することで、このウィジェットにオプションを追加することができます：

この例では、ボタンは'Something New'オプションをメニューまたはドロップダウンウィジェットに追加します。

マルチセレクト

Multiselectオプションは、Single Selectウィジェットと同じ設定に従いますが、若干の設定の違いがあります。Multiselectウィジェットはチューリップ・テーブル・レコードに割り当てることはできません。さらに、このウィジェットの結果出力は、単一選択ウィジェットのような単なるテキスト変数ではなく、テキスト配列でなければなりません。

これにより、メニューや ドロップダウンから複数のオプションを選択し、それらをArray変数に出力することができます。表示オプションと選択オプションの設定は、上で説明した単一選択ウィジェットのオプションとまったく同じです。マルチセレクトウィジェットは以下のように表示されます。

日付ピッカー

選択したら、ウィジェットに関連付けるDatetime変数、またはTulip Tableのカラムを選択または作成します。データソースとしてTulip Table Recordを選択した場合、入力はテーブルに直接書き込まれます。DatasourceとしてVariableを選択した場合、選択されたDatetimeの出力は指定された変数に保存されます。

ウィジェットを使用すると、通常のステップでアプリ内のユーザーがDatetimeを選択できます。Playerのインターフェイスは以下のようになります：

画像

Image ウィジェットにより、オペレータはステップで画像を撮影するか、ローカルストレージから画像をアップロードできます。このウィジェットは、撮影した画像を適切な変数に格納するために、Image URLデータタイプ変数を必要とします。

Datasource of Tulip Table Recordを選択すると、画像を直接Tulip Tableに保存できます。アスペクト比は、このウィジェットのコンテキスト・ペイン内で調整することもできます。

プレーヤー内では、カメラからのライブビューを "反転 "および "回転 "させることもできます。

署名

署名入力ウィジェットは、変数、テーブルレコードのフィールド、またはその両方において、オペレータの署名とデータの検証を要求するために使用できます。

署名によって検証されるデータを定義する必要があり、入力ウィジェットには、署名者の指定、署名の意味の説明の追加、必要に応じてコメントの義務付けなど、その他の設定オプションも含まれています。

お探しのものは見つかりましたか？

community.tulip.coに質問を投稿したり、他の人が同じような質問に直面していないか確認することもできます！