How to make Custom Recent Records Component in LWC and How to get Recent Records using SOQL Query

Salesforce provides us many standard components which we can directly use according to our requirements. Today, we are going to discuss one of the standard components which are Recent Records. You can only use it on Home Page but not available on the Record and App Page. 

This component shows 5 records at a time and also there is no way to filter the records based on the criteria. So, We are going to make a custom Recent Records component in which you can show the records according to your criteria. Let's begin:

customRecentRecords.html

	<template>
	<lightning-card title="Recent Records">
	<table class="slds-table slds-table_cell-buffer slds-table_bordered">
	<tbody>
	<template for:each={recentlyList} for:item="recently">
	<tr key={recently.Data.Id}>
	<td >
	<lightning-icon icon-name={recently.icon} alternative-text="Event" title={recently.Data.Type} ></lightning-icon>
	</td>
	<td>
	<a style="text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: from-font;" href="#" onclick={handleNavigate} data-id={recently.Data.Id}>{recently.Data.Name}</a>
	</td>
	</tr>
	</template>
	<tr>
	<td></td>
	<td style="padding:10px; ">
	<span><button style="border: none; background: none;" onclick={viewAll}>View All</button></span>
	</td>
	</tr>
	</tbody>
	</table>
	</lightning-card>
	<template if:true={showAllRecords}>
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
	<div class="slds-modal__container">
	<!-- Modal/Popup Box LWC header here -->
	<header class="slds-modal__header">
	<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
	<lightning-icon icon-name="utility:close"
	alternative-text="close"
	variant="inverse"
	size="small" ></lightning-icon>
	<span class="slds-assistive-text">Close</span>
	</button>
	<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Recent Records</h2>
	<h4 >20 items</h4>
	</header>
	<!-- Modal/Popup Box LWC body starts here -->
	<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
	<table class="slds-table slds-table_cell-buffer slds-table_bordered">
	<thead>
	<tr>
	<th>
	</th>
	<th>
	NAME
	</th>
	<th>
	TYPE
	</th>
	</tr>
	</thead>
	<tbody>
	<template for:each={allRecentRecords} for:item="recently">
	<tr key={recently.Data.Id}>
	<td style="width: 10px;">
	<lightning-icon icon-name={recently.icon} alternative-text="Event" title={recently.Data.Type}></lightning-icon>
	</td>
	<td>
	<a style="text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: from-font;" href="#" onclick={handleNavigate} data-id={recently.Data.Id}>{recently.Data.Name}</a>
	</td>
	<td>
	{recently.Data.Type}
	</td>
	</tr>
	</template>
	</tbody>
	</table>
	</div>
	<!-- Modal/Popup Box LWC footer starts here -->
	<footer class="slds-modal__footer">
	<button class="slds-button slds-button_brand" onclick={closeModal} title="OK">OK</button>
	</footer>
	</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
	</template>
	</template>

view raw customRecentRecords.html hosted with ❤ by GitHub

customRecentRecords.js

	import { LightningElement ,wire, track} from 'lwc';
	import getRecentlyViewed from '@salesforce/apex/customRecentRecords.getRecentRecords';
	import { NavigationMixin } from "lightning/navigation";
	export default class CustomRecentRecords extends NavigationMixin(LightningElement) {
	@track recentlyList = [];
	allRecentRecords;
	getRecentList;
	showAllRecords = false;
	@wire(getRecentlyViewed)
	assignRecentlyViewed({ error,data }) {
	if (data) {
	this.getRecentList = this.data = data.map((Obj, index) => ({
	Data: { ...Obj },
	index: index+1,
	icon: 'standard:'+Obj.Type.toLowerCase()
	}));
	this.allRecentRecords = this.getRecentList;
	this.getRecentList.forEach(element => {
	if(element.index <= 5){
	this.recentlyList.push(element);
	}
	});
	} else if (error) {
	console.log(error);
	}
	}
	viewAll(){
	this.showAllRecords = true;
	}
	closeModal(){
	this.showAllRecords = false;
	}
	handleNavigate(event){
	event.preventDefault();
	this[NavigationMixin.GenerateUrl]({
	type: "standard__recordPage",
	attributes: {
	recordId: event.target.dataset.id,
	actionName: "view"
	}
	}).then(url => {
	window.open(url, "_blank");
	});
	}
	}

view raw customRecentRecords.js hosted with ❤ by GitHub

customRecentRecords.js-meta.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>54.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
	<target>lightning__HomePage</target>
	</targets>
	</LightningComponentBundle>

view raw customRecentRecords.js-meta.xml hosted with ❤ by GitHub

customRecentRecords.cls

	public with sharing class customRecentRecords {
	@AuraEnabled(cacheable = true)
	public static List<RecentlyViewed> getRecentRecords(){
	List<RecentlyViewed> recList = [SELECT Id, Name, Type FROM RecentlyViewed where Type != 'ListView' LIMIT 20];
	return recList;
	}
	}

view raw customRecentRecords.cls hosted with ❤ by GitHub

Let's see the demo: