Thursday, June 25, 2026

LWC: Post Booking Portal

🎫 Salesforce Post Booking Portal

A complete post-booking management solution built on Salesforce that empowers customers to manage reservations, modify bookings, download invoices, request cancellations, and track booking history through a modern self-service portal.

📖 Project Overview

Salesforce Post Booking Portal extends the customer journey beyond the initial reservation process by providing a centralized self-service experience for managing existing bookings.

Customers can view upcoming reservations, update booking details, reschedule appointments, request cancellations, download invoices, track payment history, and receive automated notifications.

Built using Salesforce Lightning Web Components (LWC), Apex, Experience Cloud, Flows, Platform Events, and Custom Metadata, the solution delivers a scalable and enterprise-ready booking management platform.

🏗 Solution Architecture

Post Booking Portal Solution Architecture

✨ Key Features

Module Capabilities
Booking Dashboard View active, upcoming, completed, and cancelled bookings.
Booking Management Reschedule, modify, upgrade, or cancel reservations.
Invoice Center Download invoices, receipts, and payment confirmations.
Payment History Track completed and pending payments.
Notifications Email, SMS, and in-app booking updates.
Support Requests Raise issues and customer service requests.

🔄 Post Booking Journey

Booking Created
      │
      ▼
Confirmation Sent
      │
      ▼
Customer Portal Login
      │
      ▼
View Booking Details
      │
 ┌────┼─────┬─────┐
 ▼    ▼     ▼     ▼
Edit  Pay  Download Cancel
      │
      ▼
Notifications Triggered
      │
      ▼
Booking Updated

📁 Project Structure

force-app/main/default

├── classes
│   ├── PostBookingController.cls
│   ├── PaymentHistoryController.cls
│   ├── InvoiceController.cls
│   └── NotificationController.cls
│
├── lwc
│   ├── bookingDashboard
│   ├── bookingDetails
│   ├── bookingReschedule
│   ├── invoiceCenter
│   ├── paymentHistory
│   └── supportRequestPanel
│
├── flows
│
├── platformEvents
│
└── customMetadata

💻 LWC Components

Component Purpose
bookingDashboard Displays all customer bookings.
bookingDetails Shows booking information and status.
bookingReschedule Handles appointment or reservation changes.
invoiceCenter Invoice download and payment receipts.
paymentHistory Displays transaction history.
supportRequestPanel Customer support and issue management.

📊 Dashboard Widgets

  • Upcoming Bookings
  • Completed Reservations
  • Pending Payments
  • Recent Transactions
  • Cancellation Requests
  • Support Tickets
  • Booking Statistics
  • Customer Notifications

💳 Payment & Invoice Management

Booking
   │
   ▼
Payment Record
   │
   ▼
Invoice Generation
   │
   ▼
PDF Receipt
   │
   ▼
Email Delivery

📢 Notification Framework

  • Booking Modification Alerts
  • Cancellation Confirmations
  • Reschedule Notifications
  • Payment Success Messages
  • Refund Updates
  • Reminder Notifications
  • Support Ticket Responses

🔐 Security Features

Security Layer Implementation
Authentication Experience Cloud Login & SSO.
Authorization Role-based access control.
Data Security CRUD/FLS enforcement.
Apex Security with sharing controllers.

🚀 Deployment

sf org login web --alias booking-portal

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

sf apex run test

🎯 Business Benefits

  • Reduces customer support workload.
  • Provides self-service booking management.
  • Improves customer satisfaction.
  • Automates post-booking communication.
  • Centralizes invoices and payment history.
  • Scales easily with Experience Cloud.
  • Enhances operational efficiency.

📌 Conclusion

Salesforce Post Booking Portal provides a comprehensive self-service experience for customers after a reservation has been completed. By combining Lightning Web Components, Apex, Experience Cloud, Flows, and Platform Events, organizations can deliver a seamless post-booking journey that improves customer engagement, reduces support costs, and streamlines booking operations.

Sunday, June 21, 2026

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.

🏗 Solution Architecture

Booking Portal Full Architecture Diagram

✨ 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

📌 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.

Saturday, June 20, 2026

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.

Mass Update Panel for Salesforce LWC

✨ 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.

📌 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.

Friday, June 19, 2026

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.

Reusable Related List View

✨ 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.

📌 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.

Thursday, June 18, 2026

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.

Salesforce-LWC-Accordion-Architecture-Diagram

Salesforce-LWC-Accordion

✨ 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.

📌 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.

Wednesday, June 17, 2026

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.

Debug Log Viewer Architecture

✨ 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.

📌 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.

Tuesday, June 16, 2026

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.

Reusable Modal

✨ 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
MediumSLDS default modal width
Large~90vw width
Full100vw × 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.

📌 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.