top of page
OmniStudioFactBg.png

How To Close a Flyout Modal From an Action in a FlexCard

Writer's picture: Palem Ravi Kiran ReddyPalem Ravi Kiran Reddy

Updated: Mar 9, 2023

A flyout modal can be launched from a FlexCard as below:

  • From the FlexCard Designer, drag an Action element into a state.





  • Select “Action Type” as Flyout and in the “Flyout” select the OmniScript to be launched.

  • Select “Open Flyout in” as Modal.

  • Add a “Channel Name” which will be used further to listen to the event that is fired to close the modal. The default channel name is close_modal, however, we can add any alphanumeric name.

  • If we want to reset the Flyout after closing then select the “Reset Component On Close” Checkbox.




Closing the Flyout Modal:

A Flyout Modal can be closed from the standard close icon on the modal popup. But if we have to close it from an action on an OmniScript or a FlexCard then it can be configured as below::

  • Fire a PubSub event from the component where the close action is present and then listen that PubSub event in the FlexCard from where the Flyout was launched:

    1. For example, consider we have to close the flyout modal on click of the Cancel button on the OmniScript, then fire the PubSub event from the Messaging Framework of the OS Element by selecting the Pub/Sub.

    2. Configure the PubSub listener on the FlexCard with channel name omniscript_action and event name as data.

    3. Also fire another PubSub event from this listener with the channel name called close_modal and event name called close. This channel name should match the channel name that we added while configuring the Flyout above.





References:


4,274 views1 comment

Recent Posts

See All

Passing Data From FlexCard to LWC OmniScript

There are two ways to launch an Omniscript from a FlexCard: Add an Omniscript as a Custom LWC. Launch an Omniscript from an action Let's see

Passing Data From Parent to Child FlexCard

We can pass the data from parent to child Flexcard in two ways: Using Data Node Using Attributes Using Data Node: To use the parent...

Passing Data From LWC OmniScript to FlexCard

We can pass the data from LWC OmniScript to FlexCard in four ways. Pass a set of records using parent-data=true and records global...

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