Example Use Cases for Flexcard Events

Update Product List

Create a Lightning page that shows a filterable list of products.

1. Create a Flexcard that shows filters, and has an Apply button that, when clicked, triggers an event.
2. Create another Flexcard that shows product information, listens for the first Flexcard’s event, and executes an action.

Register Dynamic Custom Event

Create an event on a Flexcard by using a merge field called channel_{Session.name}, case{recordId}, or evnt_{Parent.status}. Then register the specific event from another component. For example, register channel_acme, case143437h8f9f00, or evnt_New.

Select One Child Flexcard Across Multiple Parents

Let users select new values by resetting previously selected records. Configure the resetselectedcards event to reset the selection on the child card, or on the child card and its parent Flexcards.

1. Create a child Flexcard.
2. To give users a way to select the child card, add an actionable element such as Block or Action.
3. Create an action to trigger the event that deselects all previously selected child cards. In the appointment example, let’s clear all selected appointments across all healthcare providers. Perform these tasks:
   1. In the Actions section of the Properties panel, select Event as the Action Type and Pubsub as the Event Type.
   2. Enter a Channel Name, such as makeappointment.
   3. Enter an Event Name, such as clearprevappt.
4. In the Setup panel, create the event listener for this event:
   1. Enter the same values for Event Type, Channel Name, and Event Name from the previous steps.
   2. Under Actions, create a custom event action whose Event Name is resetselectedcards.
   3. To reset child cards across all parents, select Bubbles, and confirm Composed isn't selected. However, if your parent Flexcard has selectable elements, and you want users to reset selected items on both parent and child cards, select Composed as well as Bubbles. For example, if a user must select the doctor before selecting the appointment, both the doctor and the appointment are reset when the user selects a new appointment.
   4. Click Save.
5. On the same actionable element from step 2, create an action to select a new child card.
   1. In the Actions section of the Properties panel, create a sequential action.
   2. Select Event as the Action Type and Custom as the Event Type.
   3. Enter the Event Name such as selectappt.
   4. Select Bubbles. If you selected Composed in step 4 c, select it now. Else, make sure it remains deselected.
6. In the Setup panel, create an event listener for the custom event.
   1. Enter Custom as the Event Type, and enter the Event Name from your custom event action.
   2. Under Actions, select Card as the Action Type and Select Cards as the Type.
   3. In Selected Cards List Name, enter a name for the array that holds the selected card data, such as appointment.
   4. Configure other properties for the Select Cards action.
   5. To update an Omniscript with the selected card's data, add a sequential action.
   6. Select Update Omniscript as the Action Type.
   7. In the Input Parameters section, click + Add New.
   8. In the Key field, enter a name of the data node to pass to the Omniscript. For example: .
      selectedappointment
   9. In Value, enter the name entered in Selected Cards List Name as a merge field. For example:
      {appointment}
   10. Click Save.
7. Activate the Flexcard.
8. In the parent Flexcard, and drag a Flexcard element.
9. For Flexcard Name, select the child Flexcard created in step 1.
10. To preview and test your Flexcard before publishing, click the Preview tab. Select a child card, such as an appointment time. Then select another one. When you select a new child card, any previously selected child card on any parent card is unselected. If Composed is selected with Bubbles, if there are any selectable items on the parent Flexcard, those are also reset when a child is selected.
11. In the Setup panel, select Omniscript Support.
12. Before embedding your Flexcard as a custom LWC into an Omniscript, activate your Flexcard.

Pass Data from a Flexcard to an Omniscript in a Flyout

Passing data from a Flexcard to an Omniscript in a flyout involves setting up a custom data source, triggering the Omniscript with an action element, and configuring the event listener to pass the data.

1. Create an Omniscript.
   See Create an Omniscript.
2. Create a Flexcard with a custom data source and add the custom JSON {test}.
   Pass this {test} data to an Omniscript in subsequent steps.
3. Drag an action element to the Flexcard canvas that triggers the action to launch the Omniscript.
   1. Display the action element as a button.
      When the user clicks this action button, it launches the Omniscript in a flyout.
   2. Add a pubsub action, dataactionevent, to the action element.
   3. Pass an input parameter in the event action by setting the key as obj and value as {test}.
4. From the Flexcard setup, configure the event listener of the Flexcard with these values.
   • Event Type: Pubsub
   • Event Name: dataactionevent
   • Channel Name: dataactionevent
   • Action Type: Flyout
   • Flyout Type: Omniscripts
   • Flyout: Select the Omniscript that you created in Step 1, which you want to launch in a flyout from the Flexcard.
   • Event Type: Pubsub
   • Pass an input parameter in the event action with key as test and value as {action.obj}.
5. In the Omniscript, add an element that accepts the {test} data from the Flexcard.
   For example, add a text block with the merge field %test%. When the user clicks the action button in the Flexcard, the Omniscript appears in a flyout and the text block displays the {test}.
6. Preview the Flexcard to verify that clicking the action button launches the Omniscript in a flyout and that the test data is correctly displayed in the Omniscript.

Reload a Flexcard After Updating an Omniscript in a Flyout

To update information on a Flexcard after the user interacts with an Omniscript embedded in a flyout:

1. Create the Omniscript to embed in the Flexcard flyout.
   See Create an Omniscript.
2. Set up the communication between the Omniscript and a Lightning web component by adding a navigate action to the Omniscript, and selecting the pub/sub messaging framework.

   See Navigate Action.

3. Add a flyout action on the Flexcard.
   See Set Up Flyouts on a Flexcard.
4. On the Setup tab of the Flexcard, add an event listener to the flyout to reload the Flexcard in response to an event with these values:

   Event Type: Pubsub

   Channel Name: omniscript_action

   Event Name: data

   Action Type: Card

   Type: Reload