Skip to main content

SLDS

Explore practical guides and implementation patterns for this topic.

Posts

Lightning Web Components

Drag-and-Drop Tables in Visualforce With DataTables

Standard Salesforce list views and standard components can often feel rigid. When business users want to reorder columns on the fly or hide unnecessary fields to focus on specific data, standard Visualforce tables fall short. To solve this, developers can combine the robust data-handling of the jQuery DataTables plugin with the modern look of the Salesforce Lightning Design System (SLDS) . In plain words: You can add highly interactive capabilities to standard Salesforce tables—such as drag-and-drop column reordering, quick search, and toggleable column visibility—by injecting the jQuery DataTables library into your Visualforce pages and styling it with SLDS.
Read article
Topic LWC
Lightning Web Components

Top Essential Salesforce Developer Resources: LWC, SLDS, Tools & Documentation Guide

Navigating the massive Salesforce developer ecosystem can be incredibly overwhelming. With official tools, code repositories, UI design libraries, and API documentation scattered across a dozen different domains, it is easy to get lost. Having a centralized, up-to-date directory of official portals will save you countless hours of Googling and ensure you are building on modern standards. In plain words: This guide acts as your ultimate bookmark folder. It organizes the absolute essential Salesforce developer portals—covering everything from Lightning Web Components (LWC) and Data Cloud to IDE setups and architectural best practices—so you can find what you need instantly.
Read article
Lightning Web Components

Use SLDS Icons in Visualforce Pages: Code Example

Even if you are working on legacy Visualforce pages, you do not have to settle for the outdated Classic look. By integrating the Salesforce Lightning Design System (SLDS) , you can give your Visualforce pages the modern look and feel of Lightning Experience—including standard SLDS SVG icons, card components, and grid layouts. In plain words: The <apex:slds /> tag imports Salesforce's official Lightning Design System CSS directly into Visualforce. Wrapping your content inside an <html> tag with XML namespaces and an slds-scope container allows you to render native Lightning UI elements like SVG icons and cards seamlessly.
Read article
Apex Development

How to Add and Remove Multiple Parent and Child Records Dynamically in Salesforce

While Lightning Web Components (LWC) are the modern standard for Salesforce UI development, thousands of organizations still maintain and build upon complex Visualforce pages for internal data-entry tools. One of the most common—and challenging—requirements is creating a single, unified screen where users can dynamically add multiple parent records (like Accounts) and multiple child records (like Contacts) at the same time before hitting save. In plain words: To let users click an "Add Row" button for both parent and child records on a single Visualforce page, you must use "nested wrapper classes" in your Apex controller. These wrappers tie the records together in the server's memory, so when the user adds or deletes a specific row, Salesforce knows exactly which data to update without losing their inputs.
Read article
Topic Apex
Apex Development

Build a Project Metadata & Schema Audit Dashboard in Salesforce (Apex & Visualforce)

In plain words: A Project Component Dashboard gives developers and release managers a single-screen inventory of everything inside a project or namespace—including Custom Objects, Permission Sets, Apex Classes, Visualforce Pages, Triggers, and Entity Relationships—without navigating through dozens of Setup menus. During release preparation, package maintenance, or technical documentation audits, development teams need a fast way to map all components associated with a specific project or managed namespace. By combining Dynamic Apex Schema Describe with SOQL queries against system metadata tables ( ApexClass , ApexPage , EntityDefinition , and ObjectPermissions ), you can render a real-time inventory dashboard styled with the Salesforce Lightning Design System (SLDS).
Read article
Topic LWC
Lightning Web Components

Salesforce LWC Explained: Features, Benefits & Quick-Start Developer Guide

In plain words: Salesforce Lightning Web Components (LWC) is a modern user interface framework built directly on native browser web standards (HTML5, modern JavaScript, and Custom Elements). It allows developers to create lightweight, fast-loading, and reusable components on the Salesforce platform with minimal framework overhead. Building responsive, enterprise-grade applications in Salesforce requires a front-end framework that is both fast and easy to maintain. By aligning directly with modern W3C Web Components standards, Lightning Web Components delivers exceptional execution speed while maintaining deep, native integration with Salesforce data, security models, and design systems.
Read article
Topic LWC
Lightning Web Components

How to Build a Custom Image Slider Carousel in Salesforce LWC

In plain words: An Image Slider Carousel in LWC is an interactive UI component that displays a sequence of images or banners within a single contained space. Users navigate back and forth between slides using controls, while smooth CSS transforms shift the visible slide into view. Displaying rich media, product banners, or announcement graphics is a frequent requirement in custom Lightning apps, Experience Cloud portals, and dashboard homepages. While Salesforce offers the standard <lightning-carousel> base component, building a custom slider provides complete control over animation speed, transitions, custom navigation indicators, and responsive layouts.
Read article
Topic LWC
Lightning Web Components

Title: How to Add Icons Inside Input and Output Fields in Salesforce LWC

In plain words: Adding icons to input and output fields in LWC gives users clear visual cues about what data a field expects or displays. While standard record forms follow default layouts, custom LWC markup lets you place Salesforce Lightning Design System (SLDS) utility icons directly inside field containers, labels, or alongside read-only output values. Standard Salesforce record page layouts do not always fit bespoke business requirements, such as custom search bars, multi-step wizards, or interactive calculation panels. Building custom form elements in Lightning Web Components (LWC) with integrated icons enhances visual hierarchy, speeds up data entry, and maintains full alignment with the Salesforce Lightning Design System (SLDS).
Read article
Apex Component Frontend Design Lightning Design System Salesforce SLDS UI Development visualforce

How to Build a Dynamic SLDS Path Component in Salesforce Visualforce

Showing progress helps users see where a record stands at a glance. Lightning record pages have the standard Path component, but custom Visualforce pages don't get it for free. With the Salesforce Lightning Design System (SLDS) , you can build two kinds of progress indicators in Visualforce that match the Lightning look: a progress bar and a path . In plain words: A progress bar is a horizontal meter that fills from 0% to 100% as a record moves forward. A path is a row of chevrons that shows each stage by name (like Draft → Submitted → In Review → Approved ) and marks which stages are done, which one is current, and which are still ahead. Both read the record's status field and update on their own.
Read article
Apex Development

Build a Custom Generic Field History Tracking Component in Salesforce Visualforce

Field history tracking helps you meet compliance needs and see how a record changed over time. The standard History related list works, but it's hard to filter or reshape. A custom Lightning Web Component (LWC) lets you show old and new values your way, filter by field, and reuse the same component on any object's record page. In plain words: This component reads the ID of the record you're viewing, works out which history object to query (like AccountHistory or Invoice__History ), turns field API names into friendly labels, and shows a clean audit table: which field changed, the old value, the new value, who changed it, and when. One component works for every object.
Read article