階層と tierDef

階層は、ページのセクションを定義します。

各層とサブ層には、コンポーネント表示タイプ (列 F) を定義する tierDef が必要です。各層には、Tab、ExpandableSection、Pages、Accordion、AccordionWithNavigation、および VerticalTab のオプションがあります。以下の各例は、異なる層構造を持つ同じ構成を示しています。

• タブ:

  

• ExpandableSection (これによりレイアウトがより垂直になります)
• ページ:

  

層内にサブ層を持つこともできます。

ExpandableSection サブ層を含むタブ層:

この 2 層レイアウトの作成に使用された CSV ファイルのスクリーンショットを以下に示します。ハイライト表示されたセルは、各階層にどのようにフラグが付けられているかを示しています。行 9 と 10 は行 8 の一番上の行の tierDef と同じパスであるため、セルはタブレイアウトで表示されます。

label または variablename は tierDef レベル (図の行 8) で定義しないでください。これらは階層レベル (行 9 および 10) で適用されます。

ラベル列

フィールドと階層の両方で、ラベル列に入力されたテキストは、レイアウトの画面に表示されるテキストです。 黄色の行のラベルは、各タブのラベルとして表示されます。ラベル列はフィールドにも使用されます。

変数名

変数は、パスを定義し、 CPQ で作成された特定のフィールドを呼び出すために使用されます。次の画像の 9 行目では、変数名 background 列 E に定義されています。行 25 から 29 では、 background がパス (列 B) に追加されます。これにより CPQ それらが background 層に含まれていることがわかります。

レイアウトに関連する変数は、フィールドまたはルールの CPQ で定義された変数とは異なる必要があります。これは、 CPQ で定義された変数がレイアウト CSV でも使用されるためです。UI のフィールドに割り当てられた変数名 CPQ 、レイアウトにフィールドを追加するために使用されます。次の画像は、CPQ で作成されたフィールド変数 (variablename=desiredIrons) を参照する CSV ファイルで、その結果、フィールドがレイアウトに表示されます。

列セットタイプ

列セットは、層内のオブジェクトの垂直位置を定義するのに役立ちます。レイアウトはブラウザーの幅 (変化する可能性があります) に対応するため、アドミンが意図的な行ブレークポイントを識別できるように列セット CPQ 使用します。

列セット全体が 1 つの行に収まらない小さなウィンドウを使用している場合、列は次の行に続きます。列セットの最後には常に新しい行がトリガーされます。

次の画像では、 user フィールドは 1 つの列セットの一部であり、フィールド leftHanded と bag は 2 番目の列セットの一部です。ブラウザーウィンドウが 3 つの画像すべてに対して小さすぎる場合 ( userは選択リストオプション)、列セットは次の行に続きます。3 番目の画像の横に leftHanded フィールドのスペースがありますが、新しい行にあります。

列の順序

CSV ファイルの columnorder 列は、同じ列セット内の列の順序を変更します。次の画像に示すように、フィールドを順番に CSV に追加する必要はありません。

製品リストレイアウト

製品リストは、構成の買い物かご機能をカスタマイズする方法です。アイテムを製品リストに追加するために、新しい製品ルールが作成されます。ユーザーが [シンプル] を選択すると、次のフィールドが利用可能になります。

ユーザーがフィールドをレイアウトに表示する場合は、フィールドのレイアウト CSV に列を追加します。(ユーザーは、リンクされたテーブルの ProductList.<param> 列の値を変数名として使用します。次の画像については、注 1 を参照してください。

以下は、レイアウト CSV の製品リストセクションのスクリーンショットです。

次の点に注意してください。

1. この列の変数は、productList.<param> の値と一致します。列 {hauss- extList と List がありません}。これは次のことを示しています CPQ テーブルにユーザー入力を追加します。
2. 個々の列のテキストの配置を調整するには、クラス slds-text- align_left、 slds-text-align_right、または slds-text-align_centerを追加します。複数のクラス名を追加するには、スペースで区切ります。
3. price、 list、および extList は常に右揃えされるため、数字は適切に位置合わせされます。
4. 画面上のスペースを節約するには、locationに [modal] を選択します。

層コンポーネント

これらの層コンポーネントプロパティ名は、CSV レイアウトのコンポーネント列で使用します。