top of page
OmniStudioFactBg.png
  • Writer's pictureDinesh Kumar

Passing Data From LWC OmniScript to FlexCard

Updated: Mar 9, 2023

We can pass the data from LWC OmniScript to FlexCard in four ways.

  1. Pass a set of records using parent-data=true and records global context variable.

  2. Pass via parent-attribute

  3. Pass recordId

  4. Using PubSub Message on any action element on OS

Before moving on to see how it can be configured, lets first note the below points while embedding a FlexCard into an OmniScript:


1. In the Setup panel of the FlexCard, enable OmniScript Support.


2. Add the FlexCard as a Custom LWC element in the OmniScript and disable the Standalone LWC checkbox.


Now, let's go through each of the 4 ways to pass the data as pointed out above.


1. Pass a set of records using parent-data=true and records global context variable:

  • This method is used to pass the OmniScript data into the records global context variable of the FlexCard.

  • In the scenarios where we have to iterate the FlexCard in an OmniScript, we can pass a set of records to the embedded FlexCard using this approach.

  • Also, the FlexCard data source will not be considered in this approach.

  • To configure, go to the Custom LWC element’s Properties panel and find the Custom Lightning Web Component Properties section and add the below properties:

    1. Add parent-data as the Property Name, and true as the Property Source.

    2. Click + Add new Option and add records as the Property Name and in the Property Source add the JSON node that has the array of records to be passed to your FlexCard.

    3. Enter the node as a merge field using OmniScript merge field syntax, such as %Node%. For example, if your list of records is stored in a JSON object called accounts, enter %accounts%.


  • In the FlexCard we can directly refer to any JSON node passed under the records property above.

    1. For example, if the “Node” has a JSON structure as shown below:

"Node" : [{

"childNode1" : "value1",

"childNode2" : "value2",

},

{

"childNode1" : "value3",

"childNode2" : "value4",

}]

then those can be directly referred in the FlexCard as {childNode1}, {childNode2}


Limitations:

If we use parent-data=true and records, the FlexCard will not rerender if we go back and forth in the OmniScript. It will load only once during the step load.


2. Pass via parent-attribute:

  • The OmniScript is the parent of the embedded FlexCard. So using this approach, when we pass a Parent object from the LWC OmniScript to the FlexCard, the Parent global context variable, such as {Parent.Id}, must be used in the FlexCard.

  • To configure, go to the Custom LWC element’s Properties panel and find the Custom Lightning Web Component Properties section and add the below properties:

    1. Add parent-attribute as the Property Name, and set the Property Source with the parent JSON node whose child node has to be referenced in the FlexCard.



  • For example, the “StepReferringProviderFacilities” parent node has a JSON structure as shown below.

"StepReferringProviderFacilities": {

"selectedMemberID" : "001XXXXXXXXXXXX",

"enteredFirstName " : "FN",

"enteredLastName " : "LN",

"enteredDOB" : "",

"enteredMemberID" : "001XXXXXXXXXXXX",

"selectedRadio" : ""

}

  • In the FlexCard add the {Parent} merge field to refer to the data passed from the Omniscript such as {Parent.selectedMemberID}



Pass recordId:

  • Pass the recordId global context variable from an LWC OmniScript to an embedded FlexCard to run a query on the FlexCard. The query returns the data that populates the FlexCard data fields and actions.

  • To configure, go to the Custom LWC element’s Properties panel and find the Custom Lightning Web Component Properties section and add the below properties:

    1. Add record-id as the Property Name.

    2. Set the Property Source to a JSON node that contains a recordId. Use OmniScript merge field syntax, such as %nodename%, to enter the node as a merge field.

  • You can use the {recordId} merge field in your FlexCard such as in a SOQL query or as an input to the FlexCard data source to retrieve the recordId coming from the OmniScript data JSON.



3. Using PubSub Message on any action element on OS:

  • The Pub/Sub property enables Action elements and Step elements in an OmniScript to send the data in Key-Value pairs to a FlexCard. In the FlexCard register the pubsub event to retrieve the data.

  • To configure, in an OmniScript Action or Step element, click the Messaging Framework and select Pub/Sub.

  • In the Message’s Key-Value fields configure the data to be passed to the FlexCard. The Value field accepts the merge field syntax.

  • In the Flexcard configure the event listener to listen to the event fired from the OmniScript.

  • To listen to the event fired from the OmniScript Action:

    1. Keep the channel name as omniscript_action and the event name as data.

    2. To map the data passed from OmniScript to data source or set value, use {action.nodePassedFromOSUsingKeyValuePairs}. For example, in the below screenshot, “selectedProviderID” is passed from the OmniScript through PubSub, hence retrieve it as {action.selectedProviderID}.




  • Similarly, to listen to the event fired from the OmniScript Step:

    1. Keep the channel name as “omniscript_step” and the event name as “data”.

    2. To map the data passed from OmniScript to data source or set value, use {action.nodePassedFromOSUsingKeyValuePairs}.



Document Reference

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

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

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

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

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

  6. https://success.vlocity.com/s/question/0D53m000071UObkCAG/how-to-fire-pubsub-event-from-omniscript-to-custom-lwc

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






16,500 views0 comments

Recent Posts

See All
OmniStudioFactFooterBg.png
logo.png

OmniStudiofacts helps us to build a Vlocity/OmniStudio Tech Community which focuses on sharing technical skills and experience across the globe.

© 2023 by OmniStudioFacts.

bottom of page