Prev Next
NOTE

Not all widgets are available on all instances and subscription plans. Reach out to support@tulip.co to enquire about enabling additional widgets.

ウィジェットはアプリの構成要素である。ウィジェットは、ユーザーに情報を表示したり、ユーザーからデータを収集したり、トリガーロジックを実行したりするために使用されます。

何十ものウィジェットをアプリ内で組み合わせてアプリのステップを構成し、プロセスを効率化するアプリのインターフェースを構築することができます。

ウィジェットの種類

Adding Input Widgets to Normal Steps_172566037

ボタンウィジェット

テキストを表示し、アクションをトリガーできるボタンです。ボタンウィジェットは、完全にユーザが設定可能なブランクウィジェットです。Next/Previous/Menu/Completeウィジェットには、アプリ構築を効率化するデフォルトのトリガーが含まれています。

Button- 完全に設定可能なボタンで、任意のロジックをトリガーできますPrevious- ユーザーが最後に進んだステップに移動します。Menu- ユーザーがアプリを変更したり、アプリの言語を変更したり、ログアウトしたりできるメニューを開きますNext- 次のアプリのステップに進みますComplete- アプリ変数の値を保存するアプリの完了を実行し、アプリのスプラッシュ画面に戻ります。

ボタンウィジェットの詳細はこちら

入力ウィジェット

入力ウィジェットでユーザーからデータを収集しましょう。各入力ウィジェットは異なるタイプの変数をサポートしています。

入力ウィジェットの詳細はこちら

テキストウィジェット

変数の値、プレーンな静的テキスト、レコードプレースホルダ全体を含む静的または動的テキストを表示します。

埋め込みウィジェット

埋め込みウィジェットを使用して、ビデオ、CAD、ドキュメントなどをアプリケーションに埋め込むことができます。

埋め込みウィジェットの詳細はこちらをご覧ください。

カメラウィジェット

カメラウィジェットを使って、Tulip Visionのカメラフィードを表示したり、デバイスのカメラでバーコードをスキャンできます。

Tulip Visionについては、こちらをご覧ください。

カスタムウィジェット

デフォルトのウィジェットがニーズに完全に合わない場合、カスタムウィジェットを作成することで、あらゆるユースケースを満たすことができます。HMTL、JavaScript、CSSを組み合わせて、プラットフォームを広範囲に拡張できます。

カスタムウィジェットの詳細はこちら

アイコン

ベクター画像をアプリケーション内でドラッグ、ドロップ、リサイズして、Tulipアプリをあなたのブランドに合わせましょう。

ウィジェットの設定

希望する形や機能に最適なウィジェットを設定できます。

ウィジェットによって、サポートする設定オプションが異なります。これらの設定は、ウィジェットの様々な属性に影響を与えます。 - 例: 入力値をどこに保存するか、どのテーブルを表示するか -スタイリング- 例: ボタンの色をどうするか、テキスト・ウィジェットを太字または斜体に設定するか -トリガー- 例: ユーザが[Enter]をクリックしたときに何が起こるか、ユーザが行を選択したときに何が起こるか。

ウィジェットを編集するには、ウィジェットを選択する必要があります。1.設定したいウィジェットを選択します。2. コンテクスト・ペインに「ウィジェット」タブが開きます。side pane{height="" width=""}.

ウィジェットのデータソース

ウィジェットに表示される内容はウィジェットによって異なりますが、マッピングのプロセスは変わりません。データソースの設定は、ウィジェットのコンテンツのソースを定義します。最初にウィジェットを追加したとき、そのデータソースはマッピングされていません。

Datasource mapping.png{高さ="" 幅="400"}です。

Datasource typeは、ウィジェットがマッピングされるソースの大まかなタイプです。例としては、変数、テーブル レコード フィールド、マシン属性などがあります。

Datasourceは、ウィジェットがマッピングされるそのタイプ内の特定の属性です。

NOTE

A warning icon appears in the corner of an input to indicate that no datasource is selected.

データマッピング

入力ウィジェットの場合、データソースはユーザ入力が保存される場所を表します。他のすべてのウィジェットでは、データソースはウィジェットが表示するデータのソースを表します。

多くのウィジェットは、データに関連付けられています。ウィジェットのコンテンツは、テーブルレコードや変数などの動的データによって駆動できます。入力ウィジェットを 使用して、変数やテーブルレコードフィールドにデータを入力することもできます。

入力ウィジェットは、データソースの読み取り/書き込みが可能で、入力を変更するとデータソースの値も変更されます。ほとんどのウィジェットは読み取り専用で、動的なデータによって動かされますが、データソースの値に直接影響を与えることはできません。

データ駆動型ウィジェット

一部のウィジェットは、動的データからデータを取得できます。ほとんどの動的ウィジェットでは、データソースの設定が、ウィジェットの状態を駆動するデータを示します。image.png{height="" width="450"}.

ColorすべてのColorプロパティは、静的に設定するか、変数に基づいて動的に設定することができます。

VariableVariableウィジェットの内容は、色を含む任意のアプリ変数の値に関連付けることができます。このウィジェットは、ソース変数が変更されると動的に変更されます。

テーブル レコードテーブルレコードウィジェットは、レコード全体または個々のテーブル レコード フィールドの現在の値を反映します。

インタラクティブ テーブルインタラクティブテーブルウィジェットは、テーブルの現在の状態を表示します。

スタイリング

ウィジェットがTulipにアップロードされた後、画面右側のコンテキスト・ペインでウィジェットの以下のプロパティを編集できます。スタイリングのオプションはウィジェットによって異なりますが、ほとんどのウィジェットには以下のオプションがあります:

  • フォントサイズ
  • フォントの色
  • フォントスタイル
  • ボタンの文字揃え
  • ボタンの色
  • サイズ
  • 回転
  • ドロップシャドウ
  • ボーダー半径
  • 点滅

ウィジェットトリガー

異なるウィジェットには、トリガー・ロジックを決定する特定の動作があります。

image.png{height="200" width=""}.

入力ウィジェットすべての入力ウィジェットでは、入力が変更されるとトリガーが実行されます。:::(Info) (NOTE)
In the case of Number and Text input widgets, Triggers will fire on users clicking [Enter]
:::
インタラクティブ・テーブルユーザーが行を選択すると、その行のトリガーが実行されます。また、その行は、[*リンクレコード]*ウィジェットの設定で設定されたテーブルレコードのプレースホルダにロードされます。 インタラクティブテーブルウィジェットの詳細については、こちらを参照してください。

Warning

For rows in the interactive table widget to be selectable, its Linked Record field must be tied to a table record placeholder.

さらに読む