SObject Selection and Record page with Lazy Loading in Salesforce LWC

See how FieldAx can transform your Field Operations. Try it today! Book Demo Implement SObject selection and lazy loading in LWC to enhance record page performance by fetching data only when needed.

December 26, 2024
Tech Blogger
Salesforce Lightning
0

Lazy loading is an optimization technique to load the content on-demand. Instead of loading the entire data and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.

Managing and visualizing large datasets is a critical requirement in modern applications, especially in Salesforce. Lightning Web Components (LWC empower developers to create dynamic, scalable user interfaces with minimal latency. This article delves into building a robust LWC for dynamic list views and implementing lazy loading for seamless record navigation.

Efficiently managing data in Salesforce is crucial for delivering a seamless user experience, especially when dealing with large datasets. This blog dives into an innovative solution combining SObject selection and lazy loading in Salesforce Lightning Web Components (LWC). The approach empowers users to dynamically choose objects, view relevant records, and optimize page performance—all without compromising on speed or functionality.

What is Lazy Loading in Salesforce?

Lazy loading is a performance-enhancing technique where data is fetched incrementally, as needed, rather than loading everything upfront. In Salesforce, this is especially valuable when working with large datasets, as it:

Speeds up page load times by fetching only what’s immediately required.
Reduces system resource usage, ensuring smoother performance.
Enhances user experience, particularly for users navigating through extensive record lists.

Why Combine SObject Selection with Lazy Loading?
Salesforce users often work with multiple types of objects (SObjects), such as Accounts, Contacts, or custom objects. By integrating SObject selection with lazy loading, you achieve:

Dynamic Flexibility: Users can switch between objects seamlessly without needing separate components for each object type.
Improved Performance: Only relevant data is loaded for the selected object, keeping the interface responsive.
Enhanced Productivity: A unified, efficient interface reduces navigation time and effort for end-users.

Lazy loading in Lightning Web Component

In this article, we’ll explore how to implement lazy loading in Salesforce Lightning Web Components (LWC), specifically using a lightning-datatable with infinite scrolling.

Key Attributes for Lazy Loading in lightning-datatable:

enable-infinite-loading: Enables partial data loading and triggers more data retrieval when users scroll to the end of the table.
load-more-offset: Determines when to trigger infinite loading, based on how close the scroll position is to the table’s bottom. The default is 20 pixels.
onloadmore: The event handler that triggers when more data is required for infinite scrolling.

SObject Selection:

Purpose: Enables the user to select a Salesforce object, such as Account, Opportunity, or Contact.
UI Element: A lightning-combobox serves as a dropdown menu for selecting the desired SObject.
Condition: The dropdown is shown only when an SObject has not been selected (if:false={sobject}).

SObject Selected View:

After the user selects an SObject, the UI changes dynamically to show additional options and data.
Back Button: A lightning-button allows users to go back and deselect the SObject, resetting the view.
Add Column Button: Provides a way to open a modal window where users can choose which fields to display in the datatable.

Column Picker Modal:

Purpose: Offers a user-friendly interface for selecting fields to display as columns in the datatable.
Behavior: The modal appears only when the “Add Column” button is clicked (if:true={showColumnPicker}).
Behavior: The modal appears only when the “Add Column” button is clicked (if:true={showColumnPicker}).
Header: Displays the title “Select Fields for Columns.”
Dual Listbox: A lightning-dual-listbox shows available fields on the left and selected fields on the right. Users can move fields between the two lists.
Footer: Contains “Save” and “Cancel” buttons to confirm or dismiss the selection_.

List View Selection:

Purpose: Allows users to choose a predefined list view for the selected SObject (e.g., “Recently Viewed”).
UI Element: Another lightning-combobox is used to display list view options.

Datatable for Records:

Purpose: Displays records for the selected SObject and list view in a tabular format.
Displays dynamic columns based on the fields selected in the column picker.
Includes action buttons (like edit, delete, or view) for each record.
Supports lazy loading, which loads additional records as the user scrolls.
Condition: The datatable is shown only when records are available (if:true={records}).

_{html Code:}

_<template>

_{<!– SObject Selection –>}

_{<template if:false={sobject}>}

_{<lightning-combobox}

_{class=”sObjctdropdown”}

_{label=”Select SObject”}

_{value={value}}

_{placeholder=”Select an Object”}

_{options={options}}

_{onchange={handleChange}>}

_{</lightning-combobox>}

_</template>

_{<!– SObject is selected –>}

_{<template if:true={sobject}>}

_{<!– Back button to deselect SObject –>}

_{<lightning-button}

_{label=”Back”}

_{variant=”neutral”}

_{class=”slds-m-bottom_medium”}

_{title=”Close”}

_{onclick={BackClick}>}

_{</lightning-button>}

_{<!– Add Column Button –>}

_{<div class=”selectButtons”>}

_{<lightning-button}

_{label=”Add Column”}

_{class=”slds-m-top_medium”}

_{onclick={openColumnPicker}>}

_{</lightning-button>}

_</div>

_{<!– Column Picker Modal –>}

_{<template if:true={showColumnPicker}>}

_{<section role=”dialog” tabindex=”-1″ class=”slds-modal slds-fade-in-open”>}

_{<div class=”slds-modal__container”>}

_{<header class=”slds-modal__header”>}

_{<button class=”slds-button slds-button_icon slds-modal__close slds-button_icon-inverse” title=”Close” onclick={closeColumnPicker}>}

_{<lightning-icon icon-name=”utility:close” alternative-text=”close” size=”small”></lightning-icon>}

_{<span class=”slds-assistive-text”>Close</span>}

_</button>

_{<h2 class=”slds-text-heading_medium”>Select Fields for Columns</h2>}

_</header>

_{<div class=”slds-modal__content slds-p-around_medium”>}

_{<lightning-dual-listbox}

_{name=”fieldSelector”}

_{label=”Select Fields”}

_{source-label=”Available Fields”}

_{selected-label=”Selected Fields”}

_{options={fieldOptions}}

_{value={selectedFields}}

_{onchange={handleSelectedFields}>}

_{</lightning-dual-listbox>}

_</div>

_{<footer class=”slds-modal__footer”>}

_{<lightning-button variant=”neutral” label=”Cancel” onclick={closeColumnPicker}></lightning-button>}

_{<lightning-button variant=”brand” label=”Save” onclick={saveSelectedFields}></lightning-button>}

_</footer>

_</div>

_</section>

_{<div class=”slds-backdrop slds-backdrop_open”></div>}

_</template>

_{<lightning-combobox}

_{class=”slds-combobox-width”}

_{label=”Available List Views”}

_{value={selectedListView}}

_{placeholder=”Select a List View”}

_{options={listViewOptions}}

_{onchange={handleListViewChange}>}

_{</lightning-combobox>}

_{<!– Records Datatable –>}

_{<template if:true={records}>}

_{<lightning-card title=”Records” icon-name=”custom:custom14″>}

_{<lightning-datatable}

_{key-field=”Id”}

_{data={records}}

_{columns={columns}}

_{onrowaction={handleRowAction}}

_{selected-rows={selectedRows}}

_{onloadmore={handleLoadMore}}

_{is-loading={isLoading}>}

_{<template if:true={isLoading}>}

_{<div class=”spinner-container”>}

_{<lightning-spinner alternative-text=”Loading” size=”small”></lightning-spinner>}

_</div>

_</template>

_{</lightning-datatable>}

_{</lightning-card>}

_</template>

_</template>

_</template>

_{Js code:}

_{import { LightningElement, track, wire } from ‘lwc’;}

_{import getAllSObjects from ‘@salesforce/apex/SObjectDropdownController.getAllSObjects’;}

_{import getListViewRecords from ‘@salesforce/apex/SObjectDropdownController.getTaskListviewRecord’;}

_{import getListViews from ‘@salesforce/apex/SObjectDropdownController.getListViews’;}

_{import deleteRecord from ‘@salesforce/apex/SObjectDropdownController.DeleteRecord’;}

_{import getFields from ‘@salesforce/apex/SObjectDropdownController.getFields’;}

_{import getTotalRecordCount from ‘@salesforce/apex/SObjectDropdownController.getTotalRecordCount’;}

_{import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;}

_{import { getListUi } from ‘lightning/uiListApi’;}

_{import { refreshApex } from ‘@salesforce/apex’;}

_{export default class SObjectTab extends LightningElement {}

_{@track options = [];}

_{@track value = ”;}

_{@track selectedObjectLabel = ”;}

_{@track listViewOptions = [];}

_{@track selectedListView = ”;}

_{@track records = [];}

_{@track columns = [];}

_{@track sobject = false;}

_{@track error;}

_{@track fields = false;}

_{@track fieldOptions = [];}

_{@track selectedFields = [];}

_{@track showColumnPicker = false;}

_{@track storedMultiPicklistValues = [];}

_{// Lazy loading variables}

_{@track isLoading = false;}

_{@track totalRecords = 0;}

_{@track offset = 0;}

_{@track limit = 25;}

_{@track wiredRecordsResult;}

_{connectedCallback() {}

_{this.fetchSObjects();}

_}

_{// Fetch all available SObjects from Apex}

_{fetchSObjects() {}

_{getAllSObjects()}

_{.then(data => {}

_{if (data) {}

_{this.options = Object.keys(data).map(key => ({}

_{label: data[key],}

_{value: key}

_}));

_}

_})

_{.catch(error => {}

_{console.error(‘Error fetching objects:’, error);}

_});

_}

_{resetLazyLoading(){}

_{this.records = [];}

_{this.offset = 0;}

_{this.totalRecords = 0;}

_{this.isLoading = false;}

_}

_{// Handle SObject dropdown change}

_{handleChange(event) {}

_{this.value = event.detail.value;}

_{this.selectedObjectLabel = this.options.find(opt => opt.value === this.value).label;}

_{this.fetchListViewRecords(this.value);}

_{this.resetLazyLoading();}

_{this.fetchgetTotalRecordCount();}

_}

_{// Fetch list views for the selected SObject}

_{fetchListViewRecords(sObjectName) {}

_{getListViews({ sObjectApiName: sObjectName })}

_{.then(data => {}

_{if (data) {}

_{this.listViewOptions = data.map(view => ({}

_{label: view.Name,}

_{value: view.Id}

_}));

_{this.sobject = true;}

_{} else {}

_{this.listViewOptions = [];}

_}

_})

_{.catch(error => {}

_{console.error(‘Error fetching list views:’, error);}

_});

_}

_{// Fetch records for the selected list view}

_{fetchRecords() {}

_{this.isLoading = true;}

_{getListViewRecords({}

_{objectName: this.value,}

_{listViewId: this.selectedListView,}

_{limitSize: this.limit,}

_{pageToken: this.offset}

_})

_{.then(result => {}

_{this.records = […this.records, …result];}

_{this.generateColumns();}

_{this.isLoading = false;}

_})

_{.catch(error => {}

_{console.error(‘Error fetching records:’, error);}

_{this.isLoading = false;}

_});

_}

_{async handleLoadMore(event) {}

_{if (!this.wiredRecordsResult.data || this.records.length >= this.wiredRecordsResult.data.records.totalSize) {}

_{return; // No more records to load}

_}

_{const { target } = event;}

_{target.isLoading = true;}

_{this.offset += this.limit;}

_{this.fetchMoreRecords(this.selectedListView);}

_{target.isLoading = false;}

_}

_{fetchMoreRecords(listViewId) {}

_{this.isLoading = true;}

_{// Fetch records via the wire service (using pagination)}

_{this.wiredListView({ pageSize: this.limit, pageNumber: this.offset / this.limit + 1 });}

_}

_{fetchgetTotalRecordCount(objectName) {}

_{getTotalRecordCount({ objectName: objectName })}

_{.then(total => {}

_{this.totalRecords = total;}

_})

_{.catch(error => {}

_{console.error(‘Error fetching total record count:’, error);}

_});

_}

_{// Dynamically generate columns based on selected fields and record keys}

_{generateColumns() {}

_{if (this.records.length > 0) {}

_{this.columns = Object.keys(this.records[0]).map(key => {}

_{let type = ‘text’;}

_{if (key === ‘CloseDate’) {}

_{type = ‘date’;}

_{} else if (key === ‘Amount’) {}

_{type = ‘currency’;}

_}

_{return {}

_{label: key.charAt(0).toUpperCase() + key.slice(1),}

_{fieldName: key,}

_{type: type}

_};

_});

_{this.columns.push({}

_{type: ‘action’,}

_{typeAttributes: { rowActions: this.getRowActions() }}

_});

_{} else {}

_{this.columns = [];}

_}

_}

_{// Define row actions (edit, delete, view)}

_{getRowActions() {}

_{return [}

_{{ label: ‘Edit’, name: ‘edit’ },}

_{{ label: ‘Delete’, name: ‘delete’ },}

_{{ label: ‘View’, name: ‘view’ }}

_];

_}

_{// Handle row action (Edit, Delete, View)}

_{handleRowAction(event) {}

_{const actionName = event.detail.action.name;}

_{const row = event.detail.row;}

_{switch (actionName) {}

_{case ‘edit’:}

_{window.open(`/lightning/r/${this.value}/${row.Id}/edit`, “_blank”);}

_break;

_{case ‘delete’:}

_{this.deleteRecords(row.Id);}

_break;

_{case ‘view’:}

_{window.open(`/lightning/r/${this.value}/${row.Id}/view`, “_blank”);}

_break;

_default:

_}

_}

_{// Delete a record}

_{deleteRecords(recordId) {}

_{const SObjectName = this.value;}

_{deleteRecord({ RecordId: recordId, SobjectApiName: SObjectName })}

_{.then(() => {}

_{this.records = this.records.filter(record => record.Id !== recordId);}

_{this.showNotification(‘Success’, ‘Record deleted successfully’, ‘success’);}

_})

_{.catch(error => {}

_{console.error(‘Error deleting record:’, error);}

_{this.error = error;}

_});

_}

_{// Open the column picker modal}

_{openColumnPicker() {}

_{this.showColumnPicker = true; // Show the modal}

_{this.fetchFields(); // Fetch fields for the selected SObject}

_}

_{closeColumnPicker() {}

_{this.showColumnPicker = false;}

_}

_{fetchFields() {}

_{getFields({ sObjectApiName: this.value })}

_{.then(data => {}

_{if (data) {}

_{this.fieldOptions = data.map(field => ({}

_{label: field.Label,}

_{value: field.FieldName}

_}));

_}

_})

_{.catch(error => {}

_{console.error(‘Error fetching fields:’, error);}

_});

_}

_{// Handle the selection of fields for the column picker}

_{handleSelectedFields(event) {}

_{this.selectedFields = event.detail.value; // Store selected fields}

_}

_{// Save the selected fields and generate the table columns}

_{saveSelectedFields() {}

_{this.selectedFields = […this.selectedFields];}

_{this.generateColumns();}

_{this.closeColumnPicker();}

_{if(this.records.length >0 && this.selectedFields.length > 0){}

_{this.columns = this.selectedFields.map(field => {}

_{let type= ‘text’;}

_{if (field === ‘CloseDate’) {}

_{type = ‘date’;}

_{} else if (field === ‘Amount’) {}

_{type = ‘currency’;}

_}

_{return {}

_{label: field.charAt(0).toUpperCase() + field.slice(1).replace(/([A-Z])/g, ‘ $1’), // Formatting label}

_{fieldName: field,}

_{type: type}

_};

_});

_{this.columns.push({}

_{type: ‘action’,}

_{typeAttributes: { rowActions: this.getRowActions() }}

_});

_}else{

_{this.columns = [];}

_}

_}

_{// Refresh records based on selected list view}

_{handleListViewChange(event) {}

_{this.selectedListView = event.detail.value;}

_{this.resetLazyLoading();}

_{this.fetchRecords();}

_}

_{// Show toast notification}

_{showNotification(title, message, variant) {}

_{const evt = new ShowToastEvent({}

_{title: title,}

_{message: message,}

_{variant: variant,}

_});

_{this.dispatchEvent(evt);}

_}

_{// Handle record selection (if needed for future logic)}

_{handleRowSelection(event) {}

_{this.selectedRows = event.detail.selectedRows;}

_}

_{@wire(getListUi, { listViewId: ‘$selectedListView’, objectApiName: ‘$value’})}

_{wiredListView(result) {}

_{this.wiredRecordsResult = result;}

_{const { data, error } = result;}

_{if (data && data.records && data.records.records) {}

_{const records = data.records.records.map(record => {}

_{let recordData = { Id: record.id };}

_{for (const field in record.fields) {}

_{recordData[field] = record.fields[field] ? record.fields[field].value : ”;}

_}

_{return recordData;}

_});

_{this.records = […this.records, …records,this.isLoading = true];}

_{alert(`this total records is ${this.records.length}`);}

_{this.generateColumns();}

_{this.error = undefined;}

_{} else if (error) {}

_{console.error(‘Error fetching records:’, error);}

_{this.error = error;}

_{this.records = [];}

_}

_}

_{// Refresh the entire component}

_{BackClick() {}

_{window.location.reload();}

_{this.sobject = false;}

_}

_}

_{Apex code:}

_{public with sharing class SObjectDropdownController {}

_{@AuraEnabled(cacheable=true)}

_{public static Map<String, String> getAllSObjects() {}

_{Map<String, String> objectMap = new Map<String, String>();}

_{Map<String, Schema.SObjectType> globalDescribe = Schema.getGlobalDescribe();}

_{for (Schema.SObjectType objTyp : globalDescribe.values()) {}

_{Schema.DescribeSObjectResult describeResult = objTyp.getDescribe();}

_{String name = describeResult.getName();}

_{String label = describeResult.getLabel();}

_{if (describeResult.isQueryable() &&}

_{describeResult.isAccessible() &&}

_{!describeResult.isCustomSetting() &&}

_{describeResult.isCreateable() &&}

_{describeResult.isSearchable() &&}

_{describeResult.getRecordTypeInfos().size() > 0)}

_{objectMap.put(name, label);}

_}

_}

_{return objectMap.isEmpty() ? null : objectMap;}

_}

_{@AuraEnabled(cacheable=true)}

_{public static List<Map<String, String>> getListViews(String sObjectApiName) {}

_{List<Map<String, String>> listViewList = new List<Map<String, String>>();}

_{try {}

_{List<ListView> listViews = [SELECT Id, Name FROM ListView WHERE SObjectType = :sObjectApiName];}

_{for (ListView lv : listViews) {}

_{Map<String, String> listViewInfo = new Map<String, String>();}

_{listViewInfo.put(‘Id’, lv.Id);}

_{listViewInfo.put(‘Name’, lv.Name);}

_{listViewList.add(listViewInfo);}

_}

_{} catch (Exception e) {}

_{System.debug(‘Error fetching list views: ‘ + e.getMessage());}

_}

_{return listViewList;}

_}

_{@AuraEnabled(cacheable=true)}

_{public static List<SObject> getRecordsByObjectName(String objectName, List<String> fields, Integer limitSize, Integer offsetValue) {}

_{String fieldList = String.join(fields, ‘,’);}

_{String query = ‘SELECT ‘ + fieldList + ‘ FROM ‘ + objectName + ‘ LIMIT ‘+ limitSize +’ OFFSET ‘ + offsetValue;}

_{return Database.query(query);}

_}

_{@AuraEnabled(cacheable=true)}

_{public static List<sObject> getTaskListviewRecord(String objectName, String listViewId, Integer limitSize, String pageToken) {}

_{List<sObject> result = new List<sObject>();}

_{try {}

_{// Construct endpoint URL}

_{String baseUrl = URL.getOrgDomainUrl().toExternalForm();}

_{String endPointURL = baseUrl + ‘/services/data/v60.0/sobjects/’ + objectName + ‘/listviews/’ + listViewId + ‘/results’;}

_{// Create HTTP request}

_{HttpRequest req = new HttpRequest();}

_{req.setEndpoint(endPointURL);}

_{req.setMethod(‘GET’);}

_{// Add session ID to the request header for authentication}

_{String sessionId = UserInfo.getSessionId();}

_{if (String.isEmpty(sessionId)) {}

_{System.debug(‘Invalid session ID’);}

_{return result;}

_}

_{req.setHeader(‘Authorization’, ‘Bearer ‘ + sessionId);}

_{req.setHeader(‘Content-Type’, ‘application/json’);}

_{// Set query parameters for lazy loading (limit and offset)}

_{if (limitSize != null) {}

_{endPointURL += ‘?pageSize=’ + limitSize;}

_{if (pageToken != null) {}

_{endPointURL += ‘&pageToken=’ + pageToken;}

_}

_}

_{req.setEndpoint(endPointURL);}

_{// Send the HTTP request}

_{Http http = new Http();}

_{HttpResponse res = http.send(req);}

_{// Parse the response and return the records}

_{if (res.getStatusCode() == 200) {}

_{Map<String, Object> responseBody = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());}

_{if (responseBody.containsKey(‘records’)) {}

_{List<Object> records = (List<Object>) responseBody.get(‘records’);}

_{Schema.SObjectType sObjectType = Schema.getGlobalDescribe().get(objectName);}

_{for (Object record : records) {}

_{Map<String, Object> recordMap = (Map<String, Object>) record;}

_{sObject sObj = sObjectType.newSObject(); // Create a new instance of the sObject type}

_{for (String fieldName : recordMap.keySet()) {}

_{if (sObjectType.getDescribe().fields.getMap().containsKey(fieldName)) {}

_{sObj.put(fieldName, recordMap.get(fieldName)); // Populate the fields}

_}

_}

_{result.add(sObj);}

_}

_}

_{} else {}

_{System.debug(‘Failed to fetch records. Status: ‘ + res.getStatusCode());}

_{System.debug(‘Response Body: ‘ + res.getBody());}

_}

_{} catch (Exception ex) {}

_{System.debug(‘Error fetching list view records: ‘ + ex.getMessage());}

_}

_{return result;}

_}

_{@AuraEnabled(cacheable=true)}

_{public static Integer getTotalRecordCount(String objectName) {}

_{String query = ‘SELECT COUNT(Id) TotalRecords FROM ‘ + objectName;}

_{AggregateResult result = Database.query(query);}

_{Integer totalRecords = (Integer) result.get(‘TotalRecords’);}

_{return totalRecords;}

_}

_@AuraEnabled

_{public static String DeleteRecord(Id RecordId, String SobjectApiName) {}

_{try {}

_{// Query the record to delete}

_{sObject recordToDelete = Database.query(‘SELECT Id FROM ‘ + SobjectApiName + ‘ WHERE Id = :RecordId LIMIT 1’);}

_{// Delete the record}

_{delete recordToDelete;}

_{// Return success message}

_{return ‘Record deleted successfully’;}

_{} catch (QueryException qe) {}

_{// Handle case where the query fails (e.g., record not found)}

_{return ‘Error: Record not found for deletion’;}

_{} catch (DmlException dmle) {}

_{// Handle any DML exceptions during the delete process}

_{return ‘Error: Unable to delete the record. ‘ + dmle.getMessage();}

_{} catch (Exception e) {}

_{// Handle any other general exceptions}

_{return ‘Error: ‘ + e.getMessage();}

_}

_}

_{@AuraEnabled(cacheable=true)}

_{public static List<Map<String, String>> getFields(String sObjectApiName) {}

_{List<Map<String, String>> fieldList = new List<Map<String, String>>();}

_{SObjectType sObjectType = Schema.getGlobalDescribe().get(sObjectApiName);}

_{if (sObjectType != null) {}

_{Map<String, Schema.SObjectField> fieldsMap = sObjectType.getDescribe().fields.getMap();}

_{for (Schema.SObjectField field : fieldsMap.values()) {}

_{Schema.DescribeFieldResult fieldDescribe = field.getDescribe();}

_{Map<String, String> fieldInfo = new Map<String, String>();}

_{fieldInfo.put(‘FieldName’, fieldDescribe.getName());}

_{fieldInfo.put(‘Label’, fieldDescribe.getLabel());}

_{fieldList.add(fieldInfo);}

_}

_}

_{return fieldList; // Return field names and labels}

_}

_}

See how FieldAx can transform your Field Operations.

Try it today! Book Demo

You are one click away from your customized FieldAx Demo!

Conclusion:

The component efficiently handles dynamic SObject selection, lazy loading for performance, and customizable columns for a better user experience. Its modular structure ensures easy maintenance, scalability, and smooth handling of large datasets in Salesforce.

Author Bio

Tech Blogger

+ Recent Posts

Tags: lightning web component LWC