Discover the Key Capabilities of FlexCards
Learning Objectives
After completing this unit, you’ll be able to:
- Explain the function of FlexCards.
- List key capabilities of FlexCards.
Get Familiar with FlexCards
OmniStudio FlexCards display contextual information in an at-a-glance format and provide access to relevant tasks for the displayed data.
Here’s a FlexCard for an insurance company’s customer named Sophia Fournier.
Notice Sophia’s key profile data, including her address. You can also see the current weather for her location. Sophia might want to grab a jacket!
Underneath the profile data are several attributes (tags) that the agents have informally learned during their calls with Sophia. The second set of tags (Watercraft, Life, Umbrella) indicate her current policies with the company.
The bottom of the FlexCard includes clickable actions to update Sophia’s address, contact details, or tags.
You can also combine several FlexCards together, displayed on what we call an Interaction Console.
The Interaction Console provides a holistic view of the customer's information—and FlexCards are important components of these 360-degree views. The FlexCards you see on the console are Lightning web components (LWC) based on FlexCards; the console itself is a Salesforce Lightning console.
Key Capabilities
OK, so let’s say you have 2 minutes to describe what FlexCards are and what they can do. What do you say? Here are the key capabilities of FlexCards.
- FlexCards summarize contextual information at a glance.
- FlexCards are the beginning and ending points for customer transactions.
- FlexCards are viewable on any device or channel.
- FlexCards can display data from multiple data sources.
- FlexCards are built quickly using drag-and-drop elements.
- FlexCards have a what-you-see-is-what-you-get (WYSIWYG) editor for controlling their layout and style.
- FlexCard actions are relevant to the context of the card.
- FlexCards are embeddable in other FlexCards.
- FlexCards are embeddable inside an LWC OmniScript.
- FlexCards display more detail on demand with flyouts.
- FlexCards have multiple states that display based on conditions.
Pretty impressive! Now let’s dive in and explore each capability.
The steps in this module are for demonstration purposes only. OmniStudio is not enabled in Trailhead Playground orgs.
FlexCards Summarize Contextual Information at a Glance
Most FlexCards provide a combination of information and actions. Remember Sophia Fournier? Let’s look at another FlexCard, this one detailing marine insurance for her boat.
The at-a-glance details of the policy include the policy number, annual premium, term, and expiration date. The actions allow us to view details, pay the premium, modify coverages, file a claim, or enable paperless billing.
FlexCards Are the Beginning and Ending Points for Customer Transactions
Let’s take another look at Sophia’s profile FlexCard.
In a call center scenario, a call center agent interacts with a customer over the phone, views the customer’s information, and launches guided processes from the FlexCard.
Let’s say Sophia has moved to another county and needs to change her address. The agent launches the Update Address process from the FlexCard. After the process is complete, the FlexCard displays the new address and weather information.
View FlexCards on Any Device or Channel
FlexCards aren’t restricted to Interaction Consoles for call center agents; you can deploy them for viewing on any device and channel, such as a mobile device or a consumer portal.
You deploy FlexCard Lightning web components from the Lightning App Builder to a Lightning page or from the Experience Builder to a Community or portal page. You can also deploy FlexCards to an external content management system, such as Adobe Experience Manager, or inside a custom web container, like Heroku.
Display Data from Multiple Data Sources
A FlexCard can display a combination of internal information from Salesforce and external information from a website or a third-party legacy system. The FlexCard displays this information uniformly, even if it has come via multiple sources. For example, Sophia Fournier’s profile FlexCard displays internal data from her account details and external data related to the weather.
Quickly Build FlexCards Using Drag-and-Drop Elements
The FlexCard Designer lets you quickly configure, preview, and debug cards. You can drag and drop, position, and resize UI elements onto a canvas to format text, buttons, icons, images, links, charts, tables, and even other FlexCards.
Use the Properties panel to configure the element’s properties. The properties available depend on the element type. Some elements reveal different properties depending on how you configure them.
Use the WYSIWYG Editor to Control a FlexCard’s Layout and Style
The FlexCard Designer includes a WYSIWYG editor that lets you control FlexCard layout and style without needing templates.
To globally manage styles, you can use custom CSS or modify the style directly in the designer. You can set the style for each FlexCard element as follows.
- Set height and width.
- Add backgrounds, borders, and text.
- Set padding, margins, and text alignment.
You can review the styling changes immediately on the FlexCard canvas. When you style an element, you save the style for reuse across the FlexCard.
FlexCard Actions Are Relevant to the Context of the Card
Clicking an action on a FlexCard launches a workflow that begins a guided process, such as recording a call. Other action types allow us to display a flyout window with more information, navigate to another record, listen for an event from another FlexCard and reload the card when that event is fired, or notify another component on a page or application that an event has occurred.
In the following example, clicking the Update Case action opens a second tab for the Update Case Details guided interaction, which is an OmniScript.
In this example, the agent clicked Enable Paperless Billing on one of Sophia Fournier’s policy cards to open a modal with a guided interaction to sign up for paperless billing.
Embed FlexCards in Other FlexCards
You can embed FlexCards in other FlexCards using the child FlexCard element. You can also launch a child FlexCard from an action element.
Embedding a child FlexCard lets you have multiple data sources within one FlexCard. There’s no limit to how many child FlexCards you can embed; they only need to be active.
In this example, a child Cases FlexCard is an element within a parent Cases FlexCard. The child displays case details and actions. Without it, the parent is merely a container with a Cases dropdown menu and a Create Case action.
Embed FlexCards Inside an OmniScript
You can embed a FlexCard Lightning web component inside an OmniScript, which means the FlexCard displays as part of a guided interaction.
Here, the embedded FlexCard displays medical plans that the user compares before selecting one as part of the interaction.
Display Details on Demand with Flyouts
A flyout is another FlexCard that appears when you click an action on a FlexCard. A flyout displays the following.
- Additional information or actions that would cause too much clutter if displayed on the parent card.
- Secondary information or actions that are not as important to show at the parent card level.
In this example, clicking Get 5-Day Forecast displays additional forecast information for this Weather FlexCard (the parent FlexCard displays current weather conditions only).
Display Multiple States Based on Conditions
FlexCard states let you set up different appearances for a FlexCard based on the type or status of the information displayed. You can design multiple FlexCard states and set conditions that determine if, when, and how data displays on a FlexCard. In short, a FlexCard state determines what the user can see and do on the card.
The following example shows a plan or subscription status (active, past due, nonexistent). This single card has three different states. Conditions determine which state is displayed.
- The left-hand card displays if the plan is active.
- The middle card shows an additional indicator if payment is past due.
- The right-hand card displays if the subscriber currently does not have this plan, but offers the ability to add it.
Note
FlexCard elements can also conditionally display.
FlexCards are pretty cool (if we do say so ourselves). Now that you have a sense of FlexCard basics, let’s check out FlexCard Designer in the next unit.
Resources