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.