FlexCard
A FlexCard is an OmniStudio component that displays formatted, read-only data from one or more sources in a configurable card UI.
Definition
A FlexCard is an OmniStudio component that displays formatted, read-only data from one or more sources in a configurable card UI. FlexCards combine information from Salesforce objects, external systems (through DataRaptor calls), and computed values into a single visual surface: an account summary card showing tier, balance, recent transactions, and quick-action buttons. They live on Lightning record pages, in OmniScripts, on Experience Cloud sites, and embedded in standard Salesforce pages, providing context-rich data displays without requiring custom Lightning Web Components.
FlexCards are part of OmniStudio (formerly Vlocity) and the Industries Cloud suite. Building one is declarative: a designer canvas with drag-and-drop fields, headers, action buttons, and conditional blocks. The data source is typically a DataRaptor Extract (now Data Mapper Extract) or an Integration Procedure, returning structured JSON that the card maps to display elements. Salesforce''s industries customers use FlexCards heavily because they encapsulate complex data displays into reusable, configuration-driven components.
How FlexCards work in OmniStudio
The FlexCard data source
Every FlexCard has a data source that provides the values to display. Most common: a DataRaptor Extract that pulls fields from Salesforce objects, an Integration Procedure that combines Salesforce data with external API calls, or a custom Apex method. The data source returns JSON; the FlexCard maps JSON paths to display elements.
Designer canvas and field mapping
The FlexCard designer is a drag-and-drop canvas. Drag field elements, headers, separators, image blocks, and action buttons onto the card. For each field, pick the JSON path from the data source. Conditional blocks (show this section only when a value is present) and repeating elements (one row per item in a list) support complex displays.
Actions and event handling
FlexCards support action buttons that trigger Salesforce navigation, open OmniScripts, fire Integration Procedures, or run custom JavaScript. A typical pattern: a Pay Now button on an invoice FlexCard launches a payment OmniScript. Actions make FlexCards interactive read-only displays: read-only data plus action buttons.
Embedding FlexCards in Lightning pages
After designing a FlexCard, deploy it as a Lightning component (the platform auto-generates an LWC under the hood). Drop the FlexCard onto a Lightning record page in App Builder, configure its input parameters, save. The card renders with live data on the record page.
Caching and performance
FlexCards support response caching: the underlying DataRaptor or Integration Procedure can cache results for a configurable TTL. For frequently-viewed records, caching dramatically reduces SOQL load. For real-time data (current balance, live order status), caching should be off. Tune per FlexCard based on freshness needs.
Versioning and the Salesforce Industries lifecycle
FlexCards have versions: In Development (editable draft) and Active (deployed). Activating a version replaces the previously active version on Lightning pages. Older versions stay accessible for rollback. Salesforce Industries customers manage FlexCard versions as part of their deployment lifecycle.
The OmniStudio rebrand to Data Mapper
Since Summer 24, Salesforce has been rebranding OmniStudio components: DataRaptors are now Data Mappers; some references are being renamed. FlexCards retain their name. Existing FlexCards continue to work; new documentation uses the updated terminology where applicable.
How to build and deploy a FlexCard
Building a FlexCard takes about 15-30 minutes for the basic configuration: define the data source, design the card, save and activate. Deploy to a Lightning page through App Builder.
- Build the data source
Create a DataRaptor Extract that pulls the fields you want to display: from Salesforce objects, with optional joins. Test the DataRaptor with sample input; confirm the JSON shape.
- Open the FlexCard Designer
OmniStudio, then FlexCards, then New. Pick a starter template or blank canvas. The designer opens.
- Set the data source
On the Setup tab, link the FlexCard to your DataRaptor (or Integration Procedure). Configure input parameters that the data source needs.
- Design the card layout
Drag elements onto the canvas: text fields, image blocks, action buttons, conditional sections. Map each to a JSON path from the data source. Preview to see the rendered card.
- Save and activate
Click Save. To make the FlexCard available on Lightning pages, click Activate. The activation creates the underlying Lightning component bundle.
- Embed in a Lightning page
Open the target Lightning record page in App Builder. Drag the FlexCard component onto the canvas. Configure input parameters (typically the record Id). Save and activate the page.
The standard pattern. Pull fields from Salesforce objects; map JSON to FlexCard elements.
For complex data combining Salesforce and external systems; the IP returns the final JSON.
For logic that does not fit DataRaptor; an Apex class returns the JSON.
Navigation, OmniScript launch, Integration Procedure call, or custom JS. Make FlexCards interactive.
- FlexCards require OmniStudio licensing. Standard Salesforce orgs do not have them; check entitlement before designing around them.
- Activating a FlexCard replaces the prior version on every Lightning page that references it. There is no per-page version control.
- Caching can produce stale displays. Real-time data (balances, statuses) should have caching off; reference data can be cached aggressively.
- Action buttons run in the user''s context. A button that launches an OmniScript requires the user to have OmniStudio access.
Trust & references
Straight from the source - Salesforce's reference material on FlexCard.
- FlexCards OverviewSalesforce Help
About the Author
Dipojjal Chakrabarti is a B2C Solution Architect with 29 Salesforce certifications and over 13 years in the Salesforce ecosystem. He runs salesforcedictionary.com to help admins, developers, architects, and cert/interview candidates sharpen their fundamentals. More about Dipojjal.
Test your knowledge
Q1. What is a FlexCard?
Q2. Where do FlexCards fit?
Q3. What OmniStudio tools pair with FlexCards?
Discussion
Loading discussion…