LWC: Booking Portal

📅 Salesforce Booking Portal

A complete multi-purpose booking platform built on Salesforce using Lightning Web Components, Apex, Flows, Platform Events, Stripe, PayPal, and native Salesforce automation.

📖 Project Overview

Salesforce Booking Portal is a full-featured booking management solution that covers the entire customer journey from resource discovery to reservation, payment processing, confirmation, notifications, and operational management.

The platform is designed using Salesforce native technologies including Lightning Web Components (LWC), Apex Controllers, Custom Objects, Platform Events, Flows, Named Credentials, and Custom Metadata Types.

The solution supports various booking scenarios such as rooms, appointments, seats, equipment rentals, training sessions, healthcare appointments, and service scheduling.

🔗 View Source Code ⬇ Download ZIP

🏗 Solution Architecture

✨ Key Features

Module	Capabilities
Booking Engine	Availability search, slot reservation, temporary holds, booking references.
Pricing Engine	Dynamic pricing, surge pricing, promotions, loyalty discounts.
Payment Processing	Stripe, PayPal, saved payment methods, split payments.
Confirmation	Booking receipts, invoices, calendar exports.
Notifications	Email, SMS, reminders, status updates.
Operations	Admin dashboard, reporting, analytics, booking management.

🛒 4-Step Booking Checkout Flow

Step 1 → Select Resource & Time Slot

Step 2 → Review Pricing & Promotions

Step 3 → Enter Payment Information

Step 4 → Booking Confirmation & Invoice

📁 Project Structure

force-app/main/default

├── classes
│   ├── BookingEngineController.cls
│   ├── PricingController.cls
│   └── PaymentController.cls
│
└── lwc
    ├── bookingCheckoutStepper
    ├── resourceSelector
    ├── pricingPanel
    ├── paymentProcessor
    └── bookingConfirmation

⚙️ LWC Component Architecture

c-booking-checkout-stepper
│
├── c-resource-selector
│
├── c-pricing-panel
│
├── c-payment-processor
│
└── c-booking-confirmation

🔍 Booking Engine Features

• Resource Type Filtering
• Availability Search
• Date and Time Selection
• Party Size Management
• Real-Time Availability Checks
• Temporary Hold Creation
• Automatic Hold Expiration
• Booking Reference Generation
• Calendar Integration
• Invoice Generation

💰 Pricing & Promotion Engine

Base Price
   +
Surge Pricing
   +
Seasonal Adjustment
   -
Promo Discount
   -
Loyalty Discount
   +
Tax
   =
Final Total

Promotion Validation

• Promotion must be active.
• Current date must be within validity period.
• Usage limit validation.
• Minimum order amount validation.
• Listing eligibility validation.
• Single-use restriction validation.

💳 Payment Processing

Method	Implementation
Credit/Debit Cards	Stripe Payment Intents
PayPal	PayPal Orders API
Saved Methods	Stored payment profiles
Split Payments	2–10 participant payment sharing

📦 Apex Controllers

Controller	Responsibility
BookingEngineController	Availability search, booking holds, booking confirmation.
PricingController	Pricing calculations and discount processing.
PaymentController	Payment processing and booking finalization.

🔄 End-to-End Data Flow

Customer Search
      │
      ▼
Resource Selection
      │
      ▼
Temporary Hold
      │
      ▼
Pricing Calculation
      │
      ▼
Payment Authorization
      │
      ▼
Booking Creation
      │
      ▼
Platform Event Published
      │
      ▼
Notification Flow Triggered
      │
      ▼
Confirmation Delivered

🔐 Security & Compliance

• with sharing Apex Controllers
• Named Credentials for external integrations
• Secure payment tokenization
• Custom Metadata driven configuration
• Role-based access control
• Platform Event audit trail
• PCI-friendly payment architecture
• GDPR-ready data management approach

🚀 Deployment

sf org login web --alias booking-org

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

sf apex run test

🎯 Business Use Cases

• Hotel & Resort Reservations
• Healthcare Appointment Scheduling
• Training & Event Registrations
• Equipment Rental Systems
• Conference Room Booking
• Consultation Scheduling
• Sports Facility Reservations
• Professional Services Booking

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Salesforce Booking Portal demonstrates how a complete enterprise-grade booking solution can be built entirely on the Salesforce Platform. By combining Lightning Web Components, Apex, Flows, Platform Events, Stripe, PayPal, and configurable metadata, the application delivers a scalable booking experience covering discovery, reservation, payment, confirmation, and operational management.

