lwc - Multi-Step Wizard

🧭 Multi-Step Wizard – Reusable Salesforce LWC

A reusable, slot-based Lightning Web Component that simplifies building multi-step forms with progress indicators, validation, navigation controls, review pages, and an imperative API—all using native Salesforce Lightning Web Components.

📖 Project Overview

Multi-Step Wizard is a production-ready Lightning Web Component that provides a complete wizard framework for Salesforce applications. Instead of building step navigation and validation logic repeatedly, developers simply define the steps and provide their own form fields while the component manages the workflow.

The wizard is completely domain-agnostic, making it suitable for any business process including record creation, onboarding, registration forms, approval workflows, surveys, checkout experiences, and guided configuration screens.

Built using native Lightning Web Components, the solution includes configurable progress indicators, automatic per-step validation, review pages, reusable step wrappers, and a clean JavaScript API for complete programmatic control.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Progress Indicator	Supports both Base (numbered) and Path (chevron) progress styles.
Step Validation	Automatically validates inputs exposing reportValidity() before advancing.
Back & Next Navigation	Built-in Previous, Next and Finish buttons.
Review Step	Create a final confirmation page before submission.
Slot-Based Design	Embed any Lightning components or HTML inside wizard steps.
Imperative API	Includes next(), previous(), goToStep(), reset() and reportValidity().
Custom Events	Dispatches stepchange and complete events.
Reusable	Works with any Salesforce object or business process.

🏗 Component Architecture

📁 Project Structure

force-app/main/default/
│
├── classes
│   ├── WizardController.cls
│   └── WizardControllerTest.cls
│
└── lwc
    ├── multiStepWizard
    ├── wizardStep
    └── wizardDemo

⚙️ Component Attributes

Attribute	Purpose
progress-type	Choose base or path progress indicator.
hide-progress-indicator	Hide the step indicator.
hide-footer	Hide built-in navigation buttons.
allow-step-navigation	Allow users to revisit completed steps.
previous-label	Custom Previous button text.
next-label	Custom Next button text.
finish-label	Custom Finish button text.

🛠 Imperative API

• next() — Validate current step and move forward.
• previous() — Navigate to the previous step.
• goToStep(name) — Jump directly to a named step.
• reset() — Reset the wizard to the first step.
• reportValidity() — Trigger validation for the active step.

📡 Events

Event	Description
stepchange	Raised whenever the active wizard step changes.
complete	Raised after the user finishes the final step.

🔄 Wizard Flow

Start Wizard
      │
      ▼
Step 1
      │
Validate
      ▼
Step 2
      │
Validate
      ▼
Step 3
      │
      ▼
Review
      │
      ▼
Complete Event
      │
      ▼
Save Business Data

🎯 Business Use Cases

• Customer Registration
• Lead Qualification
• Contact Creation
• Employee Onboarding
• Insurance Applications
• Loan Processing
• Case Intake Forms
• Checkout & Payment Flows
• Approval Processes
• Survey Applications

🚀 Deployment

sf org login web --alias myOrg

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

sf apex run test \
--class-names WizardControllerTest

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Multi-Step Wizard provides a clean, reusable foundation for creating guided user experiences in Salesforce. With configurable progress indicators, automatic validation, slot-based content, review screens, an imperative JavaScript API, and custom events, it enables developers to build scalable wizard-driven applications while keeping business logic separate from navigation and presentation.

lwc - Paginated Data Table

📋 Paginated Data Table – Reusable Salesforce LWC

A reusable Lightning Web Component built on lightning-datatable that adds server-side sorting, pagination controls, row selection, loading states, and complete backend independence.

📖 Project Overview

Paginated Data Table is a fully controlled Salesforce Lightning Web Component that extends the standard lightning-datatable with enterprise-ready pagination and sorting capabilities.

Unlike traditional datatable implementations, this component never performs data retrieval itself. Instead, it simply renders the current page of data and communicates user actions back to the parent component using custom events. This makes it reusable with Apex, REST APIs, GraphQL services, wired adapters, or even static datasets.

The repository also includes a complete demo implementation powered by Apex using secure SOQL queries with WITH SECURITY_ENFORCED.

🔗 View Source Code ⬇ Download ZIP

✨ Features

Feature	Description
Server-side Sorting	Fires sort events instead of sorting locally, allowing Apex or external services to perform sorting.
Pagination Controls	First, Previous, Next, Last navigation with configurable page size.
Row Selection	Supports standard lightning-datatable row selection events.
Row Actions	Fully compatible with Edit, Delete and custom row action menus.
Loading State	Built-in spinner overlay while data is loading.
Error Handling	Displays configurable error banners for backend failures.
Empty State	Shows custom messages when no records are available.
Imperative API	Provides getSelectedRows() for parent components.
Backend Agnostic	Works with Apex, REST APIs, GraphQL or static arrays.

🏗 Component Architecture

📁 Project Structure

force-app
│
├── classes
│   ├── PaginatedTableController.cls
│   └── PaginatedTableControllerTest.cls
│
├── lwc
│   ├── paginatedDataTable
│   └── paginatedDataTableDemo
│
└── README.md

⚙️ Public API

Property	Purpose
columns	Column configuration for the datatable.
data	Current page records.
totalRecords	Total number of available records.
pageSize	Records displayed per page.
currentPage	Current active page.
sortedBy	Current sorted field.
sortedDirection	Ascending or Descending order.
isLoading	Displays loading spinner.

🔄 User Workflow

Load Page
    │
    ▼
Parent Fetches Records
    │
    ▼
Render Current Page
    │
    ▼
User Sorts Column
    │
    ▼
Sort Event Fired
    │
    ▼
Parent Retrieves Data
    │
    ▼
Refresh Table

📡 Supported Events

• sort — User changes column sorting.
• pagechange — User navigates between pages.
• rowselection — Selected rows change.
• rowaction — Standard row actions.

🎯 Business Use Cases

• Large Contact Lists
• Opportunity Management
• Account Dashboards
• Service Case Management
• Lead Administration
• Experience Cloud Data Tables
• External REST Data
• Enterprise Reporting Dashboards

🔒 Security

• Supports Salesforce CRUD/FLS.
• Uses WITH SECURITY_ENFORCED in Apex demo.
• Backend-independent architecture.
• Compatible with enterprise security best practices.

🚀 Deployment

sf org login web --alias my-org

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

sf apex run test \
--class-names PaginatedTableControllerTest

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Paginated Data Table is a lightweight, reusable, and enterprise-ready Lightning Web Component that extends the standard Salesforce datatable with server-side pagination, sorting, row selection, and configurable states. By separating presentation from data retrieval, it can be seamlessly integrated with Apex controllers, REST services, GraphQL APIs, or any custom backend while remaining highly reusable across Salesforce applications.

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.