LWC: Reusable Dynamic Tabs

🗂️ Dynamic Tabs – Reusable Salesforce LWC Component

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

📖 Project Overview

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

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

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

🔗 View Source Code ⬇ Download ZIP

✨ Features

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

🏗 Component Architecture

📁 Project Structure

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

⚙️ Public API

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

🔄 Component Workflow

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

⌨️ Keyboard Accessibility

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

🎨 Supported Variants

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

🚀 Deployment

sf org login web --alias myOrg

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

🎯 Business Use Cases

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

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

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

LWC: Reusable Horizontal Bar Chart

📊 Reusable Horizontal Bar Chart for Salesforce LWC

A modern, reusable Lightning Web Component that renders responsive horizontal bar charts with smooth animations, adaptive labels, click-to-filter functionality, and zero third-party JavaScript libraries.

📖 Project Overview

horizontalBarChart is a fully reusable Salesforce Lightning Web Component designed for dashboards, Home Pages, App Pages, and Experience Cloud sites.

The component accepts a simple collection of { id, label, value } objects and automatically renders an attractive horizontal bar chart using native HTML, CSS and Lightning Web Components.

Built without Chart.js, D3.js, or any external dependency, the component offers excellent performance, smooth animations, accessibility, responsive layouts, configurable colors, interactive filtering, and App Builder support.

🔗 View Source Code ⬇ Download ZIP

✨ Features

Feature	Description
Animated Entry	Bars animate smoothly from 0% to their calculated width whenever data changes.
Adaptive Labels	Automatically positions values inside or outside the bar based on available space.
Click-to-Filter	Clicking a bar selects it and fires a custom barclick event.
Toggle Selection	Click again to remove the active filter.
Clear Filter Button	Displays automatically whenever a filter is active.
External Selection	Parent components can control selection using the selectedId property.
Automatic Scaling	Calculates maximum value automatically or accepts a custom maxValue.
Large Number Formatting	Formats values such as 45K, 1.2M, etc.
Custom Colors	Supports reusable color palettes that cycle automatically.
Legend Support	Optional color legend for dashboard visualization.
Responsive Layout	Optimized for desktop, tablet and mobile devices.
Accessibility	Keyboard navigation, ARIA labels and screen-reader support.

🏗 Component Architecture

📁 Project Structure

horizontalBarChart/
│
├── horizontalBarChart.html
├── horizontalBarChart.js
├── horizontalBarChart.css
├── horizontalBarChart.js-meta.xml
└── README.md

⚙️ Public API

Property	Purpose
data	Array of { id, label, value } objects.
selectedId	Externally control selected bar.
maxValue	Override automatic scaling.
showLegend	Show or hide legend.
colors	Custom color palette.

📦 Expected Data Structure

[
  {
    id: "A",
    label: "Prospecting",
    value: 120
  },
  {
    id: "B",
    label: "Qualification",
    value: 85
  },
  {
    id: "C",
    label: "Closed Won",
    value: 42
  }
]

🔄 Event Flow

Load Data
    │
    ▼
Calculate Maximum
    │
    ▼
Render Horizontal Bars
    │
    ▼
Animate Width
    │
    ▼
User Clicks Bar
    │
    ▼
Dispatch "barclick"
    │
    ▼
Parent Dashboard Filters

🎨 Styling Features

• Salesforce Lightning Design System (SLDS) styling.
• Uses Lightning Design Tokens.
• Responsive layout.
• Animated transitions.
• Adaptive value labels.
• Optional legend.
• Empty state illustration.
• Theme-friendly custom CSS variables.

♿ Accessibility

• Keyboard accessible.
• ARIA-compliant buttons.
• Screen reader labels.
• role="button" support.
• aria-pressed state management.
• Focus indicators.

🚀 Deployment

sf org login web --alias myOrg

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

🎯 Ideal Business Use Cases

• Opportunity Stage Dashboard
• Lead Source Analytics
• Case Status Distribution
• Revenue Comparison
• Sales Team Performance
• Service Metrics
• Executive KPI Dashboards
• Experience Cloud Analytics
• Marketing Campaign Performance
• Custom Salesforce Reports

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Horizontal Bar Chart component provides an elegant, lightweight, and highly reusable solution for visualizing Salesforce data. Built entirely with Lightning Web Components and native web technologies, it offers smooth animations, adaptive labels, interactive filtering, responsive layouts, accessibility support, and App Builder compatibility—making it an excellent choice for modern Salesforce dashboards and analytics applications.

LWC: Reusable Donut / Pie Chart Component

🍩 Reusable Donut / Pie Chart Component for Salesforce LWC

A fully reusable SVG-based Lightning Web Component that renders beautiful, interactive Donut and Pie Charts using pure SVG with zero external JavaScript libraries.

📖 Project Overview

The Donut / Pie Chart Component is a reusable Lightning Web Component built entirely with native Salesforce technologies. It renders interactive charts using pure SVG, supports Apex-powered dynamic data as well as static datasets, and provides configurable legends, animated slices, hover tooltips, accessibility support, and responsive layouts.

Unlike third-party charting libraries, this solution requires zero external dependencies, making deployment simple while maintaining excellent performance and Lightning compatibility.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Pure SVG Rendering	No Canvas or third-party chart libraries required.
Donut & Pie Modes	Switch between Donut and Pie using a single property.
Animated Slices	Hovered slices expand while remaining slices fade.
Interactive Tooltips	Displays label, value, and percentage on hover.
Configurable Legend	Supports stacked and side-by-side layouts.
Dynamic Apex Data	Automatically loads data using Apex Wire.
Static Data Support	Accepts custom chart data from parent components.
Responsive Layout	Automatically adapts to desktop and mobile screens.
Accessibility	Keyboard navigation, ARIA labels and focus support.
Loading & Error States	Built-in loading, empty data and error handling.

🏗 Component Architecture

📁 Project Structure

force-app
└── main
    └── default
        ├── classes
        │   └── DonutChartController.cls
        │
        └── lwc
            └── donutChart
                ├── donutChart.html
                ├── donutChart.js
                ├── donutChart.css
                └── donutChart.js-meta.xml

⚙️ Public API Properties

Property	Purpose
title	Chart title displayed above the component.
chartType	Choose between donut or pie.
chartData	Static chart data supplied by parent LWC.
recordId	Automatically loads Apex data.
colorPalette	Custom array of chart colors.
showLegend	Display chart legend.
legendPosition	Stacked or Side-by-Side layout.
showCenterText	Display total value inside the donut.
valuePrefix / valueSuffix	Format displayed values.

💻 Usage Example

<c-donut-chart
    title="Revenue by Stage"
    chart-type="donut"
    show-legend
    legend-position="side-by-side"
    show-center-text
    center-label="Total"
    value-prefix="$"
    chart-data={opportunityData}>
</c-donut-chart>

📊 Supported Features

• Donut Charts
• Pie Charts
• Static Data
• Apex Wire Data
• Hover Animation
• Keyboard Navigation
• ARIA Accessibility
• Responsive Layout
• Custom Color Palette
• Legend Totals
• Loading State
• Error State
• Empty Data State

🎨 Customisation Options

✔ Custom Color Palette

✔ Legend Title

✔ Legend Position

✔ Center Label

✔ Value Prefix

✔ Value Suffix

✔ Label Field Mapping

✔ Value Field Mapping

✔ Donut / Pie Mode

♿ Accessibility

• Keyboard accessible slices.
• Tab navigation support.
• Meaningful ARIA labels.
• Screen reader friendly.
• High contrast compatible.
• Mobile responsive layout.

🚀 Deployment

sf org login web --alias myOrg

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

🎯 Business Use Cases

• Sales Pipeline Distribution
• Opportunity Stage Analysis
• Case Status Dashboard
• Lead Source Analytics
• Revenue Breakdown
• Account Segmentation
• Executive Dashboards
• Service Performance Reports
• Custom CRM Analytics

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Reusable Donut / Pie Chart Component provides a lightweight, modern, and highly configurable visualization solution for Salesforce Lightning applications. Built entirely with native SVG, Lightning Web Components, and Apex, it delivers interactive charts without relying on external JavaScript libraries, making it ideal for enterprise Salesforce projects that require performance, accessibility, and easy customization.