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

Administrator Certification Maintenance (Spring '23)

 Maintain Your Administrator Certification for Spring '23 1. What information is listed in the Details panel for recently used reports? Answer: A, B, C 2. What is used to give sales reps access to a guided process to import contacts and leads? Answer:  Sample CSV file 3. Which feature efficiently removes inactive picklist values? Answer: Bulk Delete Unused Values 4. Which type of Process Builder processes can be converted using the Migrate to Flow tool? Answer: Record-triggered Get Hands-on with Enhance Record Pages With Dynamic Forms Follow steps show in Screenshot also highlighted with Red Box:

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 />

Translate