レイアウト形式 (ビジュアルおよび YAML)

レイアウトは、ビジュアルエディターまたは YAML のいずれかで管理できます。ビジュアルエディターはデフォルトで選択されていますが、管理者は YAML に切り替えることができます。

新しいレイアウトの作成

新しいレイアウトを作成するには、トランザクションマネージャ管理UIに移動し、左側のメニューで「 レイアウト 」をクリックし、「 +レイアウトの追加」 をクリックして新しいレイアウトを詳細計画に追加します。

既存のレイアウトは、レイアウトの [名前を付けて保存] 機能を使用してコピーできます。

レイアウトには名前と変数名が必要です。[名前] フィールドをクリックし、新しいレイアウトの名前を入力し、[ 保存] をクリックして続行します。名前は後でレイアウト内で編集できますが、レイアウトを保存した後は変数名を編集できません。

レイアウトが保存されると、ビジュアルエディターが開きます。デフォルトのレイアウトには、メイン層、品目グリッド、製品検索機能など、いくつかの重要なアイテムが含まれています。

レイアウト名とステージの関連付け

レイアウトの変数名は、レイアウトをステージにマップするために使用されます。レイアウトをステージにマップするには、ステージ名をレイアウト名として使用します。「layout」という名前のレイアウトは、レイアウトがマッピングされていないステージにマッピングされます。テキストの デフォルト がすべてのレイアウト変数に追加されます。

たとえば、ステージの名前が [ドラフト]、[承認済み]、および [履行済み] で、レイアウトの名前が [ドラフト] と [レイアウト] の場合、マッピングは次のようになります。

オプションの明細行詳細レイアウトでは、ラインアイテムグリッドで選択した明細の詳細が表示されます。このビューは、ライン詳細 UI エフェクトを介して開始されます。このレイアウトには独自のレイアウトファイルが必要であり、変数名は _linedetail で終わる必要があります。これらのレイアウトは、ステージと同じマッピングに従います。上記の例を続けると、ドラフトステージの明細行詳細レイアウトが必要な場合は、名前を draft_linedetailにする必要があります。

レイアウトの YAML コードには、サブヘッダーのビュートグルを使用してアクセスできます。アドミニストレーターは、ビジュアルエディターを使用するか、YAML コードを直接編集してレイアウトを更新できます。各要素の YAML には、要素プロパティの [生の値] セクションからアクセスすることもできます。

[ 保存] ボタンをクリックすると、現在のバージョンのレイアウトが保存されます。ただし、新しいバージョンをランタイムで使用するには、詳細計画を展開する必要があります。レイアウトにエラーがある場合、[保存] ボタンは無効になります。エラーを特定するには、サブヘッダーの [エラーメッセージ] ボタンを選択します。YAML ビューで、エラーの場所を示す、ディスプレイの右側にある赤いマークを探します。

一般的なレイアウト情報

サブヘッダーの歯車 (設定) アイコンをクリックして、レイアウト設定にアクセスします。

設定は次のとおりです。

ブランディング

ヘッダーをカスタマイズします。

通貨表示

通貨の表示スタイル (コード、記号、またはどちらでもない) を設定します。

価格が 0 の場合、次のように表示

価格がゼロのときの動作を設定します。

価格が未定義の場合、次のように表示

価格が未定義の場合の動作を設定します。

無効なオプションの選択を許可

ユーザーが選択リストから無効なアイテムを選択できるようにします。ユースケースは、選択されている場合に説明メッセージを表示することです。

フィールドの変更をハイライト表示

有効にすると、フィールドが短時間強調表示されます。ルールや統合によってフィールドが更新される場合、または同時ユーザーが想定される場合に推奨されます。

ヘッダーを非表示

レイアウトのヘッダーセクションを非表示にします。

テーマ作成

トランザクションマネージャーのレイアウトは、テーマを使用してカスタマイズできます。テーマは [テーマのカスタマイズ] タブで有効にできます。詳細については、「テーマによる CPQ のカスタマイズ」を参照してください。

ステージの進捗状況の二重山かっこ

ステージ進捗状況二重山かっこコンポーネントには、ステージを通じたトランザクションの進行状況を視覚的に表す水平二重山かっこバーが表示されます。静的または動的に定義でき、レイアウト YAML を使用して構成できます。詳細については、「トランザクションマネージャー:レイアウト:ステージの進捗状況の二重山かっこ」を参照してください。

階層

階層は、トランザクションの情報のセクションです。層は、トランザクションマネージャーレイアウトの階層構造の最上位です。階層を使用して取引情報を整理し、バイサイドユーザーが見つけやすく理解しやすくすることができます。列セット、階層、または品目グリッドを層内に追加できますが、品目グリッドは層内の唯一の要素である必要があります。

階層タイプには、メニュー、展開可能、タブ、垂直タブ、見出し、ページが含まれます。階層のタイプと深度は、[階層定義] タブで設定できます。

列セット

構成の場合と同様に、列セットは、ランタイム表示上のフィールドとイベントを整理できるようにするレイアウト内のオブジェクトです。フィールドとイベントは、列セットに水平方向に配置できます。フィールドとイベントは、同じ層内の複数の列セットを使用して垂直に配置されます。列セット内にフィールド、画像、テキスト、およびボタンを追加できます。

列セット:フィールド

フィールドは、列セットの Elements 配列に配置できるオブジェクトの 1 つのタイプです。フィールドは、トランザクションのデータ入力ソースを提供します。フィールドは、[レイアウトの配置] タブの列セットで追加、削除、および順序付けできます。追加すると、[フィールド情報の編集] タブでフィールドプロパティを設定できます。

[フィールド情報の編集] タブで、フィールド表示タイプを [テキストエリア] に変更すると、フィールドのサイズを変更できます。

ColumnSets:イベント

イベントは、特定のアクションの実行を引き起こすオブジェクトです。通常、イベントはレイアウトでボタンとして表されます。イベントを追加するには、列セットにボタンを追加し、[ イベント ボタン] 設定を切り替えます。有効にすると、[イベント] 選択リストからイベントを選択できます。

品目グリッド

品目グリッドオブジェクトには、トランザクションに含まれる製品情報が表示されます。詳細な製品情報と価格情報は、Line Item Grid オブジェクトに表示されます。

品目グリッドには次のレイアウトプロパティがあり、それぞれ値が true の場合に有効になります。プロパティは、メインの YAML エディターで定義する必要があります。

• showLineNumbers:分かりやすい回線番号を有効にします
• supportLongText:選択するとフィールドのポップオーバーを有効にする品目グリッドフィールドプロパティ
• autoScrollIntoView:トランザクション本文と LIG の間のスクロールインタラクションをスムーズにします

YAML コードスニペット:

     - depth: 1
      label: Line Items
      lineGrid:
        columns:
          - order: 1
            variableName: txn.line.product.name
          - order: 2
            variableName: txn.line.product.partnerId
        showLineNumbers: true
        lineLevelButtons:
          - icon: settings
            label: Line Details
            uiEffect:
              type: lineDetail
              target: slideout
            variableName: reconfig
          - event: cloneLine
            label: Clone Lines
            variableName: cloneLine
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites
        gridHeaderButtons:
          - label: Add Lines
            uiEffect:
              type: productSearch
              target: slideout
              options:
                products: true
                favorites: true
            variableName: productSearch
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites
          - label: Reconfigure Lines
            uiEffect:
              type: reconfigure
              target: slideout
            variableName: reconfig
        autoScrollIntoView: true
      variableName: lineItems

行レベルのイベントボタンには、アイコンを定義できます。アイコンは、行ボタンプロパティの [生の値] セクションまたはメインの YAML エディターの YAML コードで定義する必要があります。ボタンは、SLDS ユーティリティー・ライブラリーから指定されたアイコンを使用できます。

表 : 2. 利用可能なアイコン

自動化	buyer_group_qualifier	二重山かっこ	二重山かっこ左	二重山かっこ	二重山かっこアップ
選択	クリア	時計	閉じる	custom_apps	delete
下	編集	お気に入り	左	lightning_extension	右
質問	検索	設定	target_mode	3ドット	threedots_vertical

YAML コードスニペット:

        lineLevelButtons:
          - icon: settings
            label: Line Details
            uiEffect:
              type: lineDetail
              target: slideout
            variableName: reconfig
          - event: cloneLine
            label: Clone Lines
            variableName: cloneLine
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites

最後に、明細品目グリッドに行番号を表示するには、レイアウトプロパティを使用するか、2 つのシステムフィールドのいずれかを使用するという 3 つの方法があります。

• showLineNumbersレイアウトプロパティ。効率的に実行され、行数に制限がないため、この方法が推奨されます。

  showLineNumbers 表示されている行の連続した行番号を表示します。フィルターまたは検索が品目グリッドに適用されると、番号付けがリセットされます。

• txn.line.orderNumberシステムフィールド

  txn.line.orderNumber すべての行の階層的な行番号付けを表示します (例:1、1.1、2、2.1、2.2、2.2.1)。フィルターまたは検索が品目グリッドに適用されても、番号付けはリセットされません。番号付けは最大 2,000 行まで適用できます。

  このフィールドには、他のラインレベルのフィールドと同じレイアウトプロパティがあり、レイアウトの lineGrid セクションのレイアウトに追加できます。

  このフィールドを有効にするには、カスタマーサポートに要求を送信します。

