レイアウト
レイアウトは、ユーザーにとっての構成エクスペリエンスの外観と使用感を定義します。フィールドの表示場所、ステップのグループ化方法、製品リスト (買い物かご) の表示方法を制御し、詳細計画のロジックとデータを CPQで直感的なガイド付き UI に変換します。
レイアウトは、構成エクスペリエンスのプレゼンテーション層です。詳細計画がフィールド、ルール、レイアウト、および構成可能な製品をまとめる場合、レイアウトはこれらの要素の表示方法に重点を置いています。
- 各ページまたはタブに表示されるフィールド
- セクションのグループ化とラベル付けの方法
- セット、製品ピッカー、メッセージの配置方法
- 製品リストが構成とともにレンダリングされる方法
レイアウトは詳細計画ごとに定義されます。1 つの詳細計画に 1 つ以上のレイアウトを設定できるため、構成ロジックを複製することなく、さまざまなペルソナ、チャネル、またはデモエクスペリエンスを柔軟にサポートできます。
詳細計画に複数のレイアウトがある場合、エンドユーザーは、コンフィギュレーター UI の右上隅にある代替レイアウトコントロールを使用して、レイアウト間をローテーションできます。
レイアウトを構成モデルに適合させる方法
レイアウトは、CPQ 構成スタックのプレゼンテーションレイヤーに配置されます。
- フィールドがデータを収集して表示します。
- ルールは動作 (可視化、メッセージング、計算、製品包含など) を制御します。
- 詳細計画は、フィールド、ルール、レイアウト、および構成可能な製品を単一の構成エクスペリエンスに結び付けます。
- レイアウトは、基本的なロジックを変更することなく、ページ、タブ、セクション、製品リストなどのバイサイドインターフェイスを定義します。
レイアウトはフィールド変数名と製品リストパラメーターを参照するため、ルールやデータ構造を変更せずに、レイアウトを安全に反復できます (たとえば、階層の再編成や表示タイプの変更)。
レイアウト構成要素
レイアウトは、レイアウト CSV ファイルで定義し、レイアウトウィザードまたはレイアウトエディターで調整する再利用可能な構造要素と視覚要素で構成されます。
- ページ (PagesWithLabels):進行状況ナビゲーションを使用して、構成を個別のステップに分割します。
- タブ (VerticalTab):関連するコンテンツを水平または垂直にグループ化して、すばやく切り替えることができます。
- メニュー (AccordionWithNavigation):長いコンテンツや複雑なコンテンツに対して、展開されたセクションを一度に 1 つずつ表示します。
- ExpandableSection:ユーザーが必要に応じてコンテンツを展開または折りたたむことができるようにします。
- BasicContainer:単純なグループ化のためのスタイルなしのコンテナを提供します。
層をネストしてマルチレベルレイアウト (タブを含むページや展開可能なセクションを含むタブなど) をビルドできます。
レイアウト定義とツール
レイアウトは、CSV ファイルと製品内ツールを組み合わせて作成および管理されます。
- CSV レイアウトのアップロード
- レイアウトのプライマリ定義形式
- スプレッドシートツールに組み込まれ、CSV ファイルにエクスポートされます
- 階層、列セット、フィールド、製品リスト、およびコンポーネントプロパティの完全な制御をサポートします
- レイアウトウィザード
- 詳細計画のフィールドから初期レイアウトをすばやく生成するのに役立ちます
- 階層と主要グループの視覚的プレビューを提供します
- 出発点として機能します。微調整は、CSV ファイルまたはレイアウトエディターを介して行われます
- レイアウトエディター
- 既存のレイアウトを管理 UI で直接編集できます
- 階層と列セットの配置、ラベルの編集、表示タイプの調整、拡張プロパティの更新をサポートします
- 欠落している要素や部分的にサポートされている要素に対するキーボードショートカットと視覚的な手がかりを提供します
どのツールを使用する場合でも、レイアウトは最終的に構造化された定義として保存され、構成エクスペリエンスの変化に応じてエクスポート、バージョン管理、および置換できます。
セットと繰り返し可能なコンテンツ
レイアウトは、セットの表示方法も制御します。
- テーブルとして (ヘッダー付きの行と列)
- リストとして (オプションの選択と検索動作を備えたカードスタイルの行)
- 一度に 1 つの設定されたインデックスにユーザーを集中させるリピーター
展開方向、サイズコントロール、メッセージインジケーター、インライン追加/削除コントロール、アップロード/ダウンロード動作などのセット固有のレイアウトプロパティは、拡張プロパティと生の値 JSON を介してレイアウトで構成されます。
レイアウトの製品リストセクションは、買い物かごの表示方法を定義します。
- 列として表示される製品リストパラメーター (名前、数量、価格、拡張属性など)
- 列のラベル付けと配置の方法
- 製品リストがインラインかウィンドウ内か
製品リスト列は、 productlist および productlistcolumn タイプを使用し、 ProductList<param> を参照することによって、レイアウト CSV ファイルによって駆動されます。 製品ルールと基になるテーブルで定義された値。