LWC: Reusable Dynamic Tabs

🗂️ Dynamic Tabs – Reusable Salesforce LWC Component

A production-ready Lightning Web Component that delivers fully accessible, highly configurable dynamic tabs with lazy loading, badge counts, SLDS icons, keyboard navigation, and closeable tabs—all built using native Salesforce Lightning Web Components.

📖 Project Overview

Dynamic Tabs is a reusable Lightning Web Component designed for modern Salesforce applications that require rich tabbed navigation while maintaining excellent performance and accessibility.

Unlike traditional tab implementations that render every panel immediately, this component supports lazy loading, meaning tab content is rendered only when a user opens it for the first time. After the initial load, content is simply shown or hidden without unnecessary re-rendering.

The component also includes badge counters, SLDS icons, closeable tabs, multiple layout variants, keyboard accessibility, and a clean public API that makes it easy to integrate into enterprise Salesforce applications.

🔗 View Source Code ⬇ Download ZIP

✨ Features

Feature	Description
Lazy Loading	Tab content loads only when activated for the first time.
Badge Counts	Displays per-tab counters with automatic 99+ overflow handling.
SLDS Icons	Supports any Salesforce Lightning icon beside the tab label.
Closeable Tabs	Optional close button with custom tabclose event.
Keyboard Navigation	Supports Left, Right, Home and End keyboard shortcuts.
Accessibility	ARIA-compliant implementation using tablist, tab and tabpanel roles.
Multiple Variants	Supports Default, Scoped and Vertical SLDS tab layouts.
Programmatic API	Switch tabs and update badge counts directly from JavaScript.
Reusable Design	Can be embedded into any Lightning page or custom component.

🏗 Component Architecture

📁 Project Structure

force-app/
└── main/
    └── default/
        └── lwc/
            ├── dynamicTabs/
            │   ├── dynamicTabs.html
            │   ├── dynamicTabs.js
            │   ├── dynamicTabs.css
            │   └── dynamicTabs.js-meta.xml
            │
            ├── dynamicTabPanel/
            │   ├── dynamicTabPanel.html
            │   ├── dynamicTabPanel.js
            │   └── dynamicTabPanel.css
            │
            └── dynamicTabsDemo/

⚙️ Public API

Property / Method	Purpose
variant	Choose default, scoped, or vertical layout.
defaultTab	Automatically activate a tab on initial render.
switchTab()	Programmatically activate any tab.
updateBadge()	Update badge counts dynamically.
activeTab	Returns the currently active tab.

🔄 Component Workflow

Page Loads
     │
     ▼
Render Tab Navigation
     │
     ▼
Activate Default Tab
     │
     ▼
Lazy Load Panel
     │
     ▼
User Switches Tabs
     │
     ▼
Previously Loaded?
     │
 ┌───┴────┐
 │        │
Yes      No
 │        │
 ▼        ▼
Show     Render Once
Content   Then Cache

⌨️ Keyboard Accessibility

• ← Move to previous tab
• → Move to next tab
• Home jumps to the first tab
• End jumps to the last tab
• Fully ARIA-compliant tab navigation
• Screen reader friendly implementation

🎨 Supported Variants

Variant	Description
Default	Standard Salesforce horizontal tabs.
Scoped	SLDS scoped tab style.
Vertical	Vertical navigation for dashboards and setup pages.

🚀 Deployment

sf org login web --alias myOrg

sf project deploy start \
--source-dir force-app \
--target-org myOrg

🎯 Business Use Cases

• Account & Contact workspaces
• Customer Service Consoles
• Sales dashboards
• Experience Cloud portals
• Admin configuration pages
• Record detail workspaces
• Multi-step business applications
• Reusable enterprise component libraries

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Dynamic Tabs component provides a powerful, enterprise-ready tab navigation experience for Salesforce applications. With lazy loading, badge counters, SLDS integration, keyboard accessibility, multiple layout variants, and a clean programmatic API, it enables developers to build scalable, high-performance Lightning applications while delivering an excellent user experience.

LWC: PDF Generator Button

📄 PDF Generator Button for Salesforce LWC

Generate professional PDF documents from any Salesforce record with a single click, automatically save them as Salesforce Files, and maintain a complete PDF history.

📖 Project Overview

PDF Generator Button is a reusable Lightning Web Component that enables users to generate PDF documents directly from Salesforce record pages.

The component renders a configurable Visualforce page as a PDF, stores it as a Salesforce File (ContentVersion), automatically links it back to the source record, and displays recently generated PDFs for quick access.

