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

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:

1. https://docs.vlocity.com/en/Fire-an-Event-to-Automatically-Close-a-Flyout-Modal.html