Skip to main content

Posts

Lightning Card in LWC

Lightning Card in LWC Learn how to use lightning-card in Lightning Web Components (LWC) to create structured, visually appealing containers for your Salesforce UI. 1. Introduction lightning-card is a UI component that provides a container for displaying content in a card format. It’s part of the Salesforce Lightning Design System (SLDS) and enhances the visual presentation of components while maintaining consistency with the Salesforce UI. Key Features of lightning-card: • Title: Displays a title for the card. • Body: Contains the main content of the card. • Actions: Optional slot for adding buttons or interactive elements. • Footer: Optional section for additional information or links. • Icon: Can include an icon in the header. 2. Basic Lightning Card The simplest form of a Lightning Card provides a clean layout for displaying information. <lightning-card title="Basic Card"...

Hello World using LWC

1. Create Lightning Web Component 1️⃣ In VS Code, open the Command Palette by pressing Ctrl + Shift + P on Windows. 2️⃣ Type SFDX and select SFDX: Create Lightning Web Component . 3️⃣ Type helloWorldCMP as the name of the new component and press Enter. 4️⃣ Press Enter again to accept the default directory path: force-app/main/default/lwc . 2. helloWorldCMP.html Add the following code into the HTML file: <template> <lightning-card title="First LWC" icon-name="custom:custom14"> <p>Hello World!!</p> <p>Welcome {name}..</p> </lightning-card> </template> 1. <template> : Root element of an LWC component’s HTML template. 2. <lightning-card> : Lightning Base Component providing a styled card interface. 3. <p>Hello World!!</p> : Displays “Hello World!!” inside the card. 4. <p>Welcome {name}..</p> : ...

First LWC Component

1. Introduction — LWC bundle An LWC bundle is a collection of files that together define a single Lightning Web Component. Typical files include an HTML template, a JavaScript controller, a metadata XML file, and optional assets (CSS, SVGs, tests). 2. HTML File Every LWC must include an HTML file with a root <template> tag. This tag contains the component's markup and bindings. <template> <h1>Hello, World!</h1> <p>Welcome to my Salesforce application.</p> </template> 3. JavaScript File The JavaScript file defines component behavior: properties, event handlers, getters, and lifecycle hooks. import { LightningElement } from 'lwc'; export default class GreetingComponent extends LightningElement { name = ''; handleInputChange(eve...

LWC Configuration — Step-by-step

LWC Configuration — Step-by-step LWC Configuration A concise guide to set up your local environment for Lightning Web Components development. 1. Download and install VS Code Visual Studio Code is a lightweight but powerful code editor with excellent extension support for Salesforce development. Download the installer for your OS from the official site, run the installer, and follow the prompts. After installation you can open your project folder and use the integrated terminal for CLI commands. Official download: https://code.visualstudio.com/ 2. Install Salesforce CLI Salesforce CLI (sfdx) is the command-line tool that enables creating projects, authenticating to orgs, pushing and pulling source, running tests, and so on. Download the appropriate in...

Key Differences between Aura and LWC

Key Differences between Aura and LWC Technology Basis: LWC is built on modern web standards like native JavaScript, HTML, and CSS. Aura uses a proprietary Salesforce framework and does not fully leverage web standards. Performance: LWC is more lightweight and faster because it uses browser-native APIs, resulting in better performance. Aura can be slower since it requires more processing and abstraction. Development Complexity: LWC is easier to learn and develop with because it uses standard JavaScript and web technologies. Aura has a steeper learning curve with its own component model and syntax. Component Composition: LWC allows for better modularity and encapsulation with the Shadow DOM, leading to more reusable and isolated components. Aura components can interfere with each other, as there is no native encapsulation like Shadow DOM. ...

Lightning Web Components

What is Lightning Web Components (LWC) ? Introduction: Salesforce introduced Lightning Web Components(LWC) as What is Lightning Web Components (LWC) ? Introduction: Salesforce introduced Lightning Web Components(LWC) as a modern framework for building dynamic, reusable UI Components on its platform.it replaces the older Aura framework and offers amore efficient and streamlined way to create web applications within the Salesforce ecosystem. Built using standard web technologies like HTML, JavaScript,and CSS, LWC takes Advantage of advancements in browser engines and web standards, providing Salesforce developers with a familiar, fast and lightweight framework. Why LWC was Created: Before LWC, Salesforce developers primarily used Aura Components, which, are powerful, but required proprietary syntax and relied heavily on Salesforce's Framework abstractions As web standards matured, the need for a more streamlined and modern approach to ...

Loops in Apex

There are 5 loop Types in Apex But not all of them are used Using while loops is considered a bad practice, because...it's easy to mess up From remaining 3 - for each is used 90% of the time But standard for loop is fundamental If you understand the standard loop, you understand all other types So, let's do it Definition: Loop is a block of code that runs a certain number of times Let's look at the example Let's say, I want to output 5 times (or 500) "Wow, I love Apex" to logs, but I am too lazy to write each line