Salesforce Docs Portal

Embed a Custom Lightning Web Component, a Flexcard, or an Omniscript in a Flexcard (Managed Package)

For the managed package runtime, embed a custom LWC, a child Flexcard, or an Omniscript in a Flexcard, and add custom styling and functionality. For example, if you have a carousel component, you can embed it in a Flexcard and then configure its attributes.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Before You Begin

Create and activate a Flexcard, a custom LWC component, or an LWC Omniscript to generate a Lightning web component to embed in your Flexcard state. See Create an LWC Omniscript (Managed Package) or Create an LWC Omniscript in the LWC Omniscript Designer (Managed Package).

Important
Important Don’t embed the same component in multiple Flexcards.
  1. In the Flexcard designer, open a Flexcard and drag a Custom LWC element from the Build panel into the Flexcard.
  2. In the Properties panel, you can enter an optional element name.
  3. For Custom LWC Name, select the custom LWC to embed.
    • The custom LWC element renders in Preview only.
    • The names of custom LWCs created in the Flexcard designer have the prefix cf. For example, if your Child Flexcard name is AccountCases, the custom LWC element name is cfAccountCases.
  4. Set the component’s attributes.
    1. Click +Add next to Attributes, and enter a name such as thumbnaillimit.
      The name of a custom LWC attribute must match the element's markup name. For example, for the targetType attribute from the Navigate Action LWC, enter target-type.
    2. For Value, select a merge field such as {Number}, a supported context variable such as {Session.number}, or text.
      Pass concatenated strings by combining plain text and supported merge fields. For example, pass a breadcrumb path such as {Parent.parentPath}>{Parent.type}>{Name}.
  5. To display or hide data based on the value of a data field, add conditions to an element of your Flexcard.
  6. To style your element, click Style.
    You can configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states.
  7. Preview your Flexcard.
  • Flexcards Custom LWC Properties (Managed Package)
    For the managed package runtime, custom LWC element properties are configurable in the Property Panel when you select a Custom LWC element in the Flexcard Designer. With Custom LWC element, embed an LWC Omniscript, a generated Flexcard LWC, or a custom LWC, inside a Flexcard state.