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

How to build a FlexCard in the FlexCard Designer

You build a FlexCard in the FlexCard Designer, an OmniStudio tool. The flow is the same idea on the managed package and on OmniStudio Standard, though the standard designer is more streamlined. Confirm OmniStudio is enabled and you have a data source ready (a Data Mapper or Integration Procedure) before you start.

By Dipojjal Chakrabarti · Founder & Editor, Salesforce DictionaryLast updated Jun 16, 2026

You build a FlexCard in the FlexCard Designer, an OmniStudio tool. The flow is the same idea on the managed package and on OmniStudio Standard, though the standard designer is more streamlined. Confirm OmniStudio is enabled and you have a data source ready (a Data Mapper or Integration Procedure) before you start.

  1. Create the FlexCard

    Open the OmniStudio FlexCards tab and create a new FlexCard. Give it a name, optional title and subtitle, and save. On OmniStudio Standard this takes about two clicks.

  2. Set the data source

    In the Setup panel, choose the data source: a Data Mapper Extract for plain Salesforce fields, or an Integration Procedure when you need to blend systems. Run it once so the Data JSON panel shows the returned structure.

  3. Build the layout

    From the Build panel, drag fields, blocks, images, and charts onto the canvas. For each field, pick the JSON path from your data source, then set labels and types in the Properties panel and styling in the Style panel.

  4. Add states and actions

    Define states so the card changes by condition, and add action buttons that navigate, launch an OmniScript, open a flyout, or fire an event. Use the Action Debugger to confirm each action works.

  5. Preview, activate, and place

    Preview against a real record ID across device viewports, fix anything the Data JSON panel reveals, then Activate. Drop the card onto a Lightning record page in App Builder or an Experience Cloud page in Experience Builder.

Namerequired

The unique API name of the FlexCard. You reference this name when embedding the card in App Builder, Experience Builder, an OmniScript, or a custom LWC wrapper.

Data Sourcerequired

Where the card reads its values. A Data Mapper Extract, an Integration Procedure, an Apex method, or another FlexCard. Without a source, fields have nothing to bind to.

Active versionrequired

A FlexCard must be activated before it renders on a page. Activation compiles the card into a Lightning Web Component and makes that version live.

Gotchas
  • Many validation errors appear only at runtime preview, not at deploy time. A card can activate cleanly and still break against a live record, so always test with real data.
  • Caching lives on the data source, not the card. Leave it on for stable lookups and turn it off for live values like balances, or the card will show stale numbers.
  • Designer layout and some labels differ between the OmniStudio managed package and OmniStudio Standard. Confirm which edition the org runs before following older screenshots.

See the full FlexCard entry

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