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.

LWC: Apex Error Boundary

Apex Error Boundary

Centralized error handling pattern for Lightning Web Components with retry support, error categorization, and consistent user experience.

📖 Project Overview

Apex Error Boundary is a reusable Lightning Web Component pattern designed to centralize client-side error handling across Salesforce applications.

Instead of implementing duplicate error handling logic in every component, child LWCs simply dispatch a standard apexerror event when a wire adapter, imperative Apex call, or server operation fails.

The boundary component captures the error, categorizes it, displays a user-friendly UI, and optionally allows retrying failed operations.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Centralized Error Handling	Single component handles all Apex and Wire errors.
Reusable Architecture	Drop into any Salesforce project.
Retry Support	Allow users to retry failed operations.
Technical Details Mode	Optional expandable debugging information.
Error Categorization	Converts raw Salesforce errors into user-friendly messages.
Event Driven	Uses custom events for loose coupling.

🏗 Architecture Overview

Parent Page
│
└── c-apex-error-boundary
        │
        ▼
    Child Components
        │
        ├── @wire calls
        ├── Imperative Apex
        └── DML Operations
                │
                ▼
dispatchEvent('apexerror')
                │
                ▼
Boundary Captures Error
                │
                ▼
Error Classification
                │
                ▼
Friendly Error UI
                │
                ▼
Retry / Dismiss

📁 Repository Structure

apexErrorBoundary
│
├── classes
│   └── ExampleApexController.cls
│
├── lwc
│   ├── apexErrorBoundary
│   ├── apexErrorUtils
│   ├── exampleApexChild
│   └── accountRecordPage
│
├── staticresources
├── permissionsets
└── README.md

⚙️ Apex Controller Example

@AuraEnabled(cacheable=true)
public static Account getAccountDetails(Id accountId) {
    try {
        return [
            SELECT Id, Name, Industry
            FROM Account
            WHERE Id = :accountId
            LIMIT 1
        ];
    } catch (QueryException qe) {
        throw new AuraHandledException(
            'The account record could not be retrieved.'
        );
    }
}

💻 Boundary Component Highlights

@api customTitle;
@api fallbackMessage;
@api maxRetries = 3;
@api showTechnicalDetails = false;
@api allowDismiss = false;

@track showError = false;
@track showChild = true;
@track isRetrying = false;

🔄 Runtime Error Flow

1. Child component executes Wire or Apex call.
2. Failure occurs.
3. Component dispatches apexerror event.
4. Error Boundary intercepts event.
5. Error is parsed and categorized.
6. User-friendly error message is displayed.
7. User can retry the operation.

🧩 Usage Example

<c-apex-error-boundary custom-title="Account Information" max-retries="3" show-technical-details="true">
<c-example-apex-child record-id="{recordId}">
</c-example-apex-child>
</c-apex-error-boundary>

📂 Error Categories

• Validation Errors
• DML Exceptions
• SOQL Query Failures
• Permission Errors
• Network Errors
• Unknown Exceptions

🚀 Benefits

• Consistent UX across Salesforce applications.
• Reduces duplicate error handling code.
• Improves maintainability.
• Simplifies debugging and support.
• Provides enterprise-grade error management.

📦 Deployment

sf org login web -a myOrg

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

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Apex Error Boundary provides a robust, reusable, and scalable solution for handling Salesforce Apex and Wire errors in Lightning Web Components. By centralizing error management, teams can improve user experience, reduce duplicate code, and simplify long-term maintenance.

LWC: Dynamic Form Builder

Dynamic Form Builder

Build and render forms dynamically using Lightning Web Components and Custom Metadata — no code changes required.

📖 Project Overview

Dynamic Form Builder is a reusable Salesforce Lightning Web Component that renders forms at runtime using either:

• Custom Metadata configuration
• JSON configuration

Administrators can create, modify, reorder, validate, and manage forms without redeploying code.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Dynamic Runtime Forms	Generate forms without editing source code.
Custom Metadata Driven	Store configuration inside Salesforce metadata.
JSON Support	Render forms from inline JSON payloads.
Reusable Components	Parent orchestrator + child renderer architecture.
Dynamic Submission	Insert records using Apex Schema API.

🏗 Architecture

dynamicFormBuilder
│
├─ Loads configuration
├─ Manages validation
├─ Handles submission
├─ Emits events
│
└── dynamicFormField
      ├─ Renders correct component
      └─ Reports validity
Apex Controller
│
├─ getFormConfig()
└─ submitFormData()
Custom Metadata
│
├─ FormConfig__mdt
└─ FormFieldConfig__mdt

📁 Project Structure

dynamic-form-builder
│
├── force-app
│   └── main
│       └── default
│
├── classes
│   ├── DynamicFormBuilderController.cls
│   └── DynamicFormBuilderControllerTest.cls
│
├── lwc
│   ├── dynamicFormBuilder
│   └── dynamicFormField
│
├── customMetadata
│   ├── FormConfig
│   └── FormFieldConfig
│
└── README.md

⚙️ Supported Field Types

Text

Email

Phone

Number

Currency

Percent

Date

DateTime

Checkbox

Picklist

Lookup

Textarea

💻 Example JSON Configuration

{
"title":"Contact Intake Form",
"columns":2,
"fields":[
{
"fieldName":"LastName",
"label":"Last Name",
"type":"text",
"required":true
},
{
"fieldName":"Department",
"type":"picklist"
},
{
"fieldName":"AccountId",
"type":"lookup",
"lookupObject":"Account"
}
]
}

🚀 Quick Start

1. Deploy project to Salesforce org.
2. Open Lightning App Builder.
3. Add Dynamic Form Builder component.
4. Set Form Config Metadata Name.
5. Activate page.
6. Start rendering forms dynamically.