LWC: Mass Update Panel

⚡ Mass Update Panel for Salesforce LWC

Reusable Lightning Web Component for bulk updating records with field-type-aware inputs, mandatory confirmation, partial success reporting, and one-click rollback support.

📖 Project Overview

Mass Update Panel is a reusable Salesforce Lightning Web Component that allows users to update a single field across multiple records simultaneously.

The solution includes a guided workflow with row selection, dynamic field configuration, update preview, confirmation dialog, partial success handling, and rollback functionality.

Built using Lightning Web Components, Apex, and Salesforce security best practices, this component helps administrators and users perform safe bulk updates directly from Lightning Experience.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Multi-Record Selection	Supports checkbox-based bulk row selection.
Dynamic Input Types	Automatically renders controls based on Salesforce field type.
Preview Before Update	Displays selected field and new value before DML execution.
Confirmation Modal	Mandatory confirmation step before updating records.
Partial Success Handling	Supports allOrNone=false and displays failed records.
Rollback Support	Restore original values with one click.
Security Enforcement	CRUD/FLS validation using Security.stripInaccessible.
Zero Dependencies	Pure Apex, LWC, and SLDS implementation.

🏗 Architecture

Host Page / Lightning App
            │
            ▼
     massUpdatePanel
            │
 ┌──────────┼───────────┐
 │          │           │
 ▼          ▼           ▼
Datatable  Field Picker  Preview Bar
            │
            ▼
 massUpdateConfirmModal
            │
            ▼
MassUpdateController.cls
            │
 ┌──────────┼───────────┐
 │          │           │
 ▼          ▼           ▼
getRecords() massUpdate() rollbackUpdate()
            │
            ▼
Salesforce Database

📁 Project Structure

force-app/main/default
│
├── classes
│   ├── MassUpdateController.cls
│   └── MassUpdateControllerTest.cls
│
└── lwc
    ├── massUpdatePanel
    │   ├── massUpdatePanel.html
    │   ├── massUpdatePanel.js
    │   └── massUpdatePanel.css
    │
    ├── massUpdateConfirmModal
    │   ├── massUpdateConfirmModal.html
    │   ├── massUpdateConfirmModal.js
    │   └── massUpdateConfirmModal.css
    │
    └── accountMassUpdatePage
        ├── accountMassUpdatePage.html
        └── accountMassUpdatePage.js

🔄 Update Workflow

Select Records
      │
      ▼
Choose Field
      │
      ▼
Enter New Value
      │
      ▼
Preview Update
      │
      ▼
Confirmation Modal
      │
      ▼
Mass Update
      │
      ▼
Success / Failure Report
      │
      ▼
Optional Rollback

⚙️ Component Properties

Property	Type	Description
sobjectApiName	String	Target Salesforce object.
records	Array	Records displayed in datatable.
columns	Array	Datatable column definitions.
editableFields	Array	Supported fields for mass updates.
maxRowSelection	Integer	Maximum selectable records.

🧩 Usage Example

<c-mass-update-panel
    sobject-api-name="Contact"
    records={contacts}
    columns={columns}
    editable-fields={editableFields}
    max-row-selection="300"
    onmassupdate={handleUpdate}
    onrollback={handleRollback}>
</c-mass-update-panel>

📋 Editable Field Configuration

{
    label: 'Lead Source',
    apiName: 'LeadSource',
    type: 'picklist',
    picklistOptions: [
        { label: 'Web', value: 'Web' },
        { label: 'Phone', value: 'Phone' },
        { label: 'Partner', value: 'Partner' }
    ]
}

🎯 Supported Field Types

Text

Picklist

Multi Picklist

Boolean

Currency

Percent

Integer

Double

Date

DateTime

Email

Phone

URL

↩ Rollback Functionality

• Original values are captured before update execution.
• Rollback snapshot is generated server-side.
• Only the most recent update can be rolled back.
• Rollback restores original field values.
• Partial rollback failures can be retried.
• Snapshot clears after successful rollback.

🔐 Security Model

Layer	Implementation
Object Security	Describe checks before querying records.
Field Security	Security.stripInaccessible enforcement.
Update Permissions	isUpdateable() validation.
Sharing Rules	Controller uses with sharing.

🧪 Testing

