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

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

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

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

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

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

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

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

{高さ="" 幅=""}を選択します。

選択すると、以下のオプションが表示されます。

{高さ="" 幅="100"}を選択します。

• チェックボックス
• テキスト
• ファイル
• 番号
• シングルセレクト
• マルチセレクト
• 日付ピッカー
• 画像
• 署名

データソースの選択

変数

既存の変数を選択するか、新しい変数を作成して入力Widgetに割り当てます。

{height="" width="350"}.

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

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

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

{height="" width="350"} と指定します。

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

トリガーを設定する

入力ウィジェットの多くには、アクションが発生したときに発動するトリガーを設定するオプションがあります。アクションの種類と関連するウィジェットは、以下のとおりです。
{height="50" width="mm" }.

キー入力

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

入力変更

入力変更トリガは、「入力が変更され、条件が満���されたら、アクションを実行する」というロジックに従います。このオプションは、チェックボックス、シングルセレクト、マルチセレクト、日付選択、画像入力ウィジェットに関連付けられます。

入力ウィジェットの種類

チェックボックス

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

テキスト

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

{height="" width="350"}.

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

テキスト入力ウィジェットを大きくしたい場合は、「コンテキストペイン」で「複数行」のトグルを選択します。そうすると、任意のスペースに入るように寸法を変更することができます。

ファイル

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

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

数字

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

{height="" width="250"}.

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

{height="" width="250"}。

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

単一選択

このWidgetを使用するには、配列について理解している必要があります。

単一選択入力ウィジェットを使うと、リストからオプションを選択することができます。他の入力ウィジェットと同様に、データソースの種類をチューリップテーブルのレコード、または変数のいずれかを選択することができます。

非常にシンプルな使い方としては、変数フィールドにテキスト変数を代入または作成し、静的に作成された値を持つドロップダウンとして表示することができます。Optionsフィールドのすぐ下にある'New Option'を選択することでオプションを追加することができます。出来上がると、このようになります。

{height="" width="250"} となります。

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

{height="" width="250"} となります。

オプションは、Array変数の部分としてリストアップすることもできます。

{height="" width="350"} となります。

この方法では、選択されたArrayの構成要素をすべて選択することができる。ArrayはOptionsの下で選択された変数で、'Test'という名前の変数は、ユーザーがオプションのリストから選択した値を格納します。

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

この例では、ボタンがオプション「Something New」をMenuまたはDropdownInput Widgetに追加しています。

マルチセレクト

Multiselectオプションは、Single Selectウィジェットと同じ構成に従いますが、いくつかの小さな構成上の違いがあります。Multiselectウィジェットは、Tulip Table Recordに割り当てることができません。また、このウィジェットの結果出力は、Single Selectウィジェットのような単なるText変数ではなく、Text Arrayでなければなりません。

{height="" width="350"}.

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

{height="" width="350"}.

日付ピッカー

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

{height="" width="350"}.

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

{height="" width="350"}のようになる。

画像

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

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

{height="" width="600"}.

Player内では、カメラからのライブビューを「反転」「回転」させることができます。

署名

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

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

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

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