ページへの動的コンテナの追加
動的コンテナを使用すると、実行時に評価される条件に基づいて、ページの個々の「セクション」または論理リージョンにコンテンツを表示できます。 各セクションに表示されるUI要素またはコンポーネントを定義し、表示されるセクションを決定する表示ロジック条件を設定します。
動的コンテナに表示される内容を決定する表示ロジックは、「ケース」を使用して定義されます。 ケースは、動的フォームおよび表で使用されるルールセットに似ていますが、表示するフィールドを選択する代わりに、表示するセクションを選択します。 ケースを定義する場合は、ケースの条件と、その条件が満たされたときにコンテナに表示するセクションを指定します。 ケースごとに任意の数のセクションを表示できるため、ケースで2つのセクションが定義されている場合は、コンテナに2つのセクションが表示されます。
動的コンテナの構成方法を学ぶ最も簡単な方法は、実際のユース・ケースを調べることです。 たとえば、ユーザーが2つのレイアウトを切り替えることができるページを作成するとします。1つは従業員を追加するフォーム、もう1つは従業員の表を表示するレイアウトです。 これを行うには、2つのセクションを持つ動的コンテナを作成: 1つは動的フォーム用、もう1つは動的表用です。 次に、ユーザーがクリックして動的コンテナに表示されるセクションを切り替えることができるボタンを追加します。
ノート:
開始する前に、ビジネス・オブジェクトやサービス接続を介してデータ・オブジェクトをコールするサービスなどのデータ・ソースを定義していることを確認してください。 「ビジネス・オブジェクトの操作」または「サービス接続の管理」を参照してください。動的コンテナ・コンポーネントをページに追加するには:
- ページ・デザイナでページを開いた状態で、コンポーネント・パレットからキャンバスに動的コンテナをドラッグします。このイメージでは、動的コンテナを追加したときに自動的に作成された1つのセクション(Default Section)を表示できます。 Default Sectionセクションにはまだコンテンツがないため、かわりにキャンバスにセクションの名前が表示されます。
- 動的コンテナのセクションを作成します。 この例では、動的フォーム用と動的表用の2つのセクションを作成します。
- プロパティ・ペインの「表示ロジック」セクションで、ケース1の下のセクションの横にある
をクリックし、「+新規セクション」をクリックして新しいセクションを作成します。ヒント:
また、既存のフラグメントを動的コンテナのセクションとして使用することもできます。pageContent(デフォルト・タグ)としてタグ付けされたフラグメントは、「セクションの追加」ドロップダウンに自動的にリストされます(「動的コンテナのセクションとしてフラグメントを追加」を参照)。デフォルト・セクションに加えて、既存の未使用のセクションも表示されます。
- 「セクションの作成」ダイアログ・ボックスで、セクションに名前(DynamicFormSectionなど)を指定し、OKをクリックします。
- コンポーネント・パレットから、動的フォームをドラッグしてキャンバス上のセクションにドロップし、プロパティ・ペインで使用するクイック・スタートを選択し、プロンプトに従って動的フォームをデータ・ソースおよびルール・セットに関連付けます。 「終了」をクリックします。
ヒント:
「データ・パレット」を使用して、データ・ソースのRESTエンドポイントで始まる代替設計アプローチを試し、Visual Builderが最適なデータを表示するのに最適なコンポーネントを利用します。 たとえば、従業員の作成フォームを表示するには、「作成」エンドポイントをデータ・パレットからキャンバスにドラッグします。 「次としてレンダリング」ポップアップが表示されたら、オプション(この場合は「作成フォーム動的」)を選択し、フォームの作成として構成クイック・スタートのステップに従ってフォームを設定します。
クイック・スタートを使用して動的フォームをデータ・ソースにバインドすると、選択したフィールドを含むフォームがページに表示されます。 フォーム・フィールドは、そのルール・セットの動的フォーム・レイアウトを編集することで変更できます。 フォームがデータ・ソースにバインドされていない場合、フォームをレンダリングするデータがないため、セクションにフォームのプレースホルダーが含まれます。
「構造」ビューで動的コンテナをクリックして、コンポーネントとしてページに追加された動的フォームと、「プロパティ」ペインに表示されるそのプロパティを表示します:
図dynamic-container-create-form.pngの説明 - プロパティ・ペインのケース1で、を再度クリックし、「+新規セクション」をクリックして他のセクションを作成します。この場合、動的表のセクションを作成します。
- コンポーネント・パレットから新しいセクションに動的表をドラッグし、プロパティ・ペインで「レイアウトの構成」クイック・スタートをクリックし、プロンプトに従って設定を完了します。 「終了」をクリックします。
ヒント:
作成エンドポイントを使用して作成フォームを表示するのと同様に、Get Manyエンドポイントを使用して、動的表に従業員データを表示できます。 データ・パレットから、「多数を獲得」エンドポイントをキャンバスにドラッグし、「次としてレンダリング」ポップアップで「動的表」を選択し、レイアウトの構成ウィザードのステップに従って表を設定します。クイック・スタートを使用して動的表をデータ・ソースにバインドすると、ページ・デザイナによって、選択したフィールドに表がレンダリングされます。 ここでも、コンポーネントをデータ・ソースにバインドしない場合、動的表に実際にレンダリングするデータがありません。 「構造」ビューで動的コンテナをクリックして、新しく追加されたセクションを表示します:
図dynamic-container-allsections.pngの説明
- プロパティ・ペインの「表示ロジック」セクションで、ケース1の下のセクションの横にある
- UIコンポーネントを設定し、セクションを表示するためのケース・ロジックを追加します。 ここでは、Buttonコンポーネントとページ変数を追加して、動的コンテナのセクションを切り替えます。
- 新しいアクション・チェーンの名前をToggleLayoutに設定し、アクション・チェーンを作成します:
- 「条件」アクションをキャンバスにドラッグ・アンド・ドロップし、その「条件」を「プロパティ」ペインで
[[ $page.variables.layoutFlag === true ]]に設定します。 - 「変数の割当」アクションを
if {{ $page.variables.layoutFlag === true }}ブロックの「アクションの追加」領域にドラッグ・アンド・ドロップします。 「変数」リストからlayoutFlagを選択し、「値」をfalseに設定します。 - 別の「変数の割当」アクションをドラッグし、
if {{ $page.variables.layoutFlag === true }}ブロックの下部にある「ブランチの作成」領域にドロップします(別のアクションで「If」アクションにカーソルを置くと、「ブランチの作成」領域が表示されます)。 elseブロックで「変数の割当」を選択し、「変数」リストからlayoutFlagを選択し、「値」をtrueに設定します。
- 「条件」アクションをキャンバスにドラッグ・アンド・ドロップし、その「条件」を「プロパティ」ペインで
- 新しいアクション・チェーンの名前をToggleLayoutに設定し、アクション・チェーンを作成します:
- ページ・デザイナに戻り、動的コンテナに別のケースを作成します。
- コンテナの「一般」タブで、「+ケース」をクリックして、Case 2という別の表示ロジック条件を作成します。
を使用して、必要に応じて名前を更新できます。 同じセクションを含む新しいケースを作成する場合は、ケースを複製することもできます。
新しいケースを作成すると、ケース1の前に、表示ロジック・ツリーの最初のケースとして追加されます。 ケースは上から下に評価されることに注意してください。 したがって、この例では、実行時にケース2の条件が最初に評価されます。 - ケース2で、「セクション」の横にある+をクリックし、表示するセクション(この例では
DynamicTableSection)を選択します。 この前に定義したセクションを選択する方法に注意してください。これを行うと、ページ・デザイナでレンダリングされるケース2のみが表示されるため、動的コンテナでは、動的表を含む
DynamicTableSectionのみが表示されます:
図dynamic-container-case2.pngの説明 - ケース1で、セクションのリストで
DynamicTableSectionの横にある
をクリックして、ケース1から削除します。
- コンテナの「一般」タブで、「+ケース」をクリックして、Case 2という別の表示ロジック条件を作成します。
- 動的コンテナの様々なケースがレイアウト・プレビューを使用してどのように表示されるかをプレビューします。 レイアウト・プレビューでは、ケースの順序とその条件に関係なく、ケースが設計目的でページに一時的にレンダリングされるように強制されます。
- 「表示ロジック」セクションで、ケース1の
iconをクリックします:これで、ケース1 (Default SectionおよびDynamicFormSection)のセクションが、ケース2 (DynamicTableSection)のセクションではなくキャンバスにレンダリングされます。 - 「上書きのリセット」 (またはagain)をクリックしてプレビューを削除します。
- 「表示ロジック」セクションで、ケース1の
- Case 1の条件フィールドで、
をクリックして式エディタを開き、デフォルトの条件Always Showを式$variables.layoutFlag == trueに変更します。 Case 2の「条件」フィールドに、$variables.layoutFlag == falseと入力します:
- 「プレビュー」
をクリックしてページをプレビューし、「レイアウトの切替え」をクリックして動的コンテナに表示されるセクションを切り替えます。
