Dynamic Data Table Using Vlocity Components in Salesforce

This Article helps you to explore the creation of a dynamic data table using Vlocity Components within the Salesforce platform. It is essential for displaying and managing complex data structures and records. The below discussion gives you a better understanding of implementing dynamic data tables in Salesforce with Vlocity components.

Prerequisites:

For this logic, you must have a Velocity developer org. By using the below link you can create your new Vlocity Developer Trail Org

Example: I’m going to construct the Data Table with 3 columns showing data from the Contact Point Object using Vlocity components and invoked in the Lightning Web Component. By using Vlocity Components we can control the fields, records, and columns for the data table.

For this logic, you will utilize two distinct Data Raptors. One is for retrieving sObject records through the Data Raptor Extract, while the other is for constructing a table header.

Creating a Data Raptor for Record Extraction using Data Raptor Extract:

• Navigate to the Data Raptor Extract module and create a new one as mentioned in the below screenshot.

• Configure the Data Raptor settings for extracting records.

• Specify the relevant parameters and filters to your custom list using the options available in the “Output” tab.

• Save the Data Raptor configuration.

Creating Columns using Data Raptor Transforms:

The process of creating columns using Data Raptor Transforms. Begin by accessing the Data Raptor Transforms interface, where you can define the parameters and specifications for column creation. It Utilizes the available transformation tools to generate the desired columns, ensuring you configure attributes, data types, and any necessary transformations. Finally, save the Data Raptor with the newly created columns, providing a tailored and structured dataset for your specific needs.

The following screenshots help you to create dynamic columns using Data Raptor Transforms.

• Create the new transform data Raptor follow with a screenshot,

• You can do extracted data output in the form of a List map in Data Raptor Transform by using the options tab “Transforms” as mentioned below screenshot.

• Create the Column as List<Map>.

• Now, create other attributes to the column as mentioned in the screenshot.

• Ensure that the values of the column attribute "fieldName" match those in the list of records obtained from the Data Extract list attributes.

After creating the required data raptors, proceed to establish a new integration procedure. Within this integration procedure, invoke the respective data raptors. Subsequently, configure the response action as indicated in the screenshot provided.

Note: I provided screenshots for only the contact point Email Object. Similarly, you can create other Contact Point Objects.

Invoking Integration Procedure in LWC

Here, we can see the screenshot of LWC components.

demoDynamicDataTable.html

The “tableData” provides the sObject records.

demoDynamicDataTable.js

The attribute "contactPointType" serves the purpose of facilitating the reuse of this component for displaying dynamic sObject records. Lines 33 to 51 demonstrate the connection to the integration procedure and subsequent execution of actions to generate the response.

Upon receiving the response, you can apply it to the necessary variable and display it in the user interface (UI).

demoDynamicDataTable.js-meta.xml

The XML code is setting up a configuration for a Lightning web component to be used on record pages, providing a property called “contactPointType” that can be used and manipulated within the component. The specific use and functionality tied to this property would depend on the implementation details within the Lightning web component.

Place your component on the lightning record page and apply with the property “contactPointType”. Finally, this is how it looks on the record page edit page.

Output