Blog

Create Recent records component clone in LWC .

recent records clone in lwc
recent records clone in lwc

Hey dear coders welcome back ……

In this blog we will discuss how to create a Recent Records clone with lighting components .

Watch the following video and build Salesforce recent records component alone with me .

Code :

Lighting web component

HTML file

<template>
    <b><h1>{LabelOfRecentRecords}</h1></b>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

JS File

import { LightningElement, track , api} from 'lwc';
import getRecentRecords from "@salesforce/apex/RecentItemsController.getRecentRecords";
const columns = [
    { label: 'Id', fieldName: 'Id' },
    { label: 'Name', fieldName: 'Name', type: 'Name' },
    { label: 'Phone', fieldName: 'Phone', type: 'Phone' },

];
export default class RecentItemsClone extends LightningElement {
    @api ObjectName;
    @api NumberOfRecordToDisplay = 5;
    @api LabelOfRecentRecords = 'Recent records';
    count = 0;
    data = [];
    columns = columns;

    renderedCallback() { 
        if(this.count<3) { 

            getRecentRecords({ doDoName: this.ObjectName , numberOfRecords: this.NumberOfRecordToDisplay})
            .then((data) => {
                this.data = data;
                console.log('getting records');
            })
            .catch((error) => { 
                console.log('Error in record fetch')
            });
            this.count++;
        }  
    }
}

XML File

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Recent Items Clone</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
  
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="LabelOfRecentRecords" type="String" label="Label"  description="Leave blakn for default"/> 
            <property name="ObjectName" type="String" label="Object Name" datasource="apex://CloneRecentItems"/>
            <property name="NumberOfRecordToDisplay"  label="Number of record to display" type="Integer" default="1"/> 
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

In XML file we have property ObjectName which has a data source apex://CloneRecentItems ,so we need to create APEX class name as CloneRecentItems.

APEX Class CloneRecentItems

global with sharing class CloneRecentItems extends VisualEditor.DynamicPickList  {
    VisualEditor.DesignTimePageContext context;

    global override VisualEditor.DataRow getDefaultValue() {
        return  new CloneRecentItems().getValues().get(0);
    }
    
    global override VisualEditor.DynamicPickListRows getValues() {
        try {
            VisualEditor.DynamicPickListRows  lstSObject = new VisualEditor.DynamicPickListRows();
            for(Schema.SObjectType objTyp : Schema.getGlobalDescribe().Values())
            {
                String name = objTyp.getDescribe().getLocalName();
                String label = objTyp.getDescribe().getLabel();
                lstSObject.addRow(new VisualEditor.DataRow(name,label));
            }
            return lstSObject;
        }
        catch ( Exception ex) {
            system.debug( 'Exception - ' + ex.getMessage() + ' at line ' + ex.getLineNumber() + ' stack trace ' + ex.getStackTraceString());
            return null;
        }    
    }
    
}

If you have any comment or concern then please put it in comment area , we will happy to help you .

Thank you …

Leave a Reply