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

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

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

<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:

<!-- 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:

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

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

<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. To make your component available in Experience Builder, see Configure a Component for Experience Builder.

:::::

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

:::::

::::::