Frontend Development

💬 In plain words: Every Lightning Web Component (LWC) goes through the same life stages. It gets created, added to the page, drawn on the screen, and later removed. LWC gives you a lifecycle hook for each stage. constructor = born. connectedCallback = moved into the page. renderedCallback = painted on the screen. disconnectedCallback = removed from the page. Always put your code in the earliest hook that has what your code needs. Put code in the wrong hook and you get bugs that are hard to track down: values that show up as undefined , a browser tab that freezes, or listeners that pile up every time the component loads again. This post walks through each hook in the order it runs, shows what belongs in each one, and covers the mistakes that come up most in real projects and interviews.

💬 In plain words: Every Lightning Web Component (LWC) lives inside its own sealed room called the Shadow DOM. Outside code or CSS cannot reach in and break it. Reactivity controls how the UI updates when data changes. A component uses @api to accept data from a parent, @wire to stream data directly from Salesforce, and @track only when it needs to detect changes buried deeply inside complex objects or arrays.

In plain words: Lightning Web Components (LWC) is Salesforce’s modern UI framework that relies on standard HTML, CSS, and JavaScript. To build your first component, install the Salesforce CLI, log into your org, and generate a component using sf lightning generate component --type lwc . Customize the HTML and JavaScript, make sure isExposed is true in your XML configuration, deploy it with sf project deploy start , and drag it into your Lightning App Builder page. Creating your first Lightning Web Component (LWC) might sound daunting, but once your development environment is set up, it takes less than 20 minutes. In this tutorial, we will build a simple "Hello World" card. You will learn how to accept user input, update the screen instantly without server calls, and make your component visible in Salesforce. Let's dive in!

In plain words: A Set is a collection of unique values used to remove duplicates, while a Map is a collection of key-value pairs used for fast data lookups. Because Salesforce Lightning Web Components (LWC) are built on modern JavaScript (ES6), you can use native Sets and Maps directly in your controller files to write cleaner, more efficient code. When manipulating data in Salesforce Lightning Web Components (LWC), developers often rely heavily on standard Arrays and Objects. However, modern JavaScript provides two highly optimized data structures that can make your code significantly better: Sets and Maps . Whether you need to extract a list of unique Record IDs or map Account names to their respective revenue numbers, knowing how to leverage Sets and Maps will instantly elevate your LWC development skills.

In plain words: "Component composition" is just a fancy term for building a large webpage by snapping smaller, reusable pieces (components) together like Lego bricks. In Salesforce LWC, there are two main ways a parent component can give information to a child component: passing raw HTML layout using Slots , or passing actual data values using Properties . In Salesforce Lightning Web Components (LWC), building reusable user interfaces requires a solid understanding of how components interact. If you want a parent component to control what happens inside a child component, you have to choose the right tool for the job. Let's explore the two primary methods for composing components—HTML Slots and Data Properties—and look at the code required to implement them.

In plain words: When you display a list of records using the <lightning-datatable> component in Salesforce, users can click checkboxes to select specific rows. But what if you want certain checkboxes to be checked automatically the moment the table loads? To do this, you just need to pass an array of Record IDs to the datatable's selected-rows property. The lightning-datatable is one of the most heavily used base components in Lightning Web Components (LWC). While rendering data is straightforward, handling default row selection requires a bit of dynamic logic. In this guide, we will build a custom datatable that fetches data and automatically pre-checks specific rows based on your business criteria.

In plain words: A dynamic vertical navigation bar is a side menu where the links (like "Home", "About", and "Contact") are not hardcoded into the HTML. Instead, they are defined in JavaScript as an array. This makes it incredibly easy to add, remove, or change menu items later without having to rewrite your HTML layout. In modern web applications, a clean, intuitive navigation menu is essential. By building a vertical navigation bar using Lightning Web Components (LWC), you can create a reusable sidebar menu that perfectly matches your company's branding. In this tutorial, we will build a dynamic sidebar menu using the LWC for:each directive to loop through a list of JavaScript objects.

