Salesforce Dictionary - Free Salesforce GlossarySalesforce Dictionary
Full FlexCard entry
How-to guide

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.

By Dipojjal Chakrabarti · Founder & Editor, Salesforce DictionaryLast updated May 21, 2026

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.

  1. 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.

  2. Open the FlexCard Designer

    OmniStudio, then FlexCards, then New. Pick a starter template or blank canvas. The designer opens.

  3. 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.

  4. 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.

  5. Save and activate

    Click Save. To make the FlexCard available on Lightning pages, click Activate. The activation creates the underlying Lightning component bundle.

  6. 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.

Key options
DataRaptor Extract data sourceremember

The standard pattern. Pull fields from Salesforce objects; map JSON to FlexCard elements.

Integration Procedure data sourceremember

For complex data combining Salesforce and external systems; the IP returns the final JSON.

Custom Apex data sourceremember

For logic that does not fit DataRaptor; an Apex class returns the JSON.

Action buttonsremember

Navigation, OmniScript launch, Integration Procedure call, or custom JS. Make FlexCards interactive.

Gotchas
  • 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.

See the full FlexCard entry

FlexCard includes the definition, worked example, deep dive, related terms, and a quiz.