Building a Salesforce LWC Component to Track Field History with Old and New Values

Introduction:

In Salesforce, it is essential to keep track of field history changes to maintain data integrity and gain insights into user activities. In this blog post, we will explore how to create a Lightning Web Component (LWC) that tracks field history and displays the old and new values. This component will provide a comprehensive view of the data changes made by users, allowing you to analyze and understand the evolution of your Salesforce records.

Prerequisites:

Before proceeding with this tutorial, ensure that you have a basic understanding of Salesforce development concepts, including Lightning Web Components (LWC) and Apex programming.

Step 1: Create a New Lightning Web Component

To begin, let's create a new LWC component. Use the Salesforce CLI or Developer Console to generate the component's boilerplate code. Open your preferred command-line interface and execute the following command:

sfdx force:lightning:component:create -n FieldHistoryComponent -d force-app/main/default/lwc

This command will create a new directory named "FieldHistoryComponent" containing the necessary files for our LWC.

Step 2: Design the User Interface

Next, let's design the user interface of our component. Open the newly created FieldHistoryComponent file and replace its contents with the following code:

 

<template>

    <lightning-card title="Field History">

        <lightning-layout>

            <lightning-layout-item size="12" class="slds-p-horizontal_small">

                <lightning-combobox

                    label="Select Field"

                    options={fieldOptions}

                    value={selectedField}

                    onchange={handleFieldChange}>

                </lightning-combobox>

            </lightning-layout-item>

        </lightning-layout>

        <template if:true={fieldHistory}>

            <lightning-datatable

                key-field="Id"

                data={fieldHistory}

                columns={columns}

                hide-checkbox-column="true">

            </lightning-datatable>

        </template>

    </lightning-card>

</template>

Step 3: Define JavaScript Controller Logic

Now, let's define the JavaScript controller logic for our component. Open the FieldHistoryComponent file and replace its contents with the following code:

import { LightningElement, wire } from 'lwc';

import getFieldHistory from '@salesforce/apex/FieldHistoryController.getFieldHistory';

export default class FieldHistoryComponent extends LightningElement {

    selectedField = '';

    fieldOptions = [

        { label: 'Field 1', value: 'Field_1__c' },

        { label: 'Field 2', value: 'Field_2__c' },

        { label: 'Field 3', value: 'Field_3__c' }

    ];

    columns = [

        { label: 'Old Value', fieldName: 'OldValue', type: 'text' },

        { label: 'New Value', fieldName: 'NewValue', type: 'text' },

        { label: 'Modified By', fieldName: 'LastModifiedByName', type: 'text' },

        { label: 'Modified Date', fieldName: 'LastModifiedDate', type: 'date' }

    ];

    @wire(getFieldHistory, { field: '$selectedField' })

    fieldHistory;

    handleFieldChange(event) {

        this.selectedField = event.detail.value;

    }

}

Step 4: Create an Apex Controller

To retrieve the field history records, we need to create an Apex controller. Execute the following command in your command-line interface to generate the Apex class:

sfdx force:apex:class:create -n FieldHistoryController -d force-app/main/default/classes

Open the newly created `FieldHistoryController.cls` file and replace its contents with the following code:

public with sharing class FieldHistoryController {

    @AuraEnabled(cacheable=true)

    public static List<FieldHistory> getFieldHistory(String field) {

        List<FieldHistory> fieldHistoryList = [

            SELECT OldValue, NewValue, LastModifiedByName, LastModifiedDate

            FROM FieldHistory

            WHERE Field = :field

            ORDER BY LastModifiedDate DESC

        ];

        return fieldHistoryList;

    }

}

Step 5: Deploy the Component and Test

Finally, deploy the component to your Salesforce org using the Salesforce CLI or Metadata API. Once deployed, add the `FieldHistoryComponent` to a record page or a Lightning App Builder page, and you'll be able to select a field and view its history.

Conclusion:

In this blog post, we learned how to build a Salesforce Lightning Web Component (LWC) that tracks field history and displays the old and new values. By leveraging LWC's interactive UI elements and Apex controllers, we created a user-friendly component that enables users to explore the changes made to specific fields. This functionality enhances data visibility and empowers users with valuable insights into their Salesforce records.