Explore FlexCard Designer and CPQ Cart FlexCards

Learning Objectives

After completing this unit, you’ll be able to:

• Make style changes with Flexcard Designer.
  
• Identify FlexCards specific to CPQ Cart.
  

Get Started with FlexCard Designer

FlexCard Designer lets you configure, remove, and add CPQ Cart FlexCards. It features an intuitive drag-and-drop interface for handling various types of elements, such as text, buttons, icons, images, links, charts, tables, and FlexCards.

Let’s cover a couple of changes that you can make using FlexCard Designer.

Modify Element Styles

The Style panel allows you to make quick CSS (Cascading Style Sheets) changes to elements of CPQ Cart. You can configure backgrounds, sizes, borders, padding, margins, height, fonts, and responsiveness.

Let’s say you want to change the color of the pricing text in the cart. Select the text in FlexCard Designer, open the Style panel, and change the value in Text Color. It’s as simple as that! You see these changes immediately in the preview. 

Conditional Styling

You can apply styles to a FlexCard element with conditional styling. Change style features when a condition based on the value of a data field is met. For example, add a red border around a billing FlexCard when the bill status is past due.

Discover CPQ Cart Cards

There are many FlexCards used for CPQ Cart. There are parent and child cards, with some child cards having many layers of nested child cards. The simplest way to understand this hierarchy is to start with the top-level parent cards. The Catalog and Cart tabs each have their own parent FlexCard. For the Catalog tab, cpqBrowsePhaseContainer is the parent FlexCard while the Cart tab has cpqCartSummaryContainer as its parent FlexCard.

Within each FlexCard, you have several buttons, child cards, placeholder text, and repeating child cards. In the cpqBrowsePhase Container parent FlexCard, you have the child card cpqCartFlexTable (1) on the right side of the cart. Clicking the View Card button (2) allows you to see the child card.

cpqCartFlexTable has repeating child cards (3). This means that this child card uses recursion logic to populate all the fields necessary for the total payload. In other words, if you have a cart with a bundle in it, the child card cpqCartItems will repeat itself to display all of the bundle items within the cpqCartFlexTable parent card.

A card can say, “This is a placeholder. Children of child FlexCards don’t run in Design view. See Preview.” This means that FlexCard Designer can show you that nested child cards exist but cannot render them in the preview. You should click the View Card button to dive down a level to see the nested child cards. This opens a new tab with the child card in FlexCard Designer.

We’ve covered three FlexCards: cpqBrowsePhaseContainer, cpqCartSummaryContainer, and cpqCartFlexTable. They’re just a few of the FlexCards that comprise CPQ Cart. To see a list of all the CPQ Cart FlexCards, open the OmniStudio FlexCards app in your training playground. Every CPQ FlexCard starts with cpq or CPQ.

For CPQ Cart configuration, it’s helpful to understand the parent-child relationship between cards, and then work your way down to the lowest level of child cards in the nested structure. This way, you will understand the larger picture and can make precise configuration decisions.

Resources

• Trailhead: OmniStudio FlexCards
• Salesforce Help: Add Conditional Styles to a FlexCard Element 
• Sign up for an Industries Training Playground
• Practice Guide: Configure_a_CPQ_Cart_Card