Overview: This blog outlines the implementation of Vlocity FlexCard to show CX Score.
Target Audience: Business Analysts, CRM Engineering
Problem Statement: Every Customer-Facing Team Member should be able to see a tile/widget that shows the selected account’s CX Score in Salesforce. To meet this requirement directly in Salesforce, as an Engineer, I would have had to write a bit of code to develop the component. The question is how can I deliver this the fastest way to Business? This is a simple example of how Vlocity can simplify the development of this component and deliver value at lightning speed to Business by eliminating the need to write any code and create this component through clicks. In this blog, I will explain how we can calculate CX Score based on customer Assessment points from the Assessment Response without writing any Code and by leveraging Vlocity out-of-the-box features like DataRaptors and Integration Procedures.
If you are not aware already, Vlocity provides industry-specific solutions based on the processes specific to industries. These come pre-built as part of the package, which saves time in the customization.
Vlocity also provides Customer 360 and digital engagement with the help of Omnichannel Customer Interaction.
In this blog, we will focus on Vlocity’ss Digital Experience and Service Management with an Example.
Source : https://trailhead.salesforce.com/en/content/learn/modules/omnistudio-architecture/meet-omnistudio?trail_id=get-to-know-omnistudio
The following are few tools that Vlocity offers to improve business agility.
FlexCards : FlexCards are used to display data from multiple data sources at a glance and it is responsive on any device. They can have multiple states that can be displayed based on conditions.
Omniscript : Omniscript is a declarative scripting tool with gives the users a guided path for completing a business process.
• Omniscript supports modular architecture for building the user experience quickly. It also promotes using data from anywhere, reuse of JSON metadata, and ease in applying branding standards.
IntegrationProcedure: Integration Procedures are used for server-side processes that execute multiple actions in a single service call. They can read data from Salesforce or any external systems using REST API. Integration Procedures are flexible and make implementations easier for FlexCards and Omniscripts.
DataRaptors: DataRaptors are used to extract the data from salesforce, manipulate the data and save data back to salesforce.
DataRaptors are four types
• DataRaptor Turbo Extract: Used to get the data from a single object.
• DataRaptor Extract: Used to get the data from multiple objects.
• DataRaptor Load: Used to update or create records in salesforce.
• DataRaptor Transform: Used to manipulate the data like restructure input data and rename fields.
Sample Use case:
A Customer-Facing Team Member should be able to see the customer experience score displayed on the card on the Account record page. The score is calculated based on the Assessment response from StoryPulse (one of our products).
Below are the high-level steps :
1) Create a FlexCard with data source as an Integration procedure.
2) Create a DataRaptor to extract the assessment points for an Account.
3) Create an Integration Procedure that receives the data from DataRaptor.
4) Create a DataRaptor to perform the calculation of Assessment points.
5) Add the DataRaptor to the Integration Procedure to return the CXScore back to our FlexCard.
Step 1: Create a Flexcard
Open the Vlocity Digital Studio from the dropdown select FlexCard and create a new FlexCard.
For Data source type choose Integration Procedures and name it as GetCxScore.
For input pass key: AccountId and value : {recordId}.
After creating the FlexCard drag the rich text field from build panel into Active state.
From properties, panel create a div and display the CXScore that we will are receiving from the Integration Procedure.
Step 2: Create DataRaptor to Extract Assessment points
From the Vlocity Digital Studio choose Vlocity DataRaptor Design from the dropdown.
Create New DataRaptor give DataRaptor Bundle name as getCxScoreDR.
Interface Type as Extract, give the input and output type as JSON.
In the Extract path choose AssessmentResponse and filter by AccountId.
From the output panel choose the Answer points field and output path as AnswerPoints.
Use the preview panel to check the response of the DataRaptor by passing the AccountId as input.
Step 3: Create an Integration Procedure
From the Vlocity Digital Studio choose Vlocity Integration Procedure.
Create a new Integration Procedure and name it as GetCxScore (give same name that we mentioned in the FlexCard for Step 1).
From the actions panel drag DataRaptor Extract Action into the Structure for DataRaptor Interface choose getCxScoreDR (DataRaptor that we created in step 2).
In the input parameters pass AccountId as filter value to the DataRaptor.
Step 4: Create DataRaptor for Calculation of Assessment points
Create a new DataRaptor with Interface type as Transform.
In the formula, create a new formula for calculating assessment points.
In the Transform panel give the input and output JSON path.
Use the preview panel to check the response of the DataRaptor.
In the input pass the JSON node that we got as the response in getCxScoreDR from step 2.
You will notice that all the Assessment Answer Points are added and gives the result as shown above.
Step 5: Add DataRaptor to the Integration Procedure
Go to the Integration Procedure that we have created in step 3.
Add the DataRaptor Transform Action to the structure below GetCxScore Extraction.
Pass the GetCxScore response as input to the Transform Action.
Next, add the Response Action to the structure in the Send JSON Path give the Transform DataRaptor
Which will return the CXScore to the FlexCard.
Now that we have configured DataRaptors and Integration Procedure to return the CXScore for the given account. Conditionally display the FlexCard state based on the CXScore.
Create a new version of FlexCard and clone the Active State to change the appearance of FlexCard based on the CXScore.
Change the color of text based on the condition using rich text properties panel as shown below.
Vlocity can determine which state to display based on the condition given.
Now activate the FlexCard and add the component to the Account record page.
You will notice the CXScore for the Account in the FlexCard like below.
