変数バックのレイアウト

Workshopには、ビルダーがモジュールをよりレスポンシブでダイナミックにするための多くの機能があります。このガイドでは、それらの機能の一つである Variable-based Collapse State を使ってモジュールの使いやすさを向上させる方法について、一例を通して説明します。

以下のスクリーンショットは、野火の発生を監視するために使用される例のモジュールを示しています。このモジュールのユーザーにとって、最も重要なアクションは、各野火の発生に対して従業員のチームを割り当てることです。チームの割り当ての重要性から、現在のモジュールでは、各発生事案のページの上部にチーム割り当てウィンドウが大きく表示されます。

この初期のモジュールは、チームが割り当てられていない野火に対してはうまく動作するように設計されていますが、すでにチームが割り当てられている火災事案を視覚化するために最適化されているわけではありません。事案にチームが割り当てられた後、ユーザーはチーム割り当てウィンドウが必要ないかもしれません。これはページの上部にスペースを占有し、事案の詳細を素早く視覚化することを難しくします。この状況では、ユーザーはチーム割り当てセクションがモジュール内で少ないスペースを占有し、必要に応じてアクセス可能な折りたたみセクションであることを好むかもしれません。

以下の図では、左側でチーム割り当てウィンドウが拡張され、右側で折りたたまれていることがわかります。

選択した事案に応じてモジュールが最適なレイアウトを表示するようにするために、Team AssignedプロパティがFalseに設定されている事案オブジェクトを表示しているときにのみチーム割り当てセクションを展開するために、WorkshopのVariable-based Collapse State 機能を使用できます。

この例と同様の状況でVariable-based Collapse State を設定するには、以下の手順を実行します：

1. モジュールを開き、編集 ボタンをクリックしてモジュールを編集モードで開きます。
2. Variable-based Collapse State を使用して展開または折りたたむセクションを見つけて選択します。この例では、チームを割り当てるためのウィジェットが含まれている チーム割り当て というセクションを選択します。
3. セクションを選択した状態で、右側の設定パネルを使用して、セクションが「折りたたみ可能」に設定されていることを確認します。
   • Variable-based collapse state の下には、セクションが折りたたまれているかどうかを決定するブール型の変数のセレクタが表示されるはずです。
4. 次に、セクションが折りたたまれているかどうかを決定する変数を作成します。この例では、新しい変数 Should Section Be Collapsed? を作成し、それをアクティブな野火オブジェクトの Team Assigned? プロパティと等しく設定します。
5. 新しく作成した変数を、ステップ3で言及した "Variable-based collapse state" セレクタに割り当てます。

これで、割り当てた変数に基づいてセクションを折りたたむようにモジュールを設定しました！以下のスクリーンショットで見ることができるように、これにより、現在レビュー中の野火事案に最も適しているときに、チーム割り当て セクションを展開または折りたたむ、より直感的なユーザーインターフェースが作成されます。

ユーザーやそのワークフローにとって最も直感的なときにセクションを表示または非表示にするために、モジュール内でこの機能をさまざまな方法で使用できます。また、特定のエラーをキャッチし、カスタムエラーメッセージを表示するためにこの機能を使用することもできます。例えば、検索周辺の制限によってエラーが発生した場合、ユーザーに入力オブジェクトセットをさらにフィルター処理するように求めるカスタムメッセージを作成できます。