Skip to main content

Starting with LWC

To know How to Setup VS Code for Salesforce Please visit : VS Code Setup

Lightning Web Component is having three main bundle Elements,

  1. nameSpace.hlml              = to show the UI View
  2. nameSpace.js                  = for logic implementations 
  3. nameSpace.js-meta.xml  = for metadata Access
The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it.

Create a web Component from VS Code:
1. First Create Project 
  • Press ctrl+shift+p
  • Select SFDX: Create Project
  • Select Standard Project Template
  • Give a Name to your project
  • Select Project Location Where you want to save locally
  • Open you new Folder
2. Create First LWC Component:
  • Press ctrl+shift+p
  • Select SFDX: Create Lightning Web Component
  • Give a name to your lwc Component
  • location will be default if you donot want to change the location of newly created lwc component.
  • Once press enter your lwc will be created. you'll be seeing three elements in that bundle
Example:
Lightning web Component name = lwcHelloWorld

lwcHelloWorld.html
<template>
    <lightning-card title="LWC Hello World" icon-name="custom:custom14">
        <div class="slds-card__body slds-card__body_inner">
            Hello {name},
            {message}
        </div>
    </lightning-card>
</template>

lwcHelloWorld.js
import { LightningElementapi } from 'lwc';

export default class HelloWorld extends LightningElement {
    @api name = 'testing Name';
    @api message = 'How are you?';
}

lwcHelloWorld.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Comments

Popular posts from this blog

Platform Developer I Certification Maintenance (Winter '23)

 Maintain Your Platform Developer I Certification for Winter ’23 1. Field update actions have changed in API Version 54.0. Which record-triggered flows do field update actions now execute? Answer: Before-Save after After-Save 2. Which Apex class is used to determine the hostnames for the domains that Salesforce hosts for your org? Answer: System.DomainCreator 3. Which modules can be used for notifications in a Lightning web component instead of native APIs? Answer: LightningAlert, LightningConfirm, and LightningPrompt 4. What determines an org’s “shape” in Salesforce? Answer: Features, settings, edition, limits, and licenses 5. Which lightning-modal-* component is required to create a modal? Answer: Body 6. How do you call an invocable action from Apex code? Answer: Reference Invocable.Action Get Hands-On With Apex Assertions 1. Create Two Apex class: Copy and Paste below codes (A.) TestFactory @isTest public class TestFactory {    public static Account getAccount(String accountName, B

Custom Table In LWC

I'm assuming you've Basic understanding of Lightning Web Component, I'll be explaining you the syntax that will be generic. HTML: < template > <!-- Header Part -->      < lightning-card   title = "Custom Data table in Lightning Web Components" >          < div   class = "slds-grid slds-gutters" >              < div   class = "slds-col" >                  < span ></ span >              </ div >              < div   class = "slds-col" >                  < span > <!--A Button For extra feature-->                      < lightning-button   label = "Show Selected Contacts"   onclick = {showContacts}   style = "margin-left: 40%"   variant = "brand" > </ lightning-button >                  </ span >              </ div >          </ div >< br />

LWC js-meta.xml Configuration File Tags

Each Lightning web component folder must include a configuration file named <componentName>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder. Some Standard Key metadata values: apiVersion : A double value that binds the component to a Salesforce API version. isExposed : If isExposed is false, the component is not exposed to Lightning App Builder or Community Builder. To allow the component to be used in Lightning App Builder or Community Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page. Some Standard Optional metadata values: description : A short description of the component, usually a single sentence. masterLabel : The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder. targets : Specifies wher

Translate