Salesforce OmniStudio offers a range of tools that allow businesses to create dynamic, responsive, and modular user interfaces with minimal code. One of its most powerful features is the Salesforce FlexCards – a lightweight, configurable UI component used to present contextual data in a clear and compact layout.
FlexCards are commonly used in industries like telecom, healthcare, and finance to display data such as account summaries, customer profiles, or recent transactions. Whether you’re building a call center interface or enhancing a customer service console, FlexCards help organize critical information in an accessible format.
What is a Salesforce FlexCards?
A FlexCard is a declarative, data-driven component designed for rapid development. It can pull in data from Salesforce or external systems, and its modular design means it can be reused in various parts of an app, embedded into other components, or deployed independently.
Key features include:
- Declarative Configuration: Build using drag-and-drop tools with minimal coding.
- Context Awareness: Automatically adapts to the data provided.
- Reusable Design: Can be nested or integrated across multiple experiences.
- Fast Rendering: Optimized to display only the data needed, quickly and clearly.
FlexCards support standard UI elements such as text, images, icons, buttons, and containers allowing for highly customized layouts tailored to specific use cases.
Also Read: How to Pass List/Obj to Integration Procedure from FlexCard?
Steps to Create a FlexCard
To begin building your own FlexCard in OmniStudio:
- Navigate to OmniStudio FlexCards from the App Launcher in Salesforce.
- Click New to create a card.
- Provide a clear, descriptive name (e.g., CustomerInfoCard).
- Add a Data Source if you have one or just set it as ‘None’ for now.
Once created, you’ll enter the FlexCard Designer, which serves as your workspace to lay out UI components and bind them to data.
Using a Custom JSON Data Source
Rather than immediately connecting to a Salesforce object or external API, one of the simplest ways to prototype your FlexCard is by using a custom JSON data source. This allows you to simulate incoming data and design the UI accordingly.
In the Preview tab of the FlexCard Designer, you can enter mock data manually in JSON format. For example:
{
"FirstName": "John",
"LastName": "Doe",
"Email": "john.doe@example.com"
}
This JSON structure mimics the kind of data you might eventually pull from a real Salesforce record but allows for quicker iteration and experimentation during the design phase.
Binding Data Using Merge Fields
Once your JSON is set, you can add Text elements to your card layout and bind them to data using merge field syntax – curly braces that refer to the key names in your JSON.
For example:
- {FirstName}
- {LastName}
- {Email}
Each Text element will dynamically display the corresponding value from your data source in Preview mode. This method helps visualize how real data would appear without needing to publish the card or integrate with a live backend right away.
To add a field:
- Drag a Text element into your card.
- Set the content using merge fields like {FirstName}.
- Save and preview your layout in real time.
This approach is ideal for rapid prototyping and validating your design before moving to more complex configurations.
Summary
FlexCards are a powerful entry point into Salesforce OmniStudio development. By using a simple JSON data source and merge fields, you can quickly create and preview a functional, data-driven card layout. This technique is ideal for learning the core concepts, building UI prototypes, and preparing for integration with real data sources like DataRaptors or Salesforce objects.
Once you’re confident working with merge fields and custom layouts, you’ll be ready to explore advanced topics like parent-child FlexCard communication, action buttons, and data source integration.
You can watch the full tutorial video that walks through this process here on YouTube.
