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

Display data and launch actions with Omnistudio Flexcards. To create a Flexcard, use Flexcard Designer. 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.

1<lightning-omnistudio-flexcard
2  flexcard-name="somecard"
3></lightning-omnistudio-flexcard>

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

1<lightning-omnistudio-flexcard
2  flexcard-name="AccountSummaryCard"
3  record-id={accountRecordId}
4  object-api-name="Account"
5>
6</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:

1<!-- LWR-compatible flexcard -->
2<lightning-omnistudio-flexcard
3  flexcard-name="somecard"
4  lwr
5></lightning-omnistudio-flexcard>

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

1<lightning-omnistudio-flexcard
2  flexcard-name="ContactCard"
3  lwr
4  record-id={contactRecordId}
5  object-api-name="Contact"
6>
7</lightning-omnistudio-flexcard>

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

1//Js
2export const SAMPLE_DATA = [
3  {
4    _id: "6862285777cfe51e4826909e",
5    isActive: true,
6    balance: "$3,249.31",
7    age: 36,
8    name: "Williamson Hyde",
9    email: "williamsonhyde@dancity.com",
10  },
11  {
12    _id: "68622857aa535d207b9e5a41",
13    isActive: false,
14    balance: "$1,291.33",
15    age: 27,
16    name: "Lakeisha Holland",
17    email: "lakeishaholland@typhonica.com",
18  },
19  {
20    _id: "68622857eb29c6a3762725b8",
21    isActive: true,
22    balance: "$1,558.63",
23    age: 22,
24    name: "Patel Green",
25    email: "patelgreen@endipine.com",
26  },
27];
28
29import { SAMPLE_DATA } from "./data.js";
30
31export default class TestComponent extends LightningElement {
32  constructor() {
33    this.sampleData = SAMPLE_DATA;
34  }
35}

Pass the data to the records attribute in your component.

1<template>
2  <lightning-omnistudio-flexcard
3    flexcard-name="testComponent"
4    parent-data
5    records={sampleData}
6  ></lightning-omnistudio-flexcard>
7</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. To make your component available in Experience Builder, see Configure a Component for Experience Builder.

Attributes

Name	Description	Type	Default
exposed-attributes	Public API attributes for the flexcard.	Object
flexcard-name	Name of the flexcard to render.	string
lwr	Determines which component to use for rendering. When true, uses runtime_omnistudio-generated-flexcard-lwr for LWR compatibility. When false or not provided, uses the standard runtime_omnistudio-generated-flexcard.	boolean	false
object-api-name	API name of the Salesforce object. Passed to the Omniscript as part of update omniscript action.	string
parent-data	Works with records to send data to the Flexcard. Default is false. When set to true and records can be set from the parent LWC.	boolean
record-id	RecordId of the Salesforce Object.	string
records	Complete data of the Flexcards. The UI renders based on this value.	Object[]

Omnistudio Flexcard

LWR Compatibility

Usage Considerations

Attributes

Lightning Component Reference

Contents