• MassUpdateControllerTest.cls included.
• Mass update validation tests.
• Rollback testing scenarios.
• CRUD/FLS security validation.
• Partial success coverage.

🚀 Deployment

sf org login web --alias my-sandbox

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

sf apex run test \
--class-names MassUpdateControllerTest

🎯 Benefits

• Reduces manual record maintenance.
• Improves user productivity.
• Provides safe bulk updates.
• Supports rollback recovery.
• Reusable across any Salesforce object.
• Enterprise-ready security model.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Mass Update Panel is a powerful reusable Salesforce Lightning Web Component that simplifies bulk record management. With dynamic field handling, mandatory confirmations, partial success reporting, and rollback capabilities, it provides a secure and user-friendly approach to large-scale data updates in Salesforce.

LWC: Reusable Related List View

📋 Reusable Related List View for Salesforce LWC

A fully configurable Lightning Web Component that renders Salesforce related lists with pagination, sorting, search, inline editing, CSV export, row actions, and record management.

📖 Project Overview

relatedListView is a production-ready Salesforce Lightning Web Component designed to display related records dynamically without writing custom code for each object relationship.

The component is fully configurable through Lightning App Builder and supports pagination, server-side sorting, searching, CSV export, row actions, bulk selection, inline editing, and New/Edit record management.

Administrators can configure object names, parent relationships, columns, page sizes, and actions directly from App Builder, making the component reusable across multiple Salesforce implementations.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Configurable Columns	JSON-driven column configuration with labels, types, sorting, and editing support.
Pagination	Supports 5, 10, 25, 50, and 100 record page sizes.
Server-Side Sorting	ORDER BY support with persistent sorting across pages.
Search	Debounced search filtering using SOQL LIKE queries.
Inline Editing	Edit records directly inside lightning-datatable.
Row Actions	View, Edit, Delete, and custom row actions.
CSV Export	Export visible records to CSV format.
Bulk Selection	Checkbox selection with event-based record handling.
New/Edit Modal	Record creation and editing using lightning-record-edit-form.

🏗 Architecture

App Builder / Parent Component
            │
            ▼
     relatedListView
            │
 ┌──────────┼──────────┐
 │          │          │
 ▼          ▼          ▼
Header   Datatable  Pagination
Actions   Search     Controls
 │          │          │
 └──────┬───┴──────┬───┘
        ▼          ▼
  Record Modal  Delete Modal
        │
        ▼
RelatedListController.cls
        │
 ┌──────┴─────────────┐
 │                    │
 ▼                    ▼
getRelatedRecords()  getTotalCount()
        │
        ▼
 Dynamic SOQL Queries

📁 Project Structure

force-app
└── main
    └── default
        ├── classes
        │   ├── RelatedListController.cls
        │   └── RelatedListControllerTest.cls
        │
        └── lwc
            └── relatedListView
                ├── relatedListView.html
                ├── relatedListView.js
                ├── relatedListView.css
                └── relatedListView.js-meta.xml

README.md

⚙️ Lightning App Builder Configuration

Property	Purpose
Object API Name	Target child object.
Parent Field API Name	Lookup relationship field.
Columns JSON	Dynamic datatable configuration.
Page Size	Records per page.
Enable Selection	Show row selection checkboxes.

🧩 Column Configuration Example

[
  {
    "label": "Contact Name",
    "fieldName": "Name",
    "type": "text",
    "sortable": true
  },
  {
    "label": "Email",
    "fieldName": "Email",
    "type": "email"
  },
  {
    "label": "Phone",
    "fieldName": "Phone",
    "type": "phone"
  }
]

💻 Component Usage Example

<c-related-list-view
    record-id={recordId}
    object-api-name="Contact"
    parent-field-api-name="AccountId"
    page-size="25"
    columns-json={columnConfig}>
</c-related-list-view>

🔍 Supported User Actions

• View Record
• Edit Record
• Delete Record
• Create New Record
• Refresh Data
• Search Records
• Export CSV
• Select Multiple Rows
• Inline Save

📤 CSV Export

The component can export currently visible records to CSV format while respecting configured columns and applied filters.

Header Actions
    │
    ▼
Export CSV
    │
    ▼
Generate Blob
    │
    ▼
Download File

🔒 Security Considerations

• Uses with sharing Apex classes.
• Supports Salesforce CRUD permissions.
• Supports Field-Level Security.
• Dynamic SOQL validation implemented.
• Safe handling of configurable properties.

🧪 Testing

• RelatedListControllerTest.cls included.
• Pagination testing.
• Sorting validation.
• Search functionality verification.
• CRUD operation testing.

🚀 Deployment

sf org login web -a myOrg

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

🎯 Benefits

• Eliminates custom related list development.
• Highly reusable across multiple objects.
• Admin-friendly configuration.
• Modern Lightning user experience.
• Improves productivity and maintainability.
• Enterprise-ready architecture.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The LWC Related List View component provides a complete replacement for traditional Salesforce related lists with advanced features such as search, pagination, inline editing, CSV export, row actions, and configurable columns. Its metadata-driven design makes it an ideal reusable solution for enterprise Salesforce applications.

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: Debug Log Viewer

📋 Debug Log Viewer for Salesforce LWC

View, filter, search, download, and manage Apex Debug Logs directly from Lightning Experience without opening Salesforce Setup.

📖 Project Overview

Debug Log Viewer is a reusable Salesforce Lightning Web Component that reads ApexLog records through the Salesforce Tooling API and displays them directly inside Lightning Experience.

Developers and administrators can inspect logs, search log contents, filter by event types, download log files, copy log content, and even bulk delete logs without navigating to Setup.

The solution uses Lightning Web Components, Apex, Tooling API integration, and Named Credentials to provide a modern debugging experience.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Debug Log Listing	View ApexLog records in a Lightning datatable.
Filter Panel	Filter by User Id, Operation, and Status.
Pagination	Load logs incrementally in batches.
Log Detail Viewer	Display full log content inside a dark-theme modal.
Category Filters	Filter USER_DEBUG, SOQL, DML, and other log events.
Search Within Logs	Quickly find keywords inside large log files.
Copy to Clipboard	Copy raw or filtered log output.
Download Logs	Save logs locally as .log files.
Bulk Delete	Delete multiple Apex logs simultaneously.
Toast Notifications	Success and error feedback for all operations.

🏗 Architecture

Lightning App / Utility Bar
│
├── debugLogViewer (Parent)
│
├── debugLogFilter (Child)
│
└── debugLogDetail (Child)
        │
        ▼
DebugLogViewerController.cls
        │
        ▼
Named Credential
        │
        ▼
Salesforce Tooling API
        │
        ├── ApexLog Query
        ├── Log Body Retrieval
        └── Bulk Delete Operations

📁 Project Structure

debug-log-viewer
│
├── force-app
│   └── main
│       └── default
│
├── lwc
│   ├── debugLogViewer
│   ├── debugLogFilter
│   └── debugLogDetail
│
├── classes
│   ├── DebugLogViewerController.cls
│   └── DebugLogViewerControllerTest.cls
│
├── namedCredentials
│   └── SalesforceToolingAPI
│
├── permissionsets
│   └── DebugLogViewer
│
└── README.md

⚙️ Core Components

Component	Purpose
debugLogViewer	Main orchestration component.
debugLogFilter	Filtering UI for logs.
debugLogDetail	Displays log body and search results.

🔎 Supported Filtering Options

• User Id
• Operation Name
• Status
• Date Sorting
• Event Type Categories
• Keyword Search

💻 Example Tooling API Query

SELECT Id,
       LogUser.Name,
       Operation,
       Status,
       DurationMilliseconds,
       LogLength,
       StartTime
FROM ApexLog
ORDER BY StartTime DESC
LIMIT 50

📂 Log Event Categories

USER_DEBUG

SOQL_EXECUTE_BEGIN

SOQL_EXECUTE_END

DML_BEGIN

DML_END

METHOD_ENTRY

METHOD_EXIT

EXCEPTION_THROWN

🚀 Deployment

sf org login web \
--instance-url https://test.salesforce.com

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

🔐 Prerequisites

• Salesforce CLI (sf)
• API Version 59+
• Sandbox or Developer Edition Org
• Connected App
• Named Credential
• Tooling API Access

🎯 Benefits

• No need to open Salesforce Setup.
• Faster debugging workflow.
• Centralized log management.
• Bulk deletion support.
• Developer-friendly user experience.
• Modern Lightning UI.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Debug Log Viewer modernizes the Salesforce debugging experience by bringing Apex log management directly into Lightning Experience. With filtering, searching, downloading, and bulk management capabilities, it significantly improves developer productivity and reduces dependency on Setup-based tools.

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.