Communication between Vlocity omniscript

and Flexcard

The OmniScript and FlexCard components of the Vlocity platform are powerful tools for
creating dynamic and interactive user interfaces. The most common requirement in
OmniStudio is data to be passed between an OmniScript and a FlexCard, allowing
seamless communication and data exchange between the two components. In this article,
we will look at the various methods for passing data from an OmniScript to a FlexCard.
Prerequisites:

Before initiating communication between Flexcard and Vlocity Omniscript, we must meet
the prerequisites.

Step 1:
Open the Flexcard to which you want the data to be sent, then choose the
omniscript support checkbox, and enable it.

Step 2:
 Add the Custom LWC element to the canvas in the omniscript. Select the FlexCard
to which you want to send data and uncheck the Standalone LWC checkbox.

Pass data from Omniscript to Flexcard:

Passing data from Omniscript to Flexcard is essential to get the value from Omniscript to
Flexcard for UI changes. There are three types of data that we can pass from OmniScript
to an embedded FlexCard. These are:

1. Passing a set of records.

2. Passing the recordID.
3. Passing a parent object.

1. Passing Set/List of records:

• Set/List of Records: This method allows you to pass a collection of records from
OmniScript to the FlexCard.
• It is useful when you need to display or manipulate multiple records in
the FlexCard.
• In the omniscript after completing step 2 of the prerequisite, select the Custom
LWC element, go to the Custom Lightning Web Component Properties section,
and add the properties below:

➢ Assign the property source to ‘true’ and the property name to ‘parent-data’. It
is mandatory for passing data.

➢ Add the second property, assign the property name to ‘records’, and add the
JSON node with the merge syntax (Example: %Contact%) to the property
source that has the array of records to be passed to your FlexCard.
➢ In the FlexCard, we can directly refer to any JSON node passed under the
records property above, or we can directly refer to the records also.

➢ For example, if the “Contacts” has a JSON structure as shown below:

“Contact “: [
{
“FirstName”: “Test”,
“LastName”: “one”,
},
{
“FirstName “: “new”,
“LastName “: “old”,
}
]
Then, those can be directly referred in the FlexCard as {FirstName}, {LastName}.

2. Passing the recordID:

• In this method, you can pass the ID of a specific record from the OmniScript to
the FlexCard.
• This is helpful when you want to focus on a particular record within the FlexCard.
• In the Omniscript, after completing step 2 of the prerequisite, select the Custom
LWC element, go to Custom Lightning Web Component Properties section,
and add the properties below:

➢ The node with recordId should be assigned the property source using its
merge syntax (Example: %contextId%) and assign the property name to
‘record-Id’.
➢ In the FlexCard, we can directly refer as “{recordId}” with the merge syntax to the
inputmap of the data raptor to get a particular record of the recordId.

3. Passing a parent object:

• This method enables you to pass the entire parent object from the OmniScript to
the FlexCard.
• It is beneficial when you need to access and work with the complete parent object
in the FlexCard.
• In the Omniscript, after completing step 2 of the prerequisite, select the Custom
LWC element, go to the Custom Lightning Web Component Properties section,
and add the properties below:

➢ Assign the property source to ‘true’ and the property name to ‘parent-data’. It
is mandatory for passing data.
➢ A node that contains the object information will be assigned to the property
source with the merge syntax (Example: %account%) and assigned property
name as ‘records’.

For example, if the “account” has a JSON structure as shown below:

"account": {
"account": {
"Name": "Test Account 5",
"Phone": "123456890"
}
}
 Then, we can refer to the account as %account% in property source.

➢ In the FlexCard we can refer as “{account.Name}” with the merge syntax

to the default value of the input element or to the inputmap of the data
raptor to get a particular record.

By following these steps, you can establish effective communication between

an OmniScript and an Embedded FlexCard in Vlocity. Whether you need to pass a set of
records, a record ID, or a parent object, these techniques will enable you to seamlessly
exchange data and create dynamic user experiences.

Reference:

https://help.salesforce.com/s/articleView?id=sf.os_pass_data_from_an_lwc
_omniscript_to_an_embedded_flexcard_41656.htm&type=5