ウィジェット・トリガー
  • 31 Oct 2023
  • 1 読む分
  • 寄稿者

ウィジェット・トリガー


Article Summary

この記事では

  • ウィジェットレベルのトリガーとは?
  • ウィジェットトリガーの使用方法
  • ウィジェットトリガーの使用例

ウィジェット トリガーとは?

ウィジェットトリガーとは、ユーザーがウィジェットとインタラクションする際に自動的に実行されるロジックのブロックです。

ウィジェットトリガーを使用すると、「*次へ」*ボタンが不要になり、ユーザーがTulip Playerとやりとりする方法を効率化できます。

ウィジェットトリガーの使い方

ウィジェットトリガーは、すべての入力ウィジェット、およびインタラクティブテーブルウィジェットで利用可能です。ほとんどの場合、これらのトリガーは入力値が変化したときに実行されます。つまり、ユーザーがチェックボックスをトグルしたり、シングルセレクトから値を選択すると、トリガーが実行されます。

テキスト入力と数値入力

テキスト入力と数値入力の動作は少し異なります。テキスト入力と数値入力のトリガーは[Enter]キーが押されたときに発火します。

:::(Warning) (警告)テキスト入力ウィジェットの場合、ユーザはコンテンツを入力するために複数行の値を入力する必要があるかもしれません。これらの入力は、ウィジットのトリガーを実行させるので、この動作がウィジットのトリガーロジックによってサポートされていることを確認してください:

インタラクティブテーブルウィジェット

インタラクティブテーブルウィジェットは、非常に強力です。行が選択されると、選択された行はリンクされたプレースホルダにロードされます(リンクされたプレースホルダがマッピングされている場合)。選択されたレコードがレコードプレースホルダにロードされるだけでなく、レコードがロードされるとトリガーも実行されます。

トリガーの使用例

テキスト入力

私の使用例では、アプリケーションの最初に、ユーザーに注文番号を入力してもらいたいと考えています(最終的に注文を処理するため)。ユーザーはこの注文番号を手動で入力しますが、ユーザーが正しい注文番号のフォーマットに従わないという問題がありました。

私の注文番号は次のようなパターンです: ユーザがこの注文を正しく入力したことを確認してから、次に進むことができるようにしたいのです。 この動作は正規表現(Regex)で実現できますが、入力トリガーを活用することで、この検証をバックグラウンドで自動的に行い、ユーザのためにプロセスをストリーム化することができます。

この場合、正しい正規表現は "Order:[0-9]{4}-[0-9]{3}".これを自動的にチェックするには、次のウィジェットトリガーを追加します。image.png

インタラクティブテーブルウィジェット

ユーザが未決済注文のバックログから注文を選択すると、その注文のステータスを進行中に設定する必要があります。これは、通常のボタントリガーでも可能ですが、ウィジェットに直接組み込むことで、ユーザーエクスペリエンスを効率化できます。

さらに、ユーザが注文を選択すると、ユーザをアプリケーションの次のステップに移動させます。

image.png

さらに読む


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