In this article, we’ll explore a practical example demonstrating how to update the data JSON of an OmniScript from a FlexCard.
This process encompasses the following steps:
- Develop a FlexCard to interface with the OmniScript.
- Integrate the FlexCard into the OmniScript as a custom LWC (Lightning Web Component).
Step 1: Creating a FlexCard:
A. Generate a new FlexCard.
B. Activate the “OmniScript Support” checkbox from the ‘Setup’ tab of the FlexCard.
Note: The checkbox must be enabled for a FlexCard to interact with an OmniScript.
C. Here, a Select input element has been added to the FlexCard.
In the Field Properties section of the Select input element, enter the details as shown below.
Note: Depending on the requirements, we have the flexibility to include any input or display element in the FlexCard that supports actions for updating the OmniScript data JSON.
D. Click on the “Add Action” button in the ‘Field Properties’ section.
E. Open the Action Properties modal and enter the following details.
Action Type: Update OmniScript. This action updates the Data JSON of the OmniScript in which the FlexCard is embedded when executed.
Parent Node: PreferredLanguage. This node will store 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.
Here, two input parameters are added:
Input 1:
- Key = SelectedLanguage
- Value = {element.value}
Here, {element.value} represents the local context variable that contains the value selected in the ‘Select’ input element placed within the FlexCard.
Input 2:
- Key = UserPreferenceCaptured
- Value = yes
Note: We can include any number of input parameters that hold static or dynamic values as required.
F. Now, activate the FlexCard.
Step 2: Embedding the FlexCard within the OmniScript:
Create a new OmniScript, then add the activated FlexCard as a Custom Lightning Web Component input element within the OmniScript.
Here, the following details are entered in the ‘Custom Lightning Web Component‘ input element:
- Name: CustomLWC1 (a unique name given to the input element).
- Label: CustomLWC1 (the label of the input element).
- Lightning Web Component Name: cfUpdateOSFromFC (the name of the FlexCard that was previously created and activated; note that the prefix ‘cf’ is appended to the FlexCard name).
Now, drag a Text element.
In the Text section, static text contents are added alongside merge field syntax (%ChildFC:PreferredLanguage:SelectedLanguage%) to dynamically access the value passed from the FlexCard.
Here:
- ChildFC is the name of the Custom Lightning Web Component (the 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, holding the dynamically selected value from the ‘Select Input‘ element.
Additionally, 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, activate and preview the OmniScript. The ‘Select‘ input element from the FlexCard will be displayed.
When the user selects a specific value from the list of language options, the text block dynamically displays 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 dynamically appears in OmniScript because the Data JSON is updated accordingly from the FlexCard action.
links:
https://help.salesforce.com/s/articleView?id=sf.os_update_an_omniscript_from_a_flexcard.htm&type=5
https://help.salesforce.com/s/articleView?id=sf.os_embed_flexcards_in_an_omniscript_24124.htm&type=5
https://help.salesforce.com/s/articleView?id=sf.os_flexcards_context_variables_42922.htm&type=5
