UI ビルダー のレイアウトのアップグレード

Quebec および Rome で作成されたレイアウトを新しいレイアウトシステムにアップグレードします。

UI ビルダー レイアウトシステムは San Diego リリースで拡張および更新されました。この新しいレイアウトシステムは、簡素化されたコンテンツツリー、およびレイアウト構成とコンポーネントのスタイリングのための新しいスタイリングパネルを備えています。新しく作成されるすべてのページバリアントは、新しいレイアウトシステムを使用します。既存のページとカスタムページを新しいレイアウトシステムにアップグレードすることを選択できます。

新しいレイアウトシステムには以下が含まれます。

• 簡素化されたコンテンツツリー
• レイアウト構成とコンポーネントのスタイリング用の改善されたスタイリングパネル
• CSS Flexbox およびグリッドレイアウトを構成するためのローコード UI
• コンポーネントのスタイリング用の拡張 UI
• スロットを必要としない更新されたレイアウト

レイアウトのアップグレード後の確認事項

バリアントとページは個別にアップグレードされます。

ページ/バリアントは、レイアウトと、データリソース、イベントバインディング、および構成があるレイアウト内でコンテナにラップされたコンポーネントおよびサブコンポーネントで構成されます。新しいレイアウトシステムにアップグレードすると、ページのレイアウトのみがアップグレードされるため、データ、コンポーネント、またはコンポーネントのスタイリングに影響はありません。

古いレイアウトシステムのすべてのスロットは、アップグレードプロセス中に新しいレイアウトに移行されます。アップグレードプロセスにより、ページ上でのコンポーネントコンテナの構造が変更されます。

コンポーネントのスタイリングは影響を受けませんが、コンポーネントの配置方法が 1 対 1 のスタイルで移行されない場合があります。複雑なページでは、スタイルがスロットからコンテナにマージされるため、アップグレードプロセスによって視覚的な不整合が発生する可能性があります。一部の問題は手動で解決する必要があります。

新しいレイアウトシステムへのアップグレード

UI ビルダー ページを新しいレイアウトシステムにアップグレードします。

始める前に

必要なロール：ui_builder_admin

手順

1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > UI ビルダー.
2. アップグレードするページでエクスペリエンスを開きます。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. アップグレードするページを選択します。
   

   新しいレイアウトシステムにアップグレードできるページバリアントは、赤い点でタグ付けされます。

   注:

   Quebec より前の行/列レイアウトシステムを使用して作成された従来のページはアップグレードできません。新しいレイアウトシステムで再ビルドする必要があります。
4. [レイアウトの更新] ボタンを選択します。
   
   UI ビルダー がページレイアウトの新しいレイアウトシステムへの更新を開始します。プロセスが完了すると、通知が表示されます。
5. 古いレイアウトとアップグレードされたレイアウトの比較は、[レイアウトを編集するには、レビューが必要です] 通知で [2 つのレイアウトバージョンを比較 (compare the two layout versions)] を選択することで実行できます。
   
   2 つのブラウザータブが開かれ、1 つには現在のレイアウトが表示され、もう 1 つにはアップグレードされたレイアウトが表示されます。
6. [新規を保持] を選択して新しいレイアウトシステムにページを更新するか、[古いものを使用] を選択してページレイアウトを元の状態のままにします。
   選択を確認することを求めるモーダルが表示されます。
7. [新規を保持] を選択して新しいレイアウトシステムへのアップグレードを完了するか、[古いものを使用] を選択してアップグレードプロセスを取り消してページを古いレイアウトシステムに戻します。
   
8. 変更が適用された状態でページが再ロードされます。
9. [プレビュー] ボタン () を選択し、ページを表示してテストします。