ダイナミックレイアウト
ダイナミックレイアウトはフィールドやコントロールなど、指定したアイテムが柔軟な形式で調整されるレイアウトの一種で、画面のサイズに合わせて自動的に調整されます。 ダイナミックレイアウトによりコンピューター、タブレット、スマートフォンなどさまざまなデバイスでレスポンシブ動作がサポートされます。 画面サイズが変化した場合、ダイナミックレイアウトでは要素が次の行に折り返され、画面上のコンテンツが移動します。 折り返しにより、小さな画面で左右にスクロールする必要がなくなります。
補足： ダイナミックレイアウトを使用できるのは、HTML5ドキュメントタイプでレンダリングされたUIのみです。 Pega 7.0 以前に作成したアプリケーションでは、Pega PlatformTMのUIの最新のダイナミック機能を使用していない場合があります。 こうしたアプリケーションは、HTML5 Application Readiness landing pageを参考にしてアップデートできます。 HTML5 Application Readiness landing pageについての詳細は、ヘルプトピックの「HTML5 Application Readiness landing page」を参照してください。
次の問題に答えて、理解度をチェックしましょう。
ダイナミックレイアウト向けのデザインテンプレート
デザインテンプレートは、あらかじめフォーマットされたレイアウトです。 多くのデザインテンプレートには、1列、2列、3列にコンテンツを整理するなど、ダイナミックレイアウトのための共通フォーマットが用意されています。 各デザインテンプレートでは、レイアウトが1つまたは複数の領域に分割されています。 デベロッパーは各領域にフィールドを配置して、ビューのコンテンツをすばやく整理できます。 ダイナミックレイアウトに基づくデザインテンプレートの場合、画面サイズを変更して、ビューのコンテンツを再配置できます。
補足： デザインテンプレートの中には、ダイナミックレイアウト以外のレイアウトのフォーマットが含まれているものもわずかにあります。
次の画像は、Pegaで提供しているデザインテンプレートの例です。
各ビューに含められるデザインテンプレートは1つだけです。 小さなモジュラービューを1つの大きなビューに組み合わせて、1つのビューで疑似的に複数のテンプレートを使用できます。
たとえば、顧客情報ビューには自宅と請求書の住所情報が含まれています。 ビューのデフォルトテンプレートは1列ですが、自宅住所と請求書送付先を2列に表示したいと考えました。
その後、すべてのフィールドにアクセスするためにスクロールする必要がないように、顧客情報を分割することにしました。 さらに追加の変更点として、顧客の都道府県と電話番号を自宅住所の他の情報とまとめて別の列にグループ化することにしました。デベロッパーは2列のテンプレートを使用して自宅住所のビューを作成し、2列のテンプレートを使用するオリジナルのビューの最初の列でこのビューを参照することにしました。 その結果、1つのテンプレートの中に別のテンプレートが入る形になります。
次の画像の中央で、垂直線をスライドして、2列のテンプレートと1列目に2列のテンプレートが挿入された状態を比較できます。
次の問題に答えて、理解度をチェックしましょう。
このトピックは、下記のモジュールにも含まれています。
- フォームの外観のカスタマイズ v1
- フォームの外観のカスタマイズ v4
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。