Skip to main content

レイアウトグループの作成

Pega Communityのロゴ

注: 次のコンテンツはPega Communityを参照したページで、モジュール内容の理解度を高める目的で含まれています。

レイアウトグループを使用して情報を分割して整然と配置することで、ウィンドウの領域を最適化します。

たとえば、関連情報が一連のタブとして表示されるようにレイアウトグループを設定し、ユーザーが効率的に閲覧できるようにします。 スタイルは他のユーザーインターフェイスとの一貫性を保ち、レイアウトにはラベルを含めます。

補足: UI Galleryのランディングページにはレイアウトグループの使用例が含まれており、参照したり、アプリケーションに直接コピーしたりできます。 詳細については、「Accessing the UI Gallery」を参照してください。
はじめに: レイアウトをネスティングするセクションを作成または特定します。 詳細については、「Creating sections」を参照してください。
  1. 既存のセクションを検索して開きます。

  2. セクションがテンプレートに基づいている場合は、セクションエディターのヘッダーで、「convert to full section editor」をクリックして、変換を確定します。

  3. 「Design」タブで、「Structural」リストを展開して、「Layout group」アイテムをワークエリアにドラッグします。

  4. 「Choose layout-group format」ダイアログボックスで、レイアウトグループのフォーマットを選択します。

    例: 「Tab」を選択して、コンテンツをタブにまとめます。
  5. 「Layout group」ヘッダーで、「View properties」アイコンをクリックします。

  6. 「Layout group properties」ウィンドウの「General」タブで、次のレイアウト設定を指定します。

    1. 「Container format」リストで、レイアウトの外観を定義します。

      例: 「Container format」「Default」に設定して、スキンで定義したデフォルトのフォーマットを適用します。 詳細については、「Styling a layout」を参照してください。
    2. 「Visibility」フィールドで、「Layout group」を表示するタイミングを選択します。

      例: 「Visibility」「Always」に設定して、レイアウトが全ユーザーに表示されるようにします。
    3. 「Caption」セクションで、使用するテキストの種類を選択し、次に「Settings」セクションを完了します。

      例: 「Caption」フィールドで「Label」を選択し、次に「Label」フィールドに「Related information」と入力します。
    4. 「Heading level」フィールドで、レイアウトに使用するヘッダーのタイプを選択します。

  7. オプション:

    カスタムCSSの動作を指定するには、「Presentation」タブで、「Display advanced presentation options」チェックボックスにチェックを入れ、次に次のアクションを必要に応じていくつでも実行し、設定を定義します。

    • レイアウトグループを、そのグループがホストされているコンテナ内の他のフローティングレイアウトグループの下にを表示するには、「Clear floated layouts」チェックボックスにチェックを入れます。
    • レイアウトのインラインスタイルを定義するには、「Inline style (not for production use)」フィールドにCSSコードを入力します。
      補足: インラインスタイルを入力すると、ガードレールのワーニングが表示されます。 メンテナンスと再利用を簡単に行えるように、カスタムCSSクラスを使用します。 詳細については、「CSS helper classes」を参照してください。
    • レイアウトコンテナのスタイルを指定するには、「Content CSS class」リストで定義済みのクラスを選択するか、「Open class editor」アイコンをクリックして、利用可能なヘルパークラスのリストを表示します。
  8. 「Submit」をクリックします。

  9. セクションフォームで、「Save」をクリックします。

トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: Pega Academy サポートのよくある質問 (FAQ).

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice