---
schema_version: "1"
id: 58825c22312cca739151c419a83261d6ad8ab840b0e02a7fe539b1895de0686f
title: Omnistudio Flexcard
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/omnistudioFlexcard/lightning-omnistudio-flexcard.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-omnistudio-flexcard.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 59fcb56f2d010a06a25ddcbce9afa66b27daaa0b18eba73389f56261e3b2f433
products:
  - Lightning Component Reference
---
# Omnistudio Flexcard

**`lightning-omnistudio-flexcard`**

A wrapper for Omnistudio Flexcards that enables you to display Flexcards in custom Lightning web components.

**For Use In**

Lightning Experience, Experience Builder Sites

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

Display data and launch actions with [Omnistudio Flexcards](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_flexcards_24388.htm&language=en_US). To create a Flexcard, use [Flexcard Designer](https://help.salesforce.com/s/articleView?id=xcloud.flexcard_workflow.htm). Omnistudio is available to select Industry Cloud customers. After you create and activate a Flexcard, you can use the `lightning-omnistudio-flexcard` component to display your Flexcard in your custom LWC component.

The `lightning-omnistudio-flexcard` component is a wrapper for the Flexcard component that's available for use in Lightning App Builder and Experience Builder Aura sites.

To use a Flexcard in your custom component, pass in the Flexcard's unique name.

```html
<lightning-omnistudio-flexcard
  flexcard-name="somecard"
></lightning-omnistudio-flexcard>
```

This example shows how to display account information based on a specific record ID.

<!-- prettier-ignore -->
```html
<lightning-omnistudio-flexcard
  flexcard-name="AccountSummaryCard"
  record-id={accountRecordId}
  object-api-name="Account"
>
</lightning-omnistudio-flexcard>
```

## LWR Compatibility

To use a Flexcard on a Lightning Web Runtime (LWR) site for Experience Cloud, include the `lwr` attribute like this:

```html
<!-- LWR-compatible flexcard -->
<lightning-omnistudio-flexcard
  flexcard-name="somecard"
  lwr
></lightning-omnistudio-flexcard>
```

This example shows how to use an LWR-compatible flexcard with record data:

<!-- prettier-ignore -->
```html
<lightning-omnistudio-flexcard
  flexcard-name="ContactCard"
  lwr
  record-id={contactRecordId}
  object-api-name="Contact"
>
</lightning-omnistudio-flexcard>
```

This example shows how to add data to the records parameter.

```javascript
//Js
export const SAMPLE_DATA = [
  {
    _id: "6862285777cfe51e4826909e",
    isActive: true,
    balance: "$3,249.31",
    age: 36,
    name: "Williamson Hyde",
    email: "williamsonhyde@dancity.com",
  },
  {
    _id: "68622857aa535d207b9e5a41",
    isActive: false,
    balance: "$1,291.33",
    age: 27,
    name: "Lakeisha Holland",
    email: "lakeishaholland@typhonica.com",
  },
  {
    _id: "68622857eb29c6a3762725b8",
    isActive: true,
    balance: "$1,558.63",
    age: 22,
    name: "Patel Green",
    email: "patelgreen@endipine.com",
  },
];

import { SAMPLE_DATA } from "./data.js";

export default class TestComponent extends LightningElement {
  constructor() {
    this.sampleData = SAMPLE_DATA;
  }
}
```

Pass the data to the `records` attribute in your component.

<!-- prettier-ignore -->
```html
<template>
  <lightning-omnistudio-flexcard
    flexcard-name="testComponent"
    parent-data
    records={sampleData}
  ></lightning-omnistudio-flexcard>
</template>
```

## Usage Considerations

When you add a Flexcard name that doesn't match any of your active Flexcards, an error is shown only when you preview the custom LWC project at runtime. In this case, you don’t see an error during deployment. Before you deploy your component to an org, verify the name of the Flexcard and that the Flexcard is active.

To make your component available in Lightning App Builder, see [Configure a Component for Lightning App Builder](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-for-app-builder.html). To make your component available in Experience Builder, see [Configure a Component for Experience Builder](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-for-community-builder.html).


:::::

:::::tab
::component-specification{component="omnistudioFlexcard" model="lwc" namespace="lightning"}

:::::

::::::