Flexcards have the ability to trigger and listen to two kinds of events: Custom and Pubsub events.
Custom Events serve as a way to exchange information between a child and its parent. This can happen between a child Flexcard and its parent Flexcard, or between an element and the Flexcard it belongs to.
Pubsub Events enable communication between two distinct components. This could be between two different Flexcards located on the same Lightning page, known as sibling Flexcards, or between a Flexcard and an Omniscript.
Here, we’ll explore how to establish communication between two separate FlexCards on the same Lightning page using the Pubsub event.
The process includes the following steps:
- Develop a Flexcard that triggers a Pubsub event.
- Create another Flexcard that is configured to listen for the Pubsub event triggered by the first Flexcard. Once detected, this Flexcard will execute a specified action in response.
To initiate the process, Create a new Flexcard and integrate a Select input element. This Flexcard is designed to trigger a Pubsub event.
Click on the “Add Action” button located within the Properties section to initiate the process. This action will prompt the opening of the Action Properties modal. Enter the required details as outlined below.
Action Type: Event
Event Type: PubSub
Channel Name: DisplayFilteredContact
Event Name: FilterContact
Note: When configuring Pubsub and custom events, it’s essential to avoid using reserved event names and channel names for specific purposes. Please refer to the article “FlexCards Reserved Event and Channel Names” for the list of reserved names.
For Input Parameters, include the data to be transmitted in a key-value format.
For instance:
- Key: SelectedContact
- Value: {element.value}
Here, {element.value} represents the local context variable holding the value selected in the ‘Select‘ input element within the Flexcard.
Next, we proceed to create another Flexcard. This particular Flexcard is configured to listen for the Pubsub event that was triggered by the previously established Flexcard. Upon detection of the event, it executes the necessary action as specified.
Now, We Will Create an Integration Procedure named IP_GetFilteredContact, which is responsible for retrieving a list of Contacts associated with an Account. This Integration Procedure will serve as a data source for the Flexcard.
In this context, DRGetContactsDetails refers to a DataRaptor Extract Action tasked with fetching all Contacts associated with a specific Account. This operation is carried out based on the AccountId filter value passed to the DataRaptor.
Now, add The Set Value Action FilterContact utilizes the outcome of the DataRaptor Extract action.
A new element is introduced in the Element Value Map with the following details:
Element Name: FilteredContact
Value: =IF(%ApplyFilter%, LIST(FILTER(LIST(%GetContactDetails%), ‘Status == “‘ + StatusValue + ‘”‘ )), LIST(%GetContactDetails%))
In the function, %ApplyFilter% serves as the condition.
- If %ApplyFilter% is provided as false, all the cases retrieved from the DataRaptor Extract Action will be assigned to the element.
- However, if %ApplyFilter% is true, only the Contact matching the particular Status (determined by the dynamic input StatusValue) will be assigned to the element.
The Response Action RASendToFC dispatches the output generated by the Set Value action as the response of the Integration Procedure.
Subsequently, within the ‘Setup‘ tab of the Flexcard, the Integration Procedure is included as the designated Data Source.
In the Input Map section, two input variables to be transmitted to the data source are incorporated as key-value pairs.
Input 1:
- Key: AccountId
- Value: {recordId}
Here, {recordId} context variable holding the Record Id value of the record where the Flexcard is situated.
- Key: ApplyFilter
- Value: false
As false is passed, the Integration Procedure will retrieve all Contacts associated with the Account. Subsequently, the ‘Save and Fetch‘ button is clicked.
Add data table element into the Flexcard, which automatically fetches both the columns and data from the designated data source.
From the ‘Setup‘ tab, the Repeat Records checkbox is deselected.
Next, proceed to add a new Event Listener, following the instructions provided below.
This event listener is utilized to monitor the Pubsub event emitted by the previously generated Flexcard.
Note: Ensure that the values entered in the Channel Name and Event Name precisely match those specified in the Flexcard initiating the ‘Pubsub‘ event.
In the Action section, input the following details and then save them.
Action Type: Card
Type: Update DataSource. This action updates the Flexcard Data JSON according to the response sent from the data source.
Data Source Type: Integration Procedures
Name: IP_GetFilteredContact (This is the name of our Integration Procedure)
In the Input Map section, three input variables to be transmitted to the data source are included as key-value pairs.
Input 1:
- Key: AccountId
- Value: {recordId}
Input 2:
- Key: ApplyFilter
- Value: true
Input 3:
- Key: PriorityValue
- Value: {action.SelectedPriority}
Here, {action.SelectedPriority} retains the value forwarded from the Pubsub event triggered by the other Flexcard.
Indeed, the input parameters “ApplyFilter = true” and “StatusValue = {action.SelectedContact}” guarantee that only Contact matching the specified Status value will be retrieved from the Integration Procedure.
Note: To access the values transmitted from an event, employ the format {action.KeyName} within the Event Listener. Ensure that the term “KeyName” corresponds with the Key incorporated in the Input Parameters of the Flexcard initiating the event.
Both Flexcards are now active and integrated into the Account Lightning page.
Output:
Upon examination of the Account record, it showcases the contents sourced from both Flexcards, as illustrated below.
links:
https://help.salesforce.com/s/articleView?id=sf.os_add_an_event_listener_to_a_flexcard.htm&type=5
https://help.salesforce.com/s/articleView?id=sf.os_flexcards_context_variables_42922.htm&type=5