In plain words: The standard Salesforce <lightning-datatable> has a major quirk: if a user selects a few rows, types a word into a search bar to filter the list, and then clears the search, their original selections disappear! To fix this, you must write custom JavaScript to temporarily store the IDs of selected rows that are "hidden" by the filter, and merge them back when the filter is cleared. Displaying data in a tabular format is a standard requirement for almost any enterprise application. In Salesforce Lightning Web Components (LWC), the lightning-datatable component makes this easy. However, combining row selection with dynamic front-end filtering introduces a frustrating state-management problem. Because filtering replaces the data bound to the datatable, any previously selected records that no longer match the search term are "forgotten" by the component. Let's walk through how to build a smart, stateful datatable that rem...

In plain words: Conditional rendering is how you tell your webpage to show or hide specific elements (like text, images, or buttons) based on a true/false rule. In Salesforce LWC, instead of writing clunky JavaScript to manually hide a box, you just wrap the HTML in a special <template lwc:if={variable}> tag. If the variable is true, the user sees it. If it is false, the browser completely removes it. Building dynamic user interfaces requires components that adapt to user input. If a user hasn't filled out a form, you might want to hide the "Submit" button. If a server request fails, you want an error message to suddenly appear. In Lightning Web Components (LWC), we handle this using conditional rendering directives. In this tutorial, we will build a simple component that toggles a message block on and off at the click of a button. Developer Trap: The Legacy if:true Directive If you look at older Salesforce tutorials, you will se...

In plain words: When building Salesforce components, you often need to show a different layout for mobile users than you do for desktop users. Instead of writing custom JavaScript to calculate screen width, Salesforce provides a built-in module called @salesforce/client/formFactor . This module automatically tells your component if the user is on a phone, tablet, or desktop, so you can adjust the UI instantly. In today's ecosystem, your users will access Salesforce from massive desktop monitors, tablets out in the field, and smartphones on the train. Building user-friendly and highly responsive interfaces is no longer optional—it is a requirement. Many developers coming from a standard web development background try to handle this in Lightning Web Components (LWC) by using traditional browser properties like window.innerWidth . Let's look at why that is a mistake in Salesforce, and how to do it the official way. Developer Trap: Avoid window.innerW...

In plain words: A multi-select lookup allows users to search the Salesforce database and select multiple records at once, displaying them as removable visual "pills." While Salesforce provides a standard lightning-record-picker for single records, it does not currently have a native component for multi-select lookups. To solve this, developers must build a custom Lightning Web Component (LWC) that combines a search input, an Apex controller for secure database querying, and pill containers to manage the selected data. A standard lookup field is great when you only need one record. But what happens when a sales rep needs to tag five Contacts on a single meeting? Or link multiple Accounts to a marketing campaign? Standard fields fall short. This guide will show you exactly how to pick the right UI tool for the job. Then, we will walk through building a reusable, highly optimized multi-select lookup in LWC. It includes modern Apex ...

In plain words: When building modern web applications, you often need to talk to third-party services—like checking if a phone number is valid, looking up weather data, or processing payments via an external API. In Salesforce Lightning Web Components (LWC), because your code runs directly in the browser, you can use the standard JavaScript fetch() method to talk directly to external web services without needing to write backend Apex controller code! Traditionally in Salesforce, if you needed to make an HTTP request to an external server, you had to route the call through an Apex class using the Http and HttpRequest classes. While Apex callouts are still mandatory for secure server-to-server communications, Lightning Web Components run on modern browsers that natively support the standard JavaScript fetch() API. In this guide, we will walk through how to build a phone number verification component that queries an external REST API directly from your LWC contro...

In plain words: When fetching records from Apex in LWC, the data is delivered as JavaScript arrays. You don't need clunky for loops to manage this data. Use find() to grab a single record, some() to check rules, map() to format data for your datatables, filter() to narrow down lists, and reduce() for math totals. If you are writing JavaScript for Salesforce Lightning Web Components (LWC), you spend a lot of time organizing data. You might need to locate a specific record, validate user inputs, format fields for the UI, filter a list, or sum up a column. Modern JavaScript handles all of this natively without requiring long, messy loops. This guide walks you through the essential JavaScript array methods you need for LWC, updated for modern standards, complete with real-world Salesforce data examples.

