MENU
    ステップに入力ウィジェットを追加する
    • 23 Jan 2025
    • 1 読む分
    • 寄稿者

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


    記事の要約

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

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

    以下の記事では、任意のアプリ・ステップにデータ入力フィールド(入力ウィジェット)を開始する方法について説明します。

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

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

    Widget Toolbar.png{height="" width=""}を選択します。

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

    Inputs Dropdown.png{高さ="" 幅="100"}。

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

    データソースの選択

    変数

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

    {height="" width="350"} 入力に変数を割り当てることで、アプリ全体で入力値を参照することができます。

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

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

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

    {height="" width="350"} ドロップダウンでテーブルレコードのカラムを指定します。

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

    トリガーの設定

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

    エンターキー

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

    入力変更

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

    入力ウィジェットの種類

    チェックボックス

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

    テキスト

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

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

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

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

    ファイル

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

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

    数字

    入力されたデータを適切に使用するために、数値変数を割り当てる必要があります。既存の変数を選択するか、名前を入力して[作成]を選択して変数を作成します。

    {height="" width="250"} 変数を追加します。

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

    {height="" width="250"} である。

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

    単一選択

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

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

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

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

    **Display」**フィールドを「Menu」に変更すると、ウィジェットは次のような表示になります:

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

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

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

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

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

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

    マルチセレクト

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

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

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

    {高さ="" 幅="350"}のように表示されます。

    日付ピッカー

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

    {height="" width="350"}のようになります。

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

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

    画像

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

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

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

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

    署名

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

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


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

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


    この記事は役に立ちましたか?