変数を利用したレイアウト

変数を利用したレイアウトは、モジュールビルダーがより反応性の高いユーザーインターフェースを持つアプリケーションを構築できるようにする2つの高度なレイアウト機能で構成されています。

1. セクション: 変数に基づく折りたたみ状態は、セクションが展開（表示）または折りたたみ（非表示）されるタイミングを制御します。
2. ページ: 変数に基づくページ選択は、複数ページのモジュールで現在表示されているページを制御する機能を提供します。

これらのオプションは、動的なアプリケーションを構築する際にかなりの柔軟性を提供し、以下で詳しく説明します。

セクション: 変数に基づく折りたたみ状態

この機能は、ビルダーがセクションが展開（表示）または折りたたみ（非表示）されるタイミングを制御できるようにします。

この機能を利用するために、ビルダーは、Boolean 変数（true または false の値で構成される）をセクションの変数に基づく折りたたみ状態変数として選択します。選択された Boolean 変数の値が、このセクションが折りたたまれている（true）か展開されている（false）かを効果的に決定します。この機能は、ビルダーがセクションの折りたたみ状態を動的に制御できるようにします。例えば、関数で定義されたカスタムビジネスロジック、選択されたオブジェクト上のプロパティ値、または親モジュールから渡される URL 内のモジュールインターフェースの Boolean 変数などです。

以下の画像に示すように、変数に基づく折りたたみ状態は、セクションの折りたたみ可能設定の一部として設定できます。

変数に基づく折りたたみ状態の使い方に関する完全なチュートリアル を詳しく学ぶことができます。

ページ: 変数に基づくページ選択

この機能により、ビルダーは、複数ページのモジュールで現在表示されているページを動的に制御できます。この機能を有効にするために、モジュールビルダーは以下の2つのコンポーネントを設定する必要があります。

1. ページ ID: 各モジュールページを一意に識別するパラメーター（各ページの設定内で設定）。
2. 変数に基づくページ選択: 表示されるページを決定する文字列変数（モジュールヘッダーの設定内で設定）。

変数に基づくページ選択の値がモジュール内の特定のページの ID に等しい場合、そのページがモジュール内に表示されます。この機能により、ビルダーはモジュールの現在表示されているページを動的に制御できます。例えば、関数で定義されたカスタムビジネスロジック、選択されたオブジェクト上のプロパティ値、親モジュールから渡されるモジュールインターフェースの文字列変数、または最初に表示されるページを決定する URL 内のモジュールインターフェースの文字列変数です。

以下の画像に示すように、変数に基づくページ選択は、モジュールの設定の設定パネル内のページの下で設定されます。

使用例

Workshop には、モジュールをより反応性が高く、動的にするための多くの機能があります。この例の使用ガイドでは、変数に基づく折りたたみ状態という機能を使用して、モジュールの使いやすさを向上させる方法を説明します。

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

この初期モジュールは、チームが割り当てられていない山火事に対してうまく機能するように設計されていますが、既にチームが割り当てられている火災インシデントの表示に最適化されていません。インシデントにチームが割り当てられた後、ユーザーはチーム割り当てウィンドウが必要ない場合があります。チーム割り当てウィンドウは、ページの上部にスペースを占めており、インシデントの詳細をすばやく表示することが難しくなります。この状況では、ユーザーは、必要に応じてアクセスできるモジュール内でより少ないスペースを占める折りたたみセクションにチーム割り当てセクションがある方が好ましいかもしれません。

以下のイラストでは、左側に展開されたチーム割り当てウィンドウ、右側に折りたたまれたウィンドウが表示されています。

選択されたインシデントに応じて、最適なレイアウトを表示するようにモジュールを設定するには、Workshop の変数に基づく折りたたみ状態機能を使用して、Team Assigned プロパティが False に設定されているインシデントオブジェクトを表示しているときにのみ、チーム割り当てセクションを展開できるようにします。

この例に類似した状況で変数に基づく折りたたみ状態を設定するには、次の手順に従ってください。

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

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

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