Update OmniScript from FlexCard

In this article, let us see an example of how to update an OmniScript’s data JSON from a FlexCard.

It involves the below steps:

Create a Flexcard to interact with the Omniscript.
Embed the Flexcard as a custom LWC inside the Omniscript.

Step 1: Creation of a Flexcard:

a. A new Flexcard is created.

b. From the ‘Setup’ tab of the Flexcard, the OmniScript Support checkbox is enabled.

NOTE: This checkbox should be enabled for a Flexcard to interact with an Omniscript.

c. In this example, a Select input element is added to the Flexcard.

Now in the Field Properties section of the Select input element, details are entered as shown below.

NOTE: Based on the need, we can add any input or display element in the FlexCard that supports action to update the Omniscript data JSON.

d. The Add Action button in the 'Field Properties’ section is clicked.

e. The Action Properties modal is opened and the below details are entered.

Action Type : Update Omniscript. This updates the Data JSON of the Omniscript in which the Flexcard is embedded when the Action is executed.

Parent Node : PreferredLanguage. This node will hold the data sent from the Flexcard to the Omniscript.

In the Input Parameters section, the data to be passed to the Omniscript is added in a key-value pair.

In this example, two input parameters are added.

Input 1: Key = SelectedLanguage and Value = {element.value}

where {element.value} is the local context variable that holds the value selected in the ‘Select’ input element placed in the Flexcard.

Input 2: Key = UserPreferenceCaptured and Value = yes

NOTE: We can add any number of input parameters that hold static or dynamic values based on the need.

f. Now, the FlexCard is activated.

Step 2: Embedding the FlexCard inside the Omniscript:

A new Omniscript is created, and the activated Flexcard is now added as a Custom Lightning Web Component input element in the Omniscript.

In our example, the below details are entered in the ‘Custom Lightning Web Component’ input element.

Name : ChildFC, unique name given to the input element.
Label : ChildFC, label of the input element.
Lightning Web Component Name : cfUpdateOSFromFC, the name of the Flexcard that was previously created and activated. Observe that the prefix ‘cf’ is appended to the Flexcard name.

A Text Block element is added to the Omniscript.

In the Text section, static text contents are added along with the merge field syntax (%ChildFC:PreferredLanguage:SelectedLanguage%) to access the value passed from the Flexcard dynamically.

Here,

ChildFC is the name of the Custom Lightning Web Component (embedded Flexcard).

PreferredLanguage is the Parent Node value entered in the Flexcard Action.

SelectedLanguage is the value passed in the Input Parameter from the Flexcard Action that holds the value selected from the ‘Select Input’ element dynamically.

Also, in the Conditional View section, a new condition (ChildFC:PreferredLanguage:UserPreferenceCaptured = yes) is added to display the ‘Text Block’ conditionally.

Here, UserPreferenceCaptured is the second ‘Input Parameter’ passed from the Flexcard action with the static value ‘yes’.

This ensures that the ‘Text Block’ only appears in the UI when the user selects a value in the Flexcard’s ‘Select Input’ element.

Output:

Now the Omniscript is activated and viewed in ‘Preview’ mode. The ‘Select’ input element from FlexCard is displayed.

When the user selects a particular value from the list of Language options, the text block is displayed dynamically with the selected ‘Language’ value.

In the Omniscript Data JSON, a new node named PreferredLanguage is created within the ChildFC node, and the two input parameters passed from the Flexcard are captured in the ‘PreferredLanguage’ parent node.

Similarly, when the user selects a different ‘Language’ value, the corresponding value shows up dynamically in the Omniscript since the data JSON is updated accordingly from the Flexcard action.

Language selected : French