Custom Metadata Types vs Custom Settings vs Custom Labels 💬 In plain words: Three lookalikes: Custom Metadata = configuration that DEPLOYS with your code (best for app settings). Custom Settings = org/user-specific values, changeable at runtime (hierarchy type is great for bypass switches). Custom Labels = translatable text for the UI. 📌 Example: API endpoint URLs per environment → Custom Metadata (deploys with code, sandbox vs prod values). A 'Bypass_Automation__c' checkbox an admin flips during data load → hierarchy Custom Setting. The word 'Submit' translated to Hindi → Custom Label. 🎬 Real-Life Example: The Fee Table Trapped Inside Code Skyline charges a different delivery fee per city. Apex needs those rates on every booking. The Old/Bad Way: if (city == 'Delhi') fee = 50. Else if (city == 'Mumbai') fee = 65. … Every rate change is a code change, a test run, and a deployment. Why this is bad: Business data is trappe...
Here are some code examples for implementing pagination in Lightning Web Components (LWC):
1. Basic Pagination:
import { LightningElement, track } from 'lwc';
const PAGE_SIZE = 10; // Number of items per page
export default class PaginationExample extends LightningElement {
@track currentPage = 1;
@track totalItems = 0;
// Your data retrieval logic goes here
fetchData() {
// Fetch data from server and update totalItems count
// This method should be called whenever you want to update the pagination
// and fetch the data for the current page.
}
handlePageChange(event) {
this.currentPage = event.detail;
this.fetchData();
}
}
HTML:-
<template>
<c-paginator
current-page={currentPage}
total-items={totalItems}
page-size={PAGE_SIZE}
onpagechange={handlePageChange}
></c-paginator>
<!-- Render your data here based on the current page -->
</template>
2. Paginator Component:
// JavaScript file: paginator.js
import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
@api currentPage;
@api totalItems;
@api pageSize;
get totalPages() {
return Math.ceil(this.totalItems / this.pageSize);
}
get isFirstPage() {
return this.currentPage === 1;
}
get isLastPage() {
return this.currentPage === this.totalPages;
}
handleFirstPage() {
if (!this.isFirstPage) {
this.dispatchPageChangeEvent(1);
}
}
handlePreviousPage() {
if (!this.isFirstPage) {
this.dispatchPageChangeEvent(this.currentPage - 1);
}
}
handleNextPage() {
if (!this.isLastPage) {
this.dispatchPageChangeEvent(this.currentPage + 1);
}
}
handleLastPage() {
if (!this.isLastPage) {
this.dispatchPageChangeEvent(this.totalPages);
}
}
dispatchPageChangeEvent(page) {
const pageChangeEvent = new CustomEvent('pagechange', {
detail: page,
});
this.dispatchEvent(pageChangeEvent);
}
}
<!-- HTML file: paginator.html -->
<template>
<div class="pagination">
<button
class="pagination-button"
disabled={isFirstPage}
onclick={handleFirstPage}
>
First
</button>
<button
class="pagination-button"
disabled={isFirstPage}
onclick={handlePreviousPage}
>
Previous
</button>
<span class="pagination-text">
Page {currentPage} of {totalPages}
</span>
<button
class="pagination-button"
disabled={isLastPage}
onclick={handleNextPage}
>
Next
</button>
<button
class="pagination-button"
disabled={isLastPage}
onclick={handleLastPage}
>
Last
</button>
</div>
</template>
These code examples demonstrate a basic implementation of pagination in LWC using a paginator component. The PaginationExample component is responsible for fetching data and updating the current page. The Paginator component handles the rendering of pagination buttons and dispatches a custom event when a page change occurs.
Note that the code provided is a starting point and may need modification based on your specific use case and requirements.