How to Create Custom Components Using LWC

Lightning Web Components (LWC) is a modern JavaScript framework developed by Salesforce for building fast, reusable, and lightweight components on the Salesforce platform. LWC leverages the latest web standards and offers a powerful way to create dynamic, responsive, and efficient custom components.

In this comprehensive guide, we’ll walk through how to create custom components using LWC, covering everything from setup to deployment, along with best practices and real-world examples. Whether you're a beginner or someone looking to polish your Salesforce development skills, this guide is for you.

What is LWC?

LWC stands for Lightning Web Components, a UI framework built on modern web standards like ES6+, Web Components, and Shadow DOM. Unlike Aura Components, LWC is lightweight and performs better, thanks to its reliance on native browser features rather than proprietary frameworks.

Why Use LWC?

Performance: Faster rendering using native browser APIs.

Reusability: Modular components that can be reused.

Productivity: Simplified coding, testing, and deployment.

Standard Compliance: Built on modern JavaScript standards.

Prerequisites to Start with LWC
Before diving into creating custom LWC components, ensure you have the following tools installed and ready:

Salesforce DX CLI (SFDX)

Salesforce Developer Hub (Dev Hub) enabled in your org

Visual Studio Code (VS Code) with Salesforce Extensions Pack

Salesforce Scratch Org or Sandbox for testing

Step 1: Setting Up Your Salesforce DX Environment

1. Install Salesforce CLI
   Download and install Salesforce CLI from official link.

2. Authorize Your Salesforce Org
   bash
   Copy
   Edit
   sfdx auth:web:login --setalias MyOrg --instanceurl https://login.salesforce.com --setdefaultusername

3. Create a Salesforce DX Project
   bash
   Copy
   Edit
   sfdx force:project:create --projectname MyLWCProject
   Navigate into your project:

bash
Copy
Edit
cd MyLWCProject

Step 2: Create Your First LWC Component

1. Directory Structure of LWC Component Once you set up the project, your LWC component will typically reside in this structure:

swift
Copy
Edit
force-app/main/default/lwc/myComponent/
├── myComponent.html
├── myComponent.js
├── myComponent.js-meta.xml
└── myComponent.css (Optional)

1. Command to Create LWC Component bash Copy Edit sfdx force:lightning:component:create --type lwc --componentname myComponent --outputdir force-app/main/default/lwc

Step 3: Building a Custom Component — Explained

1. HTML File (Template) The .html file defines the component's template.

Example:

html
Copy
Edit

Hello, {name}!

1. JavaScript File (Logic) The .js file contains the component’s logic.

Example:

javascript
Copy
Edit
import { LightningElement, track } from 'lwc';

export default class MyComponent extends LightningElement {
@track name = 'World';

handleChange(event) {
    this.name = event.target.value;
}

}

1. XML Configuration File The .js-meta.xml file makes your component usable within Salesforce.

Example:

xml
Copy
Edit
<?xml version="1.0" encoding="UTF-8"?>

58.0
true

lightning_RecordPage
lightningAppPage
lightning_HomePage

Step 4: Deploy and Test Your LWC Component

1. Deploy Component to Org bash Copy Edit sfdx force:source:deploy -p force-app/main/default/lwc/myComponent
2. Add Component to Lightning App Builder Go to App Builder in Salesforce.

Drag and drop your custom component onto a page.

Save and Activate.

Step 5: Styling Your Custom Components

1. Adding CSS LWC supports scoped CSS. Just create a .css file with the same name as your component:

css
Copy
Edit
.my-custom-class {
color: blue;
font-weight: bold;
}

1. Using SLDS (Salesforce Lightning Design System) SLDS utility classes can be directly used within your HTML for consistent Salesforce styling:

html
Copy
Edit

Hello, {name}!

Step 6: Advanced Functionalities

1. Handling Events a. Simple Event Handling javascript Copy Edit handleClick() { alert('Button clicked!'); } html Copy Edit b. Custom Events (Communication between components) Child Component:

javascript
Copy
Edit
this.dispatchEvent(new CustomEvent('mycustomevent', { detail: this.name }));
Parent Component:

html
Copy
Edit

1. API Decorators @api – Public property/method

@track – Reactive private variable

@wire – To call Apex or Salesforce Data

javascript
Copy
Edit
import { LightningElement, api, track, wire } from 'lwc';

export default class Example extends LightningElement {
@api recordId;
@track name;
@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
record;
}

Step 7: Using Apex Methods in LWC

1. Apex Class apex Copy Edit public with sharing class AccountController { @AuraEnabled(cacheable=true) public static List getAccounts() { return [SELECT Id, Name FROM Account LIMIT 10]; } }
2. Import and Wire in LWC javascript Copy Edit import getAccounts from '@salesforce/apex/AccountController.getAccounts'; import { LightningElement, wire } from 'lwc';

export default class AccountList extends LightningElement {
@wire(getAccounts) accounts;
}

1. Template Rendering html Copy Edit

   {account.Name}

   Error loading accounts.

Step 8: Best Practices for LWC Components

Use Decorators Properly: Use @api, @track, @wire correctly.

Code Reusability: Break components into smaller reusable units.

Performance: Avoid unnecessary loops and reactivity.

Error Handling: Always handle possible errors in Apex calls.

Consistent Styling: Use SLDS for a consistent Salesforce look.

Document Components: Use comments and documentation in XML files for clarity.

Step 9: Real-World Example — Search Account Component

Component Behavior:
Search accounts by name and display results.

HTML:
html
Copy
Edit

{account.Name}

JavaScript:
javascript
Copy
Edit
import { LightningElement, track, wire } from 'lwc';
import searchAccounts from '@salesforce/apex/AccountController.searchAccounts';

export default class SearchAccount extends LightningElement {
@track searchKey = '';
@track accounts;

handleSearch(event) {
    this.searchKey = event.target.value;
    searchAccounts({ name: this.searchKey })
        .then(result => this.accounts = result)
        .catch(error => console.error(error));
}

}

Conclusion

Creating custom components using LWC is a game-changer for Salesforce development. With its modern, modular, and efficient approach, LWC allows developers to craft high-performing components that enhance user experience. By following this comprehensive guide, you can confidently build and deploy robust Lightning components to elevate your Salesforce apps.