Gayathiri Mohan

Jan 94 min read

Communicate between two Flexcards using Pubsub Events

Flexcard can fire and listen to two types of events: Custom and Pubsub events.

Custom Events are used to communicate between a child and its parent - either between a child Flexcard and a parent Flexcard or between an element and the Flexcard where it is present.

Pubsub Events are used to communicate between two separate components - either between two different Flexcards present on the same Lightning page (sibling Flexcards) or between a Flexcard and an Omniscript.

In this article, let us see an example of how to communicate between two different FlexCards present on the same Lightning page using the Pubsub event.

It involves the below steps:

Create a Flexcard that fires a Pubsub event.
Create another Flexcard that listens to the Pubsub event fired by the previous Flexcard and performs an action in response.

1) Create a Flexcard that fires a Pubsub event:

A new Flexcard is created, and a Select input element is added to it. This flexcard will be used to fire a pubsub event.

The Add Action button in the Properties section is clicked, the Action Properties modal opens, and details are entered as shown below.

Action Type : Event

Event Type : PubSub

Channel Name : DisplayFilteredCases

Event Name : FilterCase

NOTE:

When configuring pubsub and custom events, there are some event names and channel names that are reserved for specific purposes. The reserved names are listed in this article: FlexCards Reserved Event and Channel Names

We can use any custom Channel and Event names, excluding these reserved names as needed.

In the Input Parameters section, add the data to be passed in a key-value pair.

Here, Key : SelectedPriority and Value : {element.value}

where {element.value} is the local context variable that holds the value selected in the ‘Select’ input element placed in the Flexcard.

2) Create another Flexcard that listens to the Pubsub event:

Now we create another Flexcard. This listens to the pubsub event fired by the previously created Flexcard and performs the required action.

An Integration Procedure POC_GetFilteredCases that returns a list of cases linked to an Account is created. This will be used as a data source on the Flexcard.

Here, DRGetCaseDetails is a DataRaptor Extract Action that retrieves all the cases linked to an Account, based on the value passed in the AccountId filter value.

The Set Value Action SVFilterCase uses the result of the DataRaptor Extract action.

In the Element Value Map, a new element is added.

Element Name : FilteredCase

Value:

In the function, %ApplyFilter% is the condition.

If %ApplyFilter% is passed as false, all the cases returned from the DataRaptor Extract Action will be set to the element.

If %ApplyFilter% is true, then only those cases matching the specific priority (based on the dynamic input PriorityValue) will be set to the element.

The Response Action RASendToFC sends the output of the Set Value action as the Integration Procedure response.

Now, from the ‘Setup’ tab of the Flexcard, the Integration Procedure is added as the Data Source.

In the Input Map section, two input variables to be passed to the data source are added in a key-value pair.

Input 1: Key = AccountId and Value = {recordId}

where {recordId} is a context variable that has the Record Id value of the record in which the Flexcard is placed.

Input 2: Key = ApplyFilter and Value = false

Since false is passed, all the cases linked to Account will be returned from the Integration Procedure.

Then the ‘Save and Fetch’ button is clicked.

A datatable element is added to the Flexcard, and it automatically fetches the columns and data from the data source.

From the ‘Setup’ tab, the Repeat Records checkbox is disabled.

Then a new Event Listener is added, as shown below.

This event listener is used to listen to the pubsub event fired from the previously created Flexcard.

NOTE:

The values in Channel Name and Event Name should exactly match the values entered in the Flexcard firing the ‘Pubsub’ event.

In the Action section, the below details are entered and saved.

Action Type : Card

Type : Update DataSource. This updates the Flexcard Data JSON based on the response sent from the data source.

Data Source Type : Integration Procedures

Name : POC_GetFilteredCases. This is the name of our Integration Procedure.

In the Input Map section, three input variables to be passed to the data source are added in a key-value pair.

Input 1: Key = AccountId and Value = {recordId}

Input 2: Key = ApplyFilter and Value = true

Input 3: Key = PriorityValue and Value = {action.SelectedPriority}

where {action.SelectedPriority} holds the value passed from the pubsub event fired from the other Flexcard.

The input parameters ApplyFilter = true and PriorityValue = {action.SelectedPriority} ensure that the cases matching the priority value will be returned from the Integration Procedure.

NOTE:

To access the values passed from an event, use the format {action.KeyName} in the Event Listener.The term KeyName should match the Key added in the Input Parameters of the Flexcard firing the event.

Both the flexcards are now activated and added to the Account Lightning page.

Output:

Now, when we observe the Account record, it displays the contents from both Flexcards, as shown below.

When we select any value from the Select input of the first Flexcard, a pubsub event is fired, which is listened to by the second Flexcard, and it filters and displays only those cases with the selected priority value.