FlexCard Designer と CPQ Cart FlexCard の詳細

学習の目的

この単元を完了すると、次のことができるようになります。

• FlexCard Designer でスタイルを変更する。
  
• CPQ カート固有の FlexCard を特定する。
  

FlexCard Designer の使用開始

FlexCard Designer では、CPQ カートの FlexCard を設定、削除、追加できます。テキスト、ボタン、アイコン、画像、リンク、グラフ、テーブル、FlexCard など、さまざまな要素を操作するための直感的なドラッグアンドドロップインターフェースが備わっています。

では、FlexCard Designer を使用して行えるいくつかの変更について説明します。

要素のスタイルの変更

[Style (スタイル)] パネルを使用すると、CPQ カートの要素に対して CSS (カスケードスタイルシート) をすばやく変更できます。背景、サイズ、境界線、パディング、余白、高さ、フォント、応答性を設定できます。

たとえば、カートの価格テキストの色を変更したいとします。FlexCard Designer でテキストを選択し、[Style (スタイル)] パネルを開いて、[Text Color (テキストの色)] の値を変更します。これだけで完了です。変更はプレビューですぐに確認できます。 

条件付きスタイリング

条件付きスタイリングを使用して、FlexCard の要素にスタイルを適用できます。データ項目の値に基づく条件が満たされた場合にスタイルを変更します。たとえば、請求状況が期日経過になっている場合に、請求 FlexCard に赤い枠を追加することができます。

いろいろな CPQ カート FlexCard

CPQ カートには多くの FlexCard が使用されています。親カードと子カードがあり、一部の子カードは多層にネストされた子カードを持ちます。この階層を理解する最も簡単な方法は、最上位の親カードから始めることです。[Catalog (カタログ)] タブと [Cart (カート)] タブにはそれぞれの親 FlexCard があります。[Catalog (カタログ)] タブには cpqBrowsePhaseContainer、[Cart (カート)] タブには cpqCartSummaryContainer がそれぞれ親 FlexCard として設定されています。

それぞれの FlexCard には、複数のボタン、子カード、プレースホルダーテキスト、繰り返し子カードがあります。cpqBrowsePhase Container 親 FlexCard には、カートの右側に子カード cpqCartFlexTable (1) があります。[View Card (カードを表示)] ボタン (2) をクリックすると、子カードを確認できます。

cpqCartFlexTable には繰り返し子カード (3) があります。これは、この子カードが再帰ロジックを使用して、合計ペイロードに必要なすべての項目を入力することを意味します。たとえば、カートにバンドルが含まれている場合、親カード cpqCartFlexTable でバンドル品目をすべて表示するために子カード cpqCartItems が繰り返されます。

カードには「This is a placeholder. Children of child FlexCards don’t run in Design view. See Preview. (これはプレースホルダーです。子 FlexCard の子カードはデザインビューでは実行されません。プレビューを確認してください。)」と表示されることがあります。これは、ネストされた子カードが存在するものの、FlexCard Designer のプレビューでは表示できないことを意味します。この場合は、[View Card (カードを表示)] ボタンをクリックして、1 つ下のレベルに進み、ネストされた子カードを確認してください。これにより、FlexCard Designer で新しいタブが開き、子カードが表示されます。

これまでに、cpqBrowsePhaseContainer、cpqCartSummaryContainer、cpqCartFlexTable の 3 つの FlexCard について説明しました。これらは、CPQ カートを構成する FlexCard の一部にすぎません。すべての CPQ カート FlexCard のリストを確認するには、Trailhead Playground で Omnistudio FlexCards アプリケーションを開いてください。すべての CPQ FlexCard の名前は、cpq または CPQ で始まります。

CPQ カートの設定では、カード間の親子関係を理解して、ネスト構造の最上層から最下層の子カードに向かって順に作業を進めることをお勧めします。この方法なら、全体像を把握しながら、正確な設定を行うことができます。

リソース

• Trailhead: Omnistudio FlexCard
• Salesforce ヘルプ: FlexCard 要素への条件付きスタイルの追加 
• Industries Training Playground にサインアップします
• プラクティスガイド: Configure_a_CPQ_Cart_Card (CPQ_Cart_Card の設定)