In high-volume service environments, customer support agents need to act fast. But navigating through multiple screens and records in Salesforce can slow them down. This is where OmniStudio FlexCards shine—by offering a concise, at-a-glance view of case information right within the agent’s workspace.
In this blog, we’ll walk through how to build a Case Summary Card step-by-step using FlexCards and why it’s a must-have for modern service teams.
The Use Case: Rapid Case Review
Support agents often juggle multiple cases. They don’t have time to dive into multiple screens or tabs to find key case data. That’s where a Case Summary Card comes in handy.
By surfacing the most relevant information—such as Case Number, Status, Priority, and Customer Contact—directly on the screen, agents can act faster and deliver a better service experience.
What is a FlexCard?
FlexCards are UI components in Salesforce OmniStudio designed to display data from Salesforce or external systems in a modular and reusable format.
Key Features:
- Display real-time data from Salesforce or external APIs
- Include fields, text, images, buttons, and conditional styling
- Embed within Lightning Pages, OmniScripts, Experience Cloud, or Utility Bars
- Launch actions like Flows, OmniScripts, or custom events
Think of FlexCards as mini dashboards built for speed and efficiency.
Key Elements of a Case Summary Card
A well-designed Case Summary Card typically includes:
- Case Number
- Subject
- Priority
- Status
- Created Date / Last Modified
- Assigned Agent
- Account or Contact Information
- Action Buttons: Close Case, Escalate, Email Customer
Instead of opening the full Case record, a Case Summary Card gives them everything they need in one screen—along with buttons to take quick action like Close Case, Escalate, or Email Customer.
Step-by-Step: How to Build the Case Summary Card:Step 1: Set Up the Data Source (DataRaptor Extract)
Before you design the card, you need a data source.
- Go to OmniStudio > DataRaptors > New Extract DataRaptor
- Select Case as the primary object
-
Add the fields you need:
- CaseNumber, Subject, Priority, Status, CreatedDate, LastModifiedDate, Owner.Name
-
Add related objects like:
- Contact.Name, Contact.Email, Account.Name
- Save and activate the DataRaptor
Tip: Use a Relationship Query to pull parent-child data in one go.
Step 2: Create the FlexCard
- Navigate to OmniStudio > FlexCards > New
-
Provide
- Name: CaseSummary
- Object: Case
- Data Source Type: DataRaptor
- Select the DataRaptor Extract created in Step 1
Step 3: Design the Layout in FlexCard Designer
- Open the FlexCard Designer
-
Use drag-and-drop to add:
- Text elements: for static labels (e.g., “Case Number”)
- Field elements: for dynamic values (e.g., CaseNumber, Status)
Step 4: Configure Action Buttons
FlexCards can include action buttons that trigger:
Action 1.1
- Action Label: Closed Case
- Action Type: Data
- Data Source Type: DataRaptor
- Interface Type: Post
- Interface Name: DRP_CloseCase_IP_FC_V2data
- Input Map:
Action 1.2
- Action Label: Reload Action
- Action Type: Card
- Type: Reload
Action 2.1
- Action Label: Escalated Case
- Action Type: Data
- Data Source Type: DataRaptor
- Interface Type: Post
- Interface Name: DRP_CloseCase_IP_FC_V2data
- Input Map:
Action 2.2
- Action Label: Escalated Reload
- Action Type: Card
- Type: Reload
Action 3.1
- Action Label: Email Customer
- Action Type: Flyout
- Flyout Type: OmniScripts
- Flyout: Service/Case/English
- Layout Type: Lightning
- Attributes:
I have used an OmniScript to send an email to the Case-related child Contact's email address. I configured the required variables in the Set Values action, as shown in the screenshot. Then, I used the Email Action to set the subject and email body.
SetValue
Email Action
Configure them using Action elements inside the card and pass the Case ID dynamically.
Action 3.2
- Action Label: Email Reload
- Action Type: Card
- Type: Reload
Step 5: Test & Preview
- Click Preview in the FlexCard designer.
- Load sample data or select a record from the Case object.
- Test all buttons and field visibility conditions.
- Ensure correct data is rendered from the DataRaptor.
Step 6: Deploy the FlexCard
Once your card is ready and tested:
- Activate the FlexCard
- Go to Lightning App Builder
- Add OmniStudio FlexCard component
- Select your card and map the recordId (from Case page context)
- Save and activate the Lightning page
I have tested all the action buttons, and they are working as expected.
For example, when I click on the "Close Case" button, the case should be marked as closed, and the FlexCard should no longer be visible on the record page. This condition has been implemented in the DataRaptor Post configuration.
Example for Escalated Case
Similarly, when I click on the "Escalate Case" button, the case status should be updated to "Escalated."
Before Button Click:
After Button Click:
Example for Email Customer:
When the "Email Customer" button is clicked, an email should be sent to the email address of the related Contact. The email body should include the Case Number, Subject, and Status of the case.
Conclusion:
FlexCards provide a powerful, no-code solution to build rich, contextual UI components directly within Salesforce. The Case Summary Card is a prime example of how service teams can streamline workflows, reduce screen clutter, and improve responsiveness.
By surfacing the most important case details in a clean, easy-to-read layout, agents can resolve issues faster, with fewer clicks and less context switching—ultimately driving higher customer satisfaction.
Stay tuned for more FlexCard implementation guides, including use cases like Account Overviews, Order Summaries, and Customer Portals.
Got questions? Feel free to drop an email to support@astreait.com