機械翻訳について

ページへの動的コンテナの追加

動的コンテナを使用すると、実行時に評価される条件に基づいて、ページの個々の「セクション」または論理リージョンにコンテンツを表示できます。 各セクションに表示されるUI要素またはコンポーネントを定義し、表示されるセクションを決定する表示ロジック条件を設定します。

動的コンテナに表示される内容を決定する表示ロジックは、「ケース」を使用して定義されます。 ケースは、動的フォームおよび表で使用されるルールセットに似ていますが、表示するフィールドを選択する代わりに、表示するセクションを選択します。 ケースを定義する場合は、ケースの条件と、その条件が満たされたときにコンテナに表示するセクションを指定します。 ケースごとに任意の数のセクションを表示できるため、ケースで2つのセクションが定義されている場合は、コンテナに2つのセクションが表示されます。

動的コンテナの構成方法を学ぶ最も簡単な方法は、実際のユース・ケースを調べることです。 たとえば、ユーザーが2つのレイアウトを切り替えることができるページを作成するとします。1つは従業員を追加するフォーム、もう1つは従業員の表を表示するレイアウトです。 これを行うには、2つのセクションを持つ動的コンテナを作成: 1つは動的フォーム用、もう1つは動的表用です。 次に、ユーザーがクリックして動的コンテナに表示されるセクションを切り替えることができるボタンを追加します。

ノート:

開始する前に、ビジネス・オブジェクトやサービス接続を介してデータ・オブジェクトをコールするサービスなどのデータ・ソースを定義していることを確認してください。 「ビジネス・オブジェクトの操作」または「サービス接続の管理」を参照してください。

動的コンテナ・コンポーネントをページに追加するには:

1. ページ・デザイナでページを開いた状態で、コンポーネント・パレットからキャンバスに動的コンテナをドラッグします。
   このイメージでは、動的コンテナを追加したときに自動的に作成された1つのセクション(Default Section)を表示できます。 Default Sectionセクションにはまだコンテンツがないため、かわりにキャンバスにセクションの名前が表示されます。
   

   
   「図dynamic-container.pngの説明」

   
   
2. 動的コンテナのセクションを作成します。 この例では、動的フォーム用と動的表用の2つのセクションを作成します。
   1. 「プロパティ」ペインの「コンテナ・ルール・セット1」セクションで、「+セクション」をクリックし、ドロップダウン・リストで「+新規セクション」を選択します。

      ヒント:

      また、既存のフラグメントを動的コンテナのセクションとして使用することもできます。 pageContent (デフォルト・タグ)としてタグ付けされたフラグメントは、「セクションの追加」ドロップダウンに自動的にリストされます(「動的コンテナのセクションとしてフラグメントを追加」を参照)。

      デフォルト・セクションに加えて、既存の未使用のセクションも表示されます。

   2. 新規セクションのプロパティ・ペインで、セクションに名前を付けます(たとえば、Dynamic Form)。
      
      

      
      図dynamic-container-section-visapp.pngの説明

      
      
   3. コンポーネント・パレットから、動的フォームをドラッグしてキャンバス上のセクションにドロップし、プロパティ・ペインで使用するクイック・スタートを選択し、プロンプトに従って動的フォームをデータ・ソースおよびルール・セットに関連付けます。 「終了」をクリックします。
      
      
      「図dynamic-container-sectionform.pngの説明」
      
      

      ヒント:

      「データ・パレット」を使用して、データ・ソースのRESTエンドポイントで始まる代替設計アプローチを試し、Visual Builderが最適なデータを表示するのに最適なコンポーネントを利用します。 たとえば、従業員の作成フォームを表示するには、「作成」エンドポイントをデータ・パレットからキャンバスにドラッグします。 「次としてレンダリング」ポップアップが表示されたら、オプション(この場合は「作成フォーム動的」)を選択し、フォームの作成として構成クイック・スタートのステップに従ってフォームを設定します。
      

      
      「図dynamic-container-data-create.pngの説明」

      
      

      クイック・スタートを使用して動的フォームをデータ・ソースにバインドすると、選択したフィールドを含むフォームがページに表示されます。 フォーム・フィールドは、そのルール・セットの動的フォーム・レイアウトを編集することで変更できます。 フォームがデータ・ソースにバインドされていない場合、フォームをレンダリングするデータがないため、セクションにフォームのプレースホルダーが含まれます。

      「構造」ビューで動的コンテナをクリックして、コンポーネントとしてページに追加された動的フォームと、「プロパティ」ペインに表示されるそのプロパティを表示します:
      
      図dynamic-container-create-form.pngの説明
      

      「プロパティ」ペインの「表示セクション」には、コンテナに現在表示されているセクションがリストされます。 セクション名の横にあるハンドルをつかみ、目的の位置に移動することで、セクションの順序を並べ替えることができます。

      「プロパティ」ペインには、「使用可能なセクション」の下のコンテナに表示できるすべてのセクションもリストされます。

   4. 「コンテナ・ルール・セット1」セクションで、再度「+セクション」をクリックし、ドロップダウン・リストで「+新規セクション」を選択して、別のセクション(ここでは動的表のセクション)を作成します。
   5. 新規セクションのプロパティ・ペインで、セクションに名前を付けます(たとえば、Dynamic Table)。 動的コンテナのプロパティ・ペインに戻ります。
   6. コンポーネント・パレットから新しいセクションに動的表をドラッグし、プロパティ・ペインで「レイアウトの構成」クイック・スタートをクリックし、プロンプトに従って設定を完了します。 「終了」をクリックします。
      
      
      「図dynamic-container-sectiontable.pngの説明」
      
      

      ヒント:

      作成エンドポイントを使用して作成フォームを表示するのと同様に、Get Manyエンドポイントを使用して、動的表に従業員データを表示できます。 データ・パレットから、「多数を獲得」エンドポイントをキャンバスにドラッグし、「次としてレンダリング」ポップアップで「動的表」を選択し、レイアウトの構成ウィザードのステップに従って表を設定します。

      クイック・スタートを使用して動的表をデータ・ソースにバインドすると、ページ・デザイナによって、選択したフィールドに表がレンダリングされます。 ここでも、コンポーネントをデータ・ソースにバインドしない場合、動的表に実際にレンダリングするデータがありません。 「構造」ビューで動的コンテナをクリックして、新しく追加されたセクションを表示します:
      
      図dynamic-container-allsections.pngの説明
      

3. UIコンポーネントを設定し、セクションを表示するためのケース・ロジックを追加します。 ここでは、Buttonコンポーネントとページ変数を追加して、動的コンテナのセクションを切り替えます。
   1. 「変数」タブで、条件で使用できる変数を作成します。 たとえば、layoutFlagというブール型変数で、デフォルト値はtrueに設定されます。
   2. 「ページ・デザイナ」タブで、コンポーネント・パレットからボタン・コンポーネントをドラッグし、動的コンテナのすぐ上にドロップします。 プロパティ・ペインのテキストをToggle Layoutに変更します。
   3. 「ボタンのイベント」タブで、ojActionイベントのイベント・リスナーを追加します。
   4. 新しいアクション・チェーンの名前をToggleLayoutに設定し、アクション・チェーンを作成します:
      • 「条件」アクションをキャンバスにドラッグ・アンド・ドロップし、その「条件」を「プロパティ」ペインで[[ $page.variables.layoutFlag === true ]]に設定します。
      • 「変数の割当」アクションをif {{ $page.variables.layoutFlag === true }}ブロックの「アクションの追加」領域にドラッグ・アンド・ドロップします。 「変数」リストからlayoutFlagを選択し、「値」をfalseに設定します。
      • 別の「変数の割当」アクションをドラッグし、if {{ $page.variables.layoutFlag === true }}ブロックの下部にある「ブランチの作成」領域にドロップします(別のアクションで「If」アクションにカーソルを置くと、「ブランチの作成」領域が表示されます)。 elseブロックで「変数の割当」を選択し、「変数」リストからlayoutFlagを選択し、「値」をtrueに設定します。

      
      

      
      「図dynamic-container-actionchain.pngの説明」

      
      
4. ページ・デザイナに戻り、動的コンテナに別のケースを作成します。
   1. 動的コンテナ・コンポーネントを選択して、プロパティ・ペインでそのプロパティを表示します。
   2. コンテナの「一般」タブで、「ルール」をクリックしてコンテナ・ルール・セット・エディタを開きます。

      コンテナ・ルール・セット・エディタには、デフォルト名であるケース1という名前のルールが1つ含まれています。 ルールに含まれるセクションには、ケース1のセクションがリストされます。 デフォルト・セクションと作成した2つのセクションがリストされていることがわかります:

      
      

      
      図dynamic-container-ruleset-editor.pngの説明

      
      
   3. コンテナ・ルール・セット・エディタで、「+ルール」をクリックしてケース2という新しいルールを作成します。 必要に応じて、ルール名を編集できます。

      ルールを作成すると、「使用可能なセクション」にリストされているすべてのセクションが新しいルールに含まれます。 同じセクションを含む新しいケースを作成する場合は、ケースを複製することもできます。

      新規ケースを作成すると、ルールのリストでケース1の前に追加されます。 ケースは上から下に評価されます。 したがって、この例では、実行時にケース2の条件が最初に評価されます。

   4. ケース2を選択し、このケースに表示しない「ルールに含まれるセクション」のセクションを削除します(この例では、Dynamic Tableを除くすべてのセクションを削除します)。
   5. ケース1を選択し、このケースに含めないセクション(この例ではDynamic Table)を削除します。
   6. エディタの隅にあるXをクリックして閉じます。

      これを行うと、ケース2のみがページ・デザイナでレンダリングされるため、動的コンテナには、表を含むDynamic Tableのみが表示されます:

      
      

      
      「図dynamic-container-case2.pngの説明」

      
      

      「プロパティ」ペインの「セクション・ルール・エディタ」パネルに「2つのルール」が表示されていることを確認します。 これは、コンテナに表示される内容を管理するルールが2つあるためです。

5. 次に、ケース1とケース2の間でボタンが切り替わるように、2つのルールの条件を編集します。
   1. 「プロパティ」ペインで「ルール」をクリックして、コンテナ・ルール・セット・エディタを開きます。
   2. エディタで、ケース1を選択し、「編集」をクリックして条件ビルダーを開きます。
   3. 「コード」をクリックして式エディタを開き、 $variables.layoutFlag == trueと入力します。 「Done」をクリックします。
   4. ケース2で、条件ビルダーを開き、式エディタで$variables.layoutFlag == falseと入力します。 「完了」をクリックします。
6. 「プレビュー」 をクリックしてページをプレビューし、「レイアウトの切替え」をクリックして動的コンテナに表示されるセクションを切り替えます。