Embed Flexcards in an Omniscript

Embed a Flexcard Lightning Web Component in an Omniscript by using the Custom LWC element. Flexcards can receive data from the Omniscript and perform any action available in the Flexcard.

1. From the elements panel, drag the Custom LWC element into a step.
2. In the properties panel, in the element's Lightning web component name, enter the Flexcard component's name and prepend cf to the beginning of the name.
   For example, a Flexcard named Account Card must be entered as cfAccountCard.
3. In Property Name, enter a property that the Flexcard expects to receive by converting the property to an HTML attribute format. Three options enable you to pass data into the Flexcard from your Omniscript. Each data option requires you to pass data as an HTML attribute. For example, if a Flexcard receives the property recordId, you must enter record-id in the property name field to pass the property correctly.

   Property Name Option	Description
   record-id	Pass a record id into a Flexcard using the record-id property. Flexcards use record ids to perform data queries.
   parent-attribute	Pass a parent object containing parent attributes such as Parent.id into the Flexcard. Use merge fields in Flexcard queries and fields.
   parent-data AND records	Map data to Flexcard fields directly without running a query. The parent-data property is a boolean that Flexcards uses to determine whether to run a query or parse over a set of records.
   listen-os-data-change	Update the Flexcard whenever the passed-in Omniscript data changes.

4. In Property Source, using merge field syntax, enter one of these options based on your property name:

   Property Name	Property Source
   record-id	Enter a JSON node that contains an object. For example, to pass a record ID stored in the ContextId node, enter %ContextId%. To avoid Flexcard loading issues, don’t use the merge field syntax to reference a custom LWC. For example, if the name of the LWC is customlwc1, don’t use %customlwc1%.
   parent-attribute	Enter a JSON node containing an object.
   parent-data AND records	Set parent-data's property source to true. Set records equal to an object containing a record or an array of records. Flexcards parses over these records and maps the nodes to Flexcard fields.
   listen-os-data-change	Enter true to update the Flexcard whenever the passed-in Omniscript data changes.

5. (Optional) Rerender and refresh the Flexcards save state whenever a user navigates to the step by:

   1. In the Flexcards Designer, disable Omniscript support.

   2. In the Omniscript Designer, open the Custom LWC element and check Standalone Mode. For information on Standalone Custom LWCs, see Create a Standalone Custom Lightning Web Component.

6. (Optional) Beginning with Summer '21, provide Selectable Items in your Omniscript using Flexcards. See Set Up Card Actions to Update a Flexcard.
7. To pass the Flexcard data to the parent Omniscript, see Update an Omniscript's JSON Code from a Flexcard.
8. Save and Activate the Script.
9. Preview the Omniscript.
   

   Note

   Omniscripts using custom Lightning web components must be active to preview the Omniscript.

• Pass Data from an Omniscript to an Embedded Flexcard
  To populate data fields and perform actions on a Flexcard embedded in an Omniscript, you can pass data from an Omniscript's data JSON to the Flexcard. Embed a Flexcard inside an Omniscript with the Custom Lightning Web Component element.
• Pass Data from a Flexcard to an Omniscript By Using a Custom JSON Data Source
  To pass data from a Flexcard’s data JSON to an Omniscript, embed the Flexcard as a custom Lightning web component (LWC) inside the Omniscript.