What are FlexCards?

Posted by Vinay Vernekar 7th October 2025

Quick definition

FlexCards are a lightweight, configurable UI component in Salesforce OmniStudio (formerly Vlocity) designed to display contextual, actionable information from multiple data sources in a compact card layout. They provide a declarative way to assemble UI elements, map data, and add actions without heavy custom code—making them ideal for building fast, reusable interfaces for agents and customers.

Core components of a FlexCard

FlexCards are built from several core parts that work together:

  • Data Sources: REST/SOAP integrations, DataRaptors, Integration Procedures, and platform objects that feed data into the card.
  • Elements/Slots: UI building blocks (text, images, lists, icons, badges) that display mapped data.
  • Actions: Declarative actions such as Navigate, Open OmniScript, Execute Integration Procedure, or custom JavaScript for interactivity.
  • Conditional Rendering: Rules to show/hide elements based on data or context.
  • Templates & Styles: Reusable templates and CSS tokens for consistent UI across cards.

Key features and benefits

FlexCards are powerful because they combine several capabilities:

  • Declarative design: build cards in the OmniStudio FlexCard Designer with drag-and-drop.
  • Multi-source aggregation: combine data from multiple sources and present it in a single view.
  • Reusability: create templates and child cards to reuse UI across pages and channels.
  • Performance: lightweight rendering optimized for fast load times in agent consoles and responsive apps.
  • Action-driven UX: attach actions to card regions—drive navigation, edits, or server-side logic directly from the card.

When to use FlexCards

Use FlexCards when you need:

  • Compact, contextual displays of record or related information (e.g., customer summary, policy overview, product tile).
  • Reusable UI components that appear across multiple screens or channels (web, mobile, agent desktop).
  • Quick, action-oriented interfaces where users need to view details and trigger workflows from the same component.

Simple FlexCard JSON example

Below is a simplified snippet to illustrate how a FlexCard defines elements and data mapping. (Actual FlexCard JSON is more extensive and generated by the designer.)

{
"Type": "FlexCard",
"Name": "CustomerSummaryCard",
"DataSources": [
{"name":"CustomerAPI","type":"REST","url":"/services/customer/{id}"}
],
"Elements": [
{"type":"header","text":"{{Customer.Name}} - {{Customer.Status}}"},
{"type":"field","label":"Phone","value":"{{Customer.Phone}}"},
{"type":"button","label":"Open Case","action":"OpenOmniScript","omnisciptId":"createCase"}
]
}

Best practices

  • Keep cards focused: display a single subject (customer, account, policy) per card for clarity.
  • Use data caching and aggregation techniques (Integration Procedures, DataRaptors) to minimize runtime calls.
  • Leverage conditional rendering to keep the UI clean and responsive to different data shapes.
  • Design for reuse: abstract common layouts into templates and child cards.
  • Test performance in real channels (agent console, community) and optimize payloads.

Interview tips

When asked about FlexCards in an interview, demonstrate that you understand both the business value and the technical mechanics. Mention how FlexCards integrate with DataRaptors and Integration Procedures, how you manage actions, and give a brief example of a use-case you implemented or would implement—emphasizing reusability and performance optimizations.

Keywords: FlexCards, OmniStudio, Salesforce, FlexCard Designer, DataRaptor, Integration Procedure, declarative UI, actions, conditional rendering.

Tags: