How to capture mortgage application responses with FlexCards and LWC

Project Background:

A global financial services provider and bank, with a robust financial presence across multiple industries and regions initially briefed Coforge that, they wanted to build an interactive UI for multiple different sets of users to capture responses from the customers interested in mortgages via the UI.

The Challenge:

In this project Coforge needed build an interactive UI that’ll connect the customer either on the phone or offline and capture their responses as part of their customers; applications. As mortgage applications can contain any number of steps, this solution was designed to help complete a few of them using the UI.

The technical aspect of this challenge was, the need to build a solution that would help the customer transfer its communications from Vlocity FlexCards to Salesforce’s Lightning Web Components (LWC). The communication display needed to be reconfigured to present various LWC tabs after selecting the FlexCard. Both the FlexCard and LWC also needed to be independent components on the layout.

The Coforge Solution:

There is no standard approach to configuring FlexCard to communicate with independent LWCs. This meant that the solution would have to be custom-built, which is what it was through the process below.

01. Developing a custom LWC to be embedded in and capture responses from the FlexCard

This LWC has properties and is decorated with ‘@api’. These properties store the response from the FlexCard and use them in the Pub-Sub model to establish communication with the LWC component in the tabs.

02. Embedding the custom LWC in the FlexCard using the ‘Custom LWC’ control on the Build panel.

03. Making use of merge fields in the FlexCard data, as well as the Attribute and Value sections in the properties panel of the custom LWC control to send data to the LWC.

NOTE: It‘s important to keep in mind that the Attribute should be exactly the same as the properties created in the LWC. The Value will be the merge field from the FlexCard.

04. Sending the data from the flex card to the embedded LWC.

We have the data embedded in the LWC and it is easy to send it to the LWC tabs using the Pub-Sub Channel. Any action can now be performed using this data.

Customer Benefits:

By implementing this solution, Coforge established the building blocks of the applications we could use to address other challenges and continue to expand the banks Salesforce capabilities. Other requirements and features that have used this solution as a foundation were things like:

• Appealing for rejected applications features.
• Proceeding with the approved applications process.
• Integrating with a third party system for improved data exchange.

Technologies Involved:

Salesforce Lightning Web Components:

Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Vlocity:

Vlocity is a salesforce tool which can build a guided interactive screen for users. It has 4 major components:

1. FlexCards
2. Omni Script
3. Data Raptors
4. Integration Procedures

FlexCards:

FlexCards are basically UI components used to build customer-centric, industry-specific UI and applications on the Salesforce platform.

References:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc

https://www.apexhours.com/omnistudio-flexcards/

https://help.salesforce.com/s/articleView?id=sf.os_omnistudio_flexcards_24388.htm&type=5

https://help.salesforce.com/s/articleView?id=sf.os_vlocity_user_interaction_tools.htm&type=5