In plain words: When developing Salesforce Lightning Web Components (LWC), you frequently need to parse and format data before displaying it to users. Two of the most helpful tools for this are the JavaScript filter() method (used to search and pare down lists) and Object.keys() (used to extract property names from complex objects). Welcome to Part 3 of our series on mastering JavaScript for Salesforce Lightning Web Components (LWC). Building reactive, high-performance web applications requires a firm grasp of ES6+ JavaScript helper functions. In this guide, we will explore how to combine the filter() array method with object property iteration to build dynamic lists that respond instantly to user input.

In plain words: When developing Salesforce Lightning Web Components (LWC), you constantly handle lists of data returned from Apex. Instead of writing messy, traditional for loops to parse and transform your records, modern JavaScript gives you four foundational array methods— forEach , filter , map , and reduce —to write clean, readable, and maintainable code. Welcome to Part 4 of our series on essential JavaScript methods for Salesforce Lightning Web Components (LWC). Writing high-performing frontend applications relies on your ability to process data efficiently on the client side. In this guide, we will break down the four most critical array manipulation methods every Salesforce developer must master.

In plain words: Exporting data to a CSV (Comma Separated Values) file is a frequent business request. Instead of making server-side Apex calls to generate and store files, modern Lightning Web Components (LWC) can bundle raw records into a text file directly in the user's browser, and instantly trigger a local file download using a temporary anchor link. Allowing users to export data into a clean spreadsheet format is essential for reporting and offline analysis. In Salesforce, you can accomplish this efficiently on the client side using the HTML5 Blob API and JavaScript. In this guide, we will walk through how to build a lightweight LWC component that converts structured data into a downloadable CSV file instantly.

In plain words: By default, all communication between Lightning Web Components (LWC) and Apex happens asynchronously —meaning your JavaScript keeps running without waiting for the server to reply. However, there are times when Step 2 of your code strictly requires the data returned from Step 1 before it can proceed. To achieve this "synchronous" behavior in JavaScript, we use modern async/await and JavaScript Promises. In Salesforce Lightning Web Components, invoking server-side Apex methods is traditionally handled via promises or wire adapters. Because web browsers are designed not to freeze while waiting for a server response, everything happens asynchronously. Sometimes, business logic dictates strict sequential execution—you need to call an Apex method, wait for the response, and only then execute the next line of frontend code. Let's explore how to handle this cleanly using modern JavaScript async/await patterns.

In plain words: Salesforce Flows are powerful automated workflows, while Lightning Web Components (LWC) provide custom user interfaces. You don't have to choose between them—Salesforce provides a built-in base component called <lightning-flow> that allows you to embed and run a fully interactive Screen Flow directly inside your custom LWC interface. Salesforce Flows allow admins to build complex business logic and guided user screens without writing code. However, when you need a custom UI layout or want to trigger a flow conditionally based on advanced user actions, embedding the flow inside a Lightning Web Component (LWC) is the ideal solution. In this guide, we will explore how to use the native lightning-flow tag to launch a Screen Flow on demand from an LWC.

In plain words: A sticky header is a navigation bar or title block that stays locked to the top of the browser window when a user scrolls down a long page. In Salesforce Lightning Web Components (LWC), you don't need complex JavaScript window listeners to achieve this—modern CSS position: sticky handles it natively and smoothly. When building custom applications in Salesforce, users often have to scroll through dense pages filled with records, forms, and data tables. Keeping action buttons or titles visible at all times greatly improves usability and navigation. In this guide, we will build a reusable, dynamic sticky header component in Lightning Web Components (LWC) using clean HTML markup and CSS.

In plain words: When a user logs into Salesforce and opens your custom Lightning Web Component, you often need to know who they are so you can greet them or filter data for them. Instead of writing custom Apex queries to look up the User table, Salesforce provides a built-in wire adapter ( getRecord ) combined with scoped user IDs ( @salesforce/user/Id ) to fetch current user details instantly and securely. Building personalized user experiences is a core requirement for enterprise applications. Whether you want to display a custom welcome banner or automatically stamp record creation forms with the current user's email, fetching logged-in user data is a routine task. In Salesforce Lightning Web Components (LWC), you can achieve this without writing a single line of Apex backend code by leveraging the Lightning UI API wire service.