🧩 LWC Usage Example

<c-dynamic-form-builder
form-config-metadata-name="Contact_Intake_Form" 
target-object-api-name="Contact">
</c-dynamic-form-builder>

🔐 Benefits

• Metadata-driven UI
• No redeployment for layout changes
• Reusable architecture
• Admin-friendly configuration
• Scalable enterprise implementation

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Dynamic Form Builder provides a flexible way to build configurable forms in Salesforce using Lightning Web Components and Custom Metadata. It reduces maintenance effort and allows teams to manage form behavior directly from configuration rather than source code.

LWC: Salesforce Field Set Renderer

Salesforce Field Set Renderer

Dynamically render Salesforce Field Sets in Lightning Web Components without hardcoding field names.

📖 Overview

Field Set Renderer is a reusable Salesforce Lightning Web Component that reads a named Field Set through Apex and dynamically renders fields at runtime. This approach eliminates hardcoded field references and allows administrators to control the UI simply by updating the Field Set configuration.

🔗 View Source Code ⬇ Download ZIP

✨ Features

Feature	Description
Zero Hardcoded Fields	Field list is driven entirely by Field Set metadata.
View & Edit Modes	Supports both lightning-record-view-form and lightning-record-edit-form.
FLS Aware	Automatically respects field-level security permissions.
Required Validation	Supports Field Set required and database required fields.
Configurable Layout	Supports one-column and two-column layouts.
Lightning App Builder Ready	Fully configurable through App Builder properties.

🏗 Architecture

FieldSetService.cls
        │
        ▼
Reads FieldSet Metadata
        │
        ▼
fieldSetRenderer (Reusable LWC)
        │
        ▼
View Mode / Edit Mode
        │
        ▼
Dynamic Salesforce Record Forms

📁 Project Structure

salesforce-fieldset-renderer
│
├── force-app
│   └── main
│       └── default
│           ├── classes
│           │   ├── FieldSetService.cls
│           │   └── FieldSetServiceTest.cls
│           │
│           └── lwc
│               ├── fieldSetRenderer
│               └── fieldSetRendererDemo
│
├── README.md
└── sfdx-project.json

⚙️ Apex Service Example

public with sharing class FieldSetService {

    public class FieldSetField {
        @AuraEnabled public String label;
        @AuraEnabled public String apiName;
        @AuraEnabled public String fieldType;
        @AuraEnabled public Boolean required;
        @AuraEnabled public Boolean editable;
    }

    @AuraEnabled(cacheable=true)
    public static List<FieldSetField> getFieldSetFields(
        String objectApiName,
        String fieldSetName
    ) {
        // Reads FieldSet metadata dynamically
    }
}

💻 LWC Usage Example

<c-field-set-renderer
    record-id={recordId}
    object-api-name="Contact"
    field-set-name="Contact_Overview"
    mode="view"
    columns="2"
    onrecordsave={handleSave}
    oncancel={handleCancel}>
</c-field-set-renderer>

🎯 Public API

Property	Description
recordId	Salesforce record Id.
objectApiName	API name of SObject.
fieldSetName	Developer name of Field Set.
mode	View or Edit mode.
columns	1 or 2 column layout.

🚀 Deployment

sf org login web -a myOrg

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

🔒 Security & Permissions

• Uses with sharing to respect record-level security.
• Respects Field-Level Security (FLS).
• Editable fields are automatically determined using Salesforce permissions.
• Supports required field enforcement.

✅ Benefits

• Reduces maintenance effort.
• Admin-controlled UI configuration.
• Reusable across multiple Salesforce objects.
• Improves scalability and flexibility.
• Ideal for dynamic forms and metadata-driven applications.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Salesforce Field Set Renderer is a powerful reusable Lightning Web Component that dynamically renders fields based on Field Set metadata. By eliminating hardcoded field references, it enables administrators to manage layouts without code changes while maintaining security, flexibility, and scalability.

LWC: Custom Object Creator

This Salesforce project demonstrates how to create custom objects dynamically using Lightning Web Components (LWC) and Apex. It helps developers understand metadata-driven development in Salesforce.

✨ Key Features

• Create Custom Object using LWC UI
• Apex integration for metadata operations
• Reusable architecture
• Salesforce best practices implementation

📁 Project Structure

lwc-custom-object-creator/
│
├── force-app/
│   └── main/
│       └── default/
│           ├── classes/
│           │   └── CustomObjectController.cls
│           └── lwc/
│               └── customObjectCreator/
│
├── README.md
└── sfdx-project.json
    

⚙️ Apex Controller

public with sharing class CustomObjectController {

    @AuraEnabled
    public static String createCustomObject(String objectName) {
        // Logic to create custom object dynamically
        // Metadata API / Tooling API usage required
        return 'Custom Object Created: ' + objectName;
    }
}
    

💻 LWC Component Example

HTML

<template>
    <lightning-card title="Custom Object Creator">
        <lightning-input label="Object Name" onchange={handleChange}></lightning-input>
        <lightning-button label="Create Object" onclick={handleCreate}></lightning-button>
    </lightning-card>
</template>
    

JavaScript

import { LightningElement } from 'lwc';
import createCustomObject from '@salesforce/apex/CustomObjectController.createCustomObject';

export default class CustomObjectCreator extends LightningElement {

    objectName;

    handleChange(event) {
        this.objectName = event.target.value;
    }

    handleCreate() {
        createCustomObject({ objectName: this.objectName })
            .then(result => {
                console.log(result);
            })
            .catch(error => {
                console.error(error);
            });
    }
}
    

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

This project demonstrates how Salesforce developers can use LWC and Apex to build metadata-driven solutions. It is useful for learning dynamic object creation, platform APIs, and scalable architecture patterns.