• txn.line.numberシステムフィールド

  txn.line.number すべての行 (1、2、3 など) の連番を表示します。

  txn.line.orderNumber と同様に、フィルターまたは検索が適用されても番号付けはリセットされず、最大 2,000 行です。このフィールドには、他のラインレベルのフィールドと同じレイアウトプロパティがあり、レイアウトの lineGrid セクションのレイアウトに追加できます。このフィールドを有効にするには、カスタマーサポートに要求を送信します。

製品リスト検索

製品リスト検索オブジェクトは、行の追加/製品検索フローの製品リスト検索結果のレイアウトプロパティのセットを提供します。デフォルトでは、製品リストの検索は、[ 行を追加] UI エフェクトボタンを介して追加されます。製品検索オブジェクトでフィールドを追加、削除、並べ替えて、ランタイム UI を定義できます。関連するプロパティは、次の 3 つの場所にあります。

• [製品検索 (Product Search UI)] 効果のあるボタンのボタンプロパティ
• レイアウト内の Product Search オブジェクトを介してアクセスする製品リスト検索プロパティ
• レイアウト上の製品リスト検索オブジェクトの各フィールド

製品リスト検索オブジェクトのプロパティは次のとおりです。

• プライマリデフォルトソート:検索結果のソートに使用する最大 2 つのパラメーターを定義します。次のフィールドをパラメーターとして使用できます。
  • 変更
  • created
  • 名前 (パラメーターが定義されていない場合のデフォルト)
  • partnerId
  • 製品コード
  • 説明
  • unitPrice
  • externallyConfigurable
  順序は、 パラメーターごとに asc または desc として定義できます。
• 送信時に検索:検索結果をユーザーが入力したときに更新するか、[ 送信] をクリックしたときにのみ更新するかを決定します。

フィールドレベルのプロパティは次のとおりです。

列幅

幅を定義するための CSS 互換値

位置調整

ヘッダーと値の配置

ソートを有効にする

有効にすると、列のソートを許可します

長いテキストポップオーバーを有効にする

有効にすると、フィールドの値が選択されているときにポップオーバーが表示されます

UI 効果

UI エフェクトは、ボタンに特定の機能を追加するレイアウト要素です。UI エフェクトには次のものが含まれます。

URL

関連する URL をインライン、モーダルウィンドウ、スライドアウトパネル、または新しいタブまたはウィンドウで開きます。

アンカー

トランザクション内の指定された場所に移動します

製品検索

製品カタログを開き、[製品の追加] フローを開始します

明細行の詳細

明細レイアウトを開きます

再構成

選択した製品を構成 UX に開きます

お気に入りを追加

選択範囲からお気に入りを説明および作成するためのモーダルウィンドウを開きます

お気に入りの管理

お気に入りマネージャーを開きます

セッションをリフレッシュ

セッションが変更されたかどうかを確認し、変更されている場合は sessionId を更新して変更を結合します。

エクスポートライン

ソート、フィルター、および列の表示/非表示の設定を満たすトランザクション内のすべての行を CSV ファイルにエクスポートします。

YAML コードスニペット

レイアウトプロパティ:

# Layout version
version: 1
# Layout identifiers
label: Example layout
variableName: default_ExampleLayout
# Tier definitions
tierDef:
  - depth: 1
    representation: BasicContainer
# Layout
layout:
  label: layoutsection
  variableName: layoutsection
  tiers:
    - label: tier1
      variableName: tier1
      depth: 1

階層:

# Layout
layout:
  label: layoutsection
  variableName: layoutsection
  tiers:
    - label: tier1
      variableName: tier1
      depth: 1

列セット:

columnSets:
        - elements:
            - type: field
              columnOrder: 1
              variableName: txn.opportunity.id
          variableName: col1

フィールドを含む列セット:

columnSets:
        - elements:
            - type: field
              columnOrder: 1
              variableName: txn.opportunity.id
            - type: field
              columnOrder: 1
              variableName: txn.custom.opportunityName
            - type: field
              classInfo: mw20
              columnOrder: 1
              variableName: txn.custom.primaryContact
          variableName: col1

イベントを含む列セット:

To be added

フィールドプロパティ:

fields:
  - type: Text
    label: Custom line field
    variableName: txn.line.custom.customText
  - type: ReadOnlyText
    label: TXN Number
    variableName: txn.custom.tXNNumber

製品リスト検索:

productList:
  columns:
    - label: Product ID
      sortable: true
      variableName: id
    - label: Product Name
      variableName: name
    - label: Product description
      variableName: description
      supportLongText: true
    - label: Price
      variableName: unitPrice
  defaultSort:
    - externallyConfigurable,desc
    - name