Introduction:
"Empowering Data Interaction: Creating a Dynamic and Generic Salesforce Lightning Web Component with Clickable Record Links in a Scrollable Data Table.
Are you on a quest to enhance data accessibility within your Salesforce application? Your journey starts here. In this blog post, we'll guide you through the creation of a powerful Lightning Web Component (LWC) designed for clickable record links within a dynamic and generic data table. Initially, we'll showcase a compact table displaying a limited set of records, but with a click of a button, you'll unlock the full dataset, presented within a fixed-size, scrollable data table. Join us as we explore the future of data interaction!"
The Need for Flexible Data Table Configuration:
"Lightning Web Components (LWC) are widely used in Salesforce applications for presenting data through Data Tables. Conventionally, achieving this involves the creation of an APEX class and the provision of essential inputs to render the Data Table component. While this approach is effective, it presents a challenge when it comes to managing the columns, fields, and the underlying SOQL queries that populate the Data Table.
Imagine a scenario where you've configured a Data Table with five columns displaying data from the Account object. As your application evolves and transitions to production, the need to add or remove columns from the Data Table often arises. This typically entails revisiting the codebase, making necessary modifications, and then executing redeployments. However, this process may not always feel agile or adaptable.
But what if there was a more streamlined approach to achieving a high degree of control and flexibility, all without the constant need for code changes and deployments? The answer lies in harnessing Salesforce's Custom Settings or Custom Metadata Types.
In this blog post, we'll delve into the art of utilizing Custom Metadata to efficiently manage the configuration of SOQL queries, fields, and columns for your Data Table. We'll guide you through the process of creating Custom Metadata records, serving as dynamic configurations that empower you with unparalleled control over the presentation and content of your Data Tables."
Custom Metadata Types:
Fields:
Field Description as Follows:
Custom Metadata Field Name | Field Explanation | Example |
Label | Object API name for which we are creating data-table. | Contact, Task, ContentDocumentLink |
Fields Name(Fields_Name__c) | Mention all fields that needs to be in query | For Contact Object: Id,Name, Title, Email,AccountId,Account.Name |
URL Fields | Mention field name that we need to show as url (please mention ID fields only) | For Contact Object: Id,AccountId |
Filter Condition | Mention Initial Condition when user open LWC in App page this will include the where clause of SOQL | For Contact Object: AccountID IN: accountIds and CreatedDate >= TODAY ORDER BY CreatedDate DESC LIMIT 10 |
Field_Property__c | This field contains data of column type of each field respective to field name | For Contact object: Id:url,AccountId:url, Title:text, Email:email |
Header Value | Heading of data-table columns(number of values(comma seprated field name ) is must be equal to Number of field mentioned in Field Name (Field_Property__c) | For Contact Object: Name,Account,Title,Email As we can see number of columns name mentioned here is 4 and in Field_Property__c It is also 4. |
New URL Label | This field will contain the label of url field. | For Contact Object: As URL fields mentioned above are Id,AccountId So in this we have to mention label to show as url Name,Account.Name Id will be replace by Name and AccountId will be replace by Account.Name. |
Filter Condition 7 Days | This field will contain filter (WHERE clause of SOQL) for 7days | For Contact object: AccountID IN: accountIds and CreatedDate=LAST_N_DAYS:7 ORDER BY CreatedDate DESC LIMIT 10 |
Filter Condition 30 Days | This field will contain filter (WHERE clause of SOQL) for 30 days | For Contact object: AccountID IN: accountIds and CreatedDate=LAST_N_DAYS:30 ORDER BY CreatedDate DESC LIMIT 10 |
Table Heading | This field contains Heading of Table that user want to show in UI | For Contact object: Contacts |
View All Current Day | This field will contain filter (WHERE clause of SOQL) for Current Day but without LIMIT in SOQL | For Contact Object: AccountID IN: accountIds and CreatedDate >= TODAY ORDER BY CreatedDate DESC |
View All 7 Days | This field will contain filter (WHERE clause of SOQL) for 7 Days but without LIMIT in SOQL | For Contact object: AccountID IN: accountIds and CreatedDate=LAST_N_DAYS:7 ORDER BY CreatedDate DESC |
View All 30 Days | This field will contain filter (WHERE clause of SOQL) for 30 Days but without LIMIT in SOQL | For Contact object: AccountID IN: accountIds and CreatedDate=LAST_N_DAYS:30 ORDER BY CreatedDate DESC |
Example for Contact Object:
After configuring the metadata, the next step involves developing both the LWC and APEX code. Within the APEX class, I've utilized a Wrapper class to dynamically generate DataTable columns and field values. The LWC component serves as the user interface, supplying inputs to the APEX method. This method retrieves the relevant metadata, as well as handles the combobox functionality.
The combobox within the parent LWC allows users to filter records based on specific date ranges—ranging from the current day to up to 7 or 30 days. This selection dynamically influences the data displayed in all child LWC DataTables, enabling precise record filtering.
Additionally, the LWC DataTable initially presents a concise set of ten records. However, upon clicking 'View All,' it seamlessly transitions to display the entire dataset. Remarkably, this implementation maintains a fixed DataTable size that remains scrollable, ensuring an optimal user experience.
Creating Record URLs in Lightning Datatable:
In this section, we'll explore how to enhance the functionality of your Salesforce Lightning Web Component (LWC) by adding clickable record URLs within a Lightning Datatable. We'll dive into the details of creating these clickable links, enabling users to easily access related records with a single click. This functionality not only improves user experience but also streamlines data navigation within your Salesforce application. We'll walk you through the steps to implement this feature effectively, making your LWC more dynamic and user-friendly.
LWC Child js File:
.png)
Apex code:
.png)
Handling Filter Combobox for Date Fields:
Parent Component Role:
· The parent component hosts the combobox, allowing users to select date filter options.
· When a user selects a filter option, the parent component asynchronously communicates with child components to update their data.
Child Component Role:
· Each child component represents a data table displaying different sets of records.
· These child components are designed to handle data updates triggered by the parent component.
· They expose an @api function that the parent component can call to provide updated filter criteria.
Workflow:
· When a user selects a date filter option in the combobox of the parent component, it triggers the handleChange function.
· The handleChange function captures the selected value and iterates through child components, calling their respective childFunction using the selected filter value.
· The childFunction in each child component handles the filter criteria and initiates an imperative Apex call to fetch updated data.
· The fetched data is then processed and displayed in the child component's data table.
This parent-child communication strategy allows you to create a dynamic and responsive user interface, ensuring that the displayed data is always up-to-date based on the user's selected date filter. It enhances the user experience and makes your LWC more interactive and user-friendly.
Parent LWC HTML:
.png)
Parent LWC js File:
.png)
Child LWC js file:
.png)
Implementing 'View All' Functionality:
In this section, we'll explore the implementation of a powerful "View All" button feature within your Salesforce Lightning Web Component (LWC). This feature enhances user experience by providing an option to view all data for a particular object in a fixed-size DataTable, complete with a scroll bar.
How it Works:
1. 'View All' Button in Child Component:
· The "View All" button is present alongside each DataTable in the child components. Users can click this button to access all data for a specific object.
2. Handling the Button Click:
· When a user clicks the "View All" button, it triggers the handleClick function in the child component.
3. Button Behavior:
· After the button is clicked, it is automatically disabled to prevent multiple simultaneous requests.
4. Fetching All Data:
· The child component makes an imperative Apex call (getAllTaskList) to retrieve all records for the specified object, taking into account the selected filter criteria (in this case, this.filterDays).
5. Handling Result Data:
· The fetched data is processed in the then block of the promise, typically by updating the child component's properties to display the complete dataset.
6. Fixed-Size DataTable with Scroll Bar:
· The DataTable in the child component is configured to have a fixed size. When all data exceeds this size, a scroll bar appears, allowing users to navigate through the extensive dataset while maintaining a consistent user interface layout.
By implementing the "View All" functionality, you provide users with the flexibility to access and explore all data for a specific object while ensuring an organized and user-friendly display within a fixed-sized DataTable. This feature greatly enhances data accessibility and usability within your Lightning Web Component.
Child LWC HTML:
.png)
Child LWC js File:
.png)
Before we conclude our journey into building a dynamic Salesforce Lightning Web Component (LWC), let's take a moment to visualize the remarkable results of our efforts. The screenshots below provide a glimpse into the user interface experience we've crafted, demonstrating the power and versatility of our LWC:
Clickable Record Links: See how users can effortlessly navigate to related records by clicking on record links within our Lightning Datatable.
In this Contact Name and Account Name are clickable records links
Users can simply click on the Contact Name or Account Name in the Datatable, and they will be directed to the respective record.
Filter Combobox: Explore the intuitive filter combobox, allowing users to refine data based on date criteria, including options for the current day, up to 7 days, and up to 30 days.
'View All' Functionality: Witness the seamless 'View All' feature that expands the DataTable to display the complete dataset with a scrollable interface.
As we can see once user clicked on “View All” button all 15 records are visible with scroll bar on right side of data table.
These screenshots illustrate the user-centric design and dynamic functionality we've incorporated into our LWC, revolutionizing data navigation and accessibility within Salesforce. Let's continue our journey to empower users with a more dynamic and efficient experience.
Dynamic Data Presentation Across Multiple Objects:
Our dynamic Salesforce Lightning Web Component (LWC) goes beyond just enhancing the user experience for a single object. It offers remarkable versatility by allowing you to display data from multiple objects seamlessly. In the screenshot below, we've exemplified this capability by showcasing not one but two different objects side by side within the same interface.
Example:
In this example user can see multiple datatable
Task Table:
Subject: Clickable (Redirects to respective task record)
Name: Clickable (Redirects to respective contact record)
Related to: Clickable (Redirects to respective account record)
Parent LWC HTML:
.png)
By enhancing user navigation and data accessibility, we've taken a step closer to delivering an exceptional user experience. Explore these features in your own Salesforce projects and discover the endless possibilities of Lightning Web Components. That's all for this blog. Hope this will be helpful to you.