Designed for enterprise Salesforce applications, the solution works across standard and custom objects without requiring object-specific code.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
One-Click PDF Generation	Generate PDFs directly from Lightning record pages.
Reusable Across Objects	Supports Account, Contact, Opportunity and custom objects.
Automatic File Naming	Creates descriptive file names automatically or allows a custom name.
Salesforce Files Integration	Creates ContentVersion and ContentDocumentLink records automatically.
PDF History	Displays the latest generated PDFs for each record.
Download Support	Open or download generated PDFs directly.
Toast Notifications	Instant success and error feedback.
Configurable Template	Use any Visualforce page as the PDF template.
Permission Set Included	Easy deployment using the included permission set.

🏗 Architecture

📁 Project Structure

force-app/main/default
│
├── lwc
│   └── pdfGeneratorButton
│       ├── pdfGeneratorButton.html
│       ├── pdfGeneratorButton.js
│       ├── pdfGeneratorButton.css
│       └── pdfGeneratorButton.js-meta.xml
│
├── classes
│   ├── PdfGeneratorController.cls
│   ├── PdfGeneratorControllerTest.cls
│   ├── RecordPdfPageController.cls
│   └── RecordPdfPageControllerTest.cls
│
├── pages
│   └── RecordPdfPage.page
│
└── permissionsets
    └── PdfGenerator.permissionset-meta.xml

⚙️ Lightning App Builder Configuration

Property	Default	Description
buttonLabel	Generate PDF	Custom label displayed on the button.
vfPageName	RecordPdfPage	Visualforce page used to generate the PDF.
pdfFileName	Auto Generated	Optional static PDF filename.

🔄 PDF Generation Flow

Open Record
      │
      ▼
Click "Generate PDF"
      │
      ▼
Visualforce Page Rendered
      │
      ▼
PDF Created
      │
      ▼
ContentVersion Created
      │
      ▼
ContentDocument Linked
      │
      ▼
PDF History Refreshed

📂 Automatic File Naming

__.pdf

Example:

Account_001XXXXXXXXXXXX_2026-06-28.pdf

📜 PDF History

• Displays the latest 20 generated PDF files.
• Shows files linked to the current record.
• One-click preview and download.
• Automatically refreshes after generating a new PDF.

🧩 Custom PDF Templates

The component supports any Visualforce page as a PDF template. Simply specify the Visualforce page API name in the component configuration to generate customized invoices, quotations, certificates, reports, contracts, or business documents.

🔐 Security Features

• Uses with sharing Apex controllers.
• Respects Salesforce record-level security.
• Stores documents using native Salesforce Files.
• Supports controlled rollout through the included permission set.
• Works with standard Salesforce authentication.

🚀 Deployment

sf org login web --alias myOrg

sf project deploy start \
--source-dir force-app \
--target-org myOrg

sf org assign permset \
--name PdfGenerator

sf apex run test \
--class-names PdfGeneratorControllerTest,RecordPdfPageControllerTest

🎯 Business Use Cases

• Invoice Generation
• Sales Quotations
• Customer Agreements
• Booking Confirmations
• Service Reports
• Purchase Orders
• Certificates
• Inspection Reports
• Healthcare Documents
• Custom Business Forms

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The PDF Generator Button is a reusable Salesforce Lightning Web Component that streamlines PDF creation directly from Lightning record pages. By combining Lightning Web Components, Apex, Visualforce, and Salesforce Files, it provides a simple, secure, and scalable solution for generating and managing business documents across any Salesforce object.

LWC: Collapsible Accordion

🎯 Collapsible Accordion for Salesforce LWC

A reusable, accessible, animated accordion component for Lightning Web Components with support for single-expand, multi-expand, slot-based composition, and programmatic control.

📖 Project Overview

Salesforce LWC Accordion is a fully reusable Lightning Web Component designed to create modern, responsive, and accessible accordion interfaces.

The component supports both single-expand and multi-expand modes, animated transitions, programmatic APIs, optional icons and badges, and slot-based content composition.

Whether you're displaying account details, forms, datatables, dashboards, FAQs, or complex business content, this accordion provides a flexible and scalable solution for Salesforce applications.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Single Expand Mode	Opening one section automatically closes others.
Multi Expand Mode	Multiple sections can remain open simultaneously.
Expand All / Collapse All	Bulk control of accordion sections.
Smooth Animations	CSS-based expand/collapse transitions.
Animated Chevron	Visual indicator rotates automatically.
Slot-Based Composition	Supports tables, forms, charts, and custom markup.
Data-Driven API	Generate sections dynamically using JavaScript arrays.
Accessibility Ready	ARIA-compliant and keyboard-friendly.

🏗 Architecture

Parent Component
        │
        ▼
c-accordion
        │
        ├── State Management
        ├── Multi Expand Logic
        ├── Programmatic API
        │
        ▼
c-accordion-section
        │
        ├── Header
        ├── Chevron
        ├── Badge
        ├── Icon
        └── Content Panel

📁 Project Structure

salesforce-lwc-accordion
│
├── README.md
│
└── force-app
    └── main
        └── default
            └── lwc
                ├── accordion
                │   ├── accordion.html
                │   ├── accordion.js
                │   ├── accordion.css
                │   └── accordion.js-meta.xml
                │
                ├── accordionSection
                │   ├── accordionSection.html
                │   ├── accordionSection.js
                │   ├── accordionSection.css
                │   └── accordionSection.js-meta.xml
                │
                └── accordionDemo
                    ├── accordionDemo.html
                    ├── accordionDemo.js
                    └── accordionDemo.js-meta.xml

💻 Data-Driven Usage (Recommended)

<c-accordion
    title="Account Information"
    sections={mySections}
    allow-multi-expand={isMultiExpand}
    active-section-names={defaultOpen}
    onsectiontoggle={handleToggle}>
</c-accordion>

JavaScript Configuration

mySections = [
{
    name: 'details',
    label: 'Account Details',
    iconName: 'utility:account',
    content: 'Core account information.'
},
{
    name: 'contacts',
    label: 'Contacts',
    iconName: 'utility:people',
    badge: '5',
    content: 'Associated contacts.'
}
];

🎨 Slot-Based Composition

<c-accordion-section icon-name="utility:opportunity" is-open="" label="Opportunity Summary" name="summary">
    <lightning-datatable columns="{columns}" data="{tableData}" key-field="id">
    </lightning-datatable>
</c-accordion-section>

⚙️ Programmatic Control API

Method	Description
expandSection(name)	Open a section programmatically.
collapseSection(name)	Close a section programmatically.
getOpenSections()	Returns all currently expanded sections.

Example

openContacts() {
    this.refs.myAccordion.expandSection('contacts');
}

logOpen() {
    const openSections =
        this.refs.myAccordion.getOpenSections();
}

📦 Section Object Schema

{
    name: String,
    label: String,
    content: String,
    iconName: String,
    badge: String,
    isDisabled: Boolean
}

📢 Events

Event	Purpose
sectiontoggle	Triggered whenever sections open or close.
toggle	Fired by individual accordion sections.

♿ Accessibility Features

• Native button-based interaction
• aria-expanded support
• aria-controls support
• role="region" implementation
• aria-disabled support
• Keyboard navigation (Tab, Enter, Space)
• Visible focus indicators
• Screen reader friendly design

🎨 CSS Custom Properties

c-accordion {
    --accordion-section-max-height: 600px;
}

🚀 Deployment

sf org login web --alias my-org

sf project deploy start \
--source-dir force-app/main/default/lwc/accordion \
--source-dir force-app/main/default/lwc/accordionSection \
--target-org my-org

🎯 Benefits

• Reusable across multiple Salesforce projects.
• Supports both simple and complex content layouts.
• Fully configurable using metadata and JavaScript.
• Provides enterprise-grade accessibility.
• Clean architecture with reusable APIs.
• Smooth user experience with animations.
• App Builder and Flow Screen compatible.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Salesforce LWC Accordion is a flexible and accessible solution for creating collapsible content areas in Lightning Web Components. With support for data-driven configuration, slot-based content, animated transitions, and programmatic control, it can be used across a wide range of Salesforce applications while maintaining a clean and modern user experience.

LWC: Reusable Modal

🪟 Reusable Modal / Dialog for Salesforce LWC

Fully configurable, accessible, and reusable Lightning Web Component modal with named slots, multiple size variants, keyboard support, and customizable actions.

📖 Project Overview

Reusable Modal is a Lightning Web Component designed to provide a consistent modal dialog experience across Salesforce applications.

The component supports customizable headers, bodies, and footers through named slots while maintaining accessibility and Salesforce Lightning Design System (SLDS) compliance.

Developers can easily integrate the component into any Lightning Web Component and configure modal behavior using simple public properties.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Named Slots	Custom header, body, and footer content.
Multiple Sizes	Small, Medium, Large, and Full Screen variants.
Keyboard Accessibility	Supports ESC key dismissal.
Overlay Click Close	Optional backdrop click dismissal.
Default Footer Actions	Built-in Cancel and Confirm buttons.
Fully Accessible	ARIA support and SLDS compliant design.

🏗 Component Architecture

Parent Component
        │
        ▼
c-reusable-modal
        │
        ├── Header Slot
        ├── Body Slot
        ├── Footer Slot
        │
        ▼
Modal Controller
        │
        ├── Open / Close
        ├── ESC Handling
        ├── Confirm Event
        └── Overlay Click Logic

📁 Project Structure

force-app/main/default/lwc/

├── reusableModal/
│   ├── reusableModal.html
│   ├── reusableModal.js
│   ├── reusableModal.css
│   └── reusableModal.js-meta.xml
│
└── reusableModalDemo/
    ├── reusableModalDemo.html
    ├── reusableModalDemo.js
    └── reusableModalDemo.js-meta.xml

⚙️ Public API Properties

Property	Default	Description
isOpen	false	Controls modal visibility.
title	''	Default modal title.
size	medium	small | medium | large | full
cancelLabel	Cancel	Cancel button text.
confirmLabel	OK	Confirm button text.
closeOnOverlayClick	false	Enable backdrop dismissal.

📏 Supported Modal Sizes

Size	Description
Small	~400px width
Medium	SLDS default modal width
Large	~90vw width
Full	100vw × 100vh

💻 Basic Usage Example

<c-reusable-modal cancel-label="Cancel" confirm-label="Delete" is-open="{isModalOpen}" onclose="{closeModal}" onconfirm="{handleDelete}" title="Confirm Delete">
    <span slot="body">
        Are you sure you want to delete this record?
    </span>
</c-reusable-modal>

🎨 Custom Header, Body & Footer Example

<c-reusable-modal is-open="{isOpen}" onclose="{handleClose}" size="medium">
    <span slot="header">
        Warning
    </span>
    <span slot="body">
        Unsaved changes detected.
    </span>
    <span slot="footer">
        Custom Action Buttons
    </span>
</c-reusable-modal>

♿ Accessibility Features

• role="dialog"
• aria-modal="true"
• aria-labelledby support
• aria-describedby support
• ESC key dismissal
• Keyboard-friendly navigation
• Accessible close button labels
• SLDS-compliant focus management

🚀 Benefits

• Reusable across Salesforce projects.
• Consistent user experience.
• Improved accessibility.
• Reduces duplicate modal code.
• Easy integration into existing LWCs.
• Supports enterprise-grade applications.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Reusable Modal provides a clean, flexible, and accessible way to implement modal dialogs in Salesforce Lightning Web Components. With support for named slots, multiple size variants, keyboard interactions, and customizable behaviors, it serves as a foundational UI component for enterprise Salesforce applications.

LWC: Salesforce Toast Notification Framework

🔔 Salesforce Toast Notification Framework

Reusable Lightning Web Component framework for displaying modern, customizable, and centralized toast notifications across Salesforce applications.

📖 Project Overview

Salesforce Toast Notification Framework provides a reusable and centralized approach for displaying success, error, warning, and informational notifications inside Lightning Web Components.

Instead of duplicating toast logic throughout an application, developers can dispatch a standardized event and allow the framework to render consistent notifications with configurable styling, positioning, icons, duration, and user interactions.

This project promotes better maintainability, cleaner component architecture, and a consistent user experience across Salesforce applications.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Centralized Toast Management	Single framework controls notifications across the application.
Multiple Variants	Success, Error, Warning, and Information messages.
Custom Duration	Configure auto-dismiss timing dynamically.
Stacked Notifications	Supports displaying multiple toasts simultaneously.
Reusable Architecture	Works across multiple Lightning pages and components.
Modern UI	SLDS-inspired design with customizable styling.

🏗 Architecture

Application Components
        │
        ▼
Dispatch Toast Event
        │
        ▼
Toast Service / Utility
        │
        ▼
Toast Container
        │
        ▼
Toast Renderer
        │
        ▼
Success | Error | Warning | Info

📁 Project Structure

salesforce-toast-notification
│
├── force-app
│   └── main
│       └── default
│
├── lwc
│   ├── toastNotification
│   ├── toastContainer
│   ├── toastService
│   └── demoComponent
│
├── staticresources
├── permissionsets
└── README.md

💻 Toast Event Example

this.dispatchEvent(
    new CustomEvent('showtoast', {
        detail: {
            title: 'Success',
            message: 'Record saved successfully.',
            variant: 'success'
        }
    })
);

⚙️ Toast Configuration

{
    title: 'Warning',
    message: 'Please review required fields.',
    variant: 'warning',
    duration: 5000,
    dismissible: true
}

🎨 Supported Variants

✅ Success

❌ Error

⚠ Warning

ℹ Information

🔄 Notification Lifecycle

1. User performs an action.
2. Component dispatches toast event.
3. Toast container receives notification.
4. Toast is rendered with proper styling.
5. User views notification.
6. Toast auto-dismisses or closes manually.

🧩 Usage Example

<c-toast-notification>
</c-toast-notification>

import showToast from 'c/toastService';

showToast({
    title: 'Success',
    message: 'Account created successfully',
    variant: 'success'
});

🚀 Benefits

• Improves user experience.
• Standardizes notifications across applications.
• Reduces duplicated code.
• Easy integration into existing LWCs.
• Enterprise-ready notification management.

📦 Deployment

sf org login web -a myOrg

sf project deploy start \
--source-dir force-app \
-o myOrg

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Salesforce Toast Notification Framework simplifies how notifications are managed within Lightning Web Components. By centralizing toast rendering and configuration, developers can deliver a consistent and maintainable user experience while reducing repetitive implementation effort.