Scribd
Upload
61 views15 pages

LWC Notes

LWC NOTES FOR SALESFORE

Uploaded by

glvibes98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
61 views15 pages

LWC Notes

LWC NOTES FOR SALESFORE

Uploaded by

glvibes98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 15

2nd class===

data binding:
lwc name:LwcBinding.js
import { LightningElement } from 'lwc';

export default class LwcBinding extends LightningElement {


GreetingMsg='Welcome To Salesforce Lwc Start';
CourseName='LWC';
CourseFee=20000;
CourseFeePaid=true;
stdfname;
stdlname;

handleClick(event) {
alert('HandleClicked');
//to refer the properties we have to use This.variabl name
this.CourseName ='salesforceLWC';
this.CourseFee = 30000;

const btnName = event.target.name;


const btnLabel = event.target.label;

alert('Button name' + btnName);


alert('Button Label'+ btnLabel);
}
handlechange(event){
let fdname=event.target.name;

if(fdname ==='fname'){
this.stdfname=event.target.value;
}else if(fdname === 'lname'){
this.stdlname=event.target.value;
}
console.log('this.fullName=' +this.stdfname+'-'+this.stdlname);

}
}

===================================================================================
======
name=LwcBinding.html
<!--
@description :
@author : [email protected]
@group :
@last modified on : 03-25-2023
@last modified by : [email protected]
-->
<template>
<h1>
DataBinding

</h1>

<div class="slds-p-around_large">
<lightning-card variant="Brand" name="submit" title="DataBinding" icon-
name="custom:custom15">
<p slot="actions">
<lightning-button variant="brand" name="sumbit" label="Submit" title="subm"
onclick={handleClick}></lightning-button>

</p>
<p class="slds-p-around_small">
Greeting:{GreetingMsg}<br/>
CourseName:{CourseName}<br/>
Coursefee:{CourseFee}<br/>
CourseFeepaid:{CourseFeePaid}<br/>

</p>

</lightning-card>
<p slot="footer">
Welcome to Salesforce Properties binding
</p>
<div class="slds-p-around_x-large">
<lightning-card variant="Narrow" title="BasicEvents" icon-name="cuatom:custom15">
<p slot="actions">

<lightning-button variant="brand" name="submitButton" label="Submit" title="sub1"


onclick={handleClick}></lightning-button>
</p>
<p class="slds-p-horizantal_large">
<lightning-input type="text" variant="standard" name="fname" label="Enter
FirstName" value={stdfname} placeholder="Enter firstName of your..."
onchange={handlechange}></lightning-input>
<lightning-input type="text" variant="standard" name="lname" label="Enter ALstName"
value={stdlname} placeholder="Enter LastName of your..."
onchange={handlechange}></lightning-input>
</p>

</lightning-card>

</div>

</div>

</template>
==============================================
lwc app
<aura:application extends="force:slds">
<!-- <c:lwcHello></c:lwcHello> -->
<c:lwcBinding></c:lwcBinding>

</aura:application>
===================================================================================
================================================================================
3rd clas if else
java script:
import { LightningElement } from 'lwc';
export default class Lwcif3rdclass extends LightningElement {

showavailableGroceryproductDetails = false;
Products=50;
ShowProducts=false;
OnProductsJs1(event){
this.showavailableGroceryproductDetails =event.target.checked;
console.log('show grocery
Products'+this.showavailableGroceryproductDetails);
alert('Showing grocieries through javaScript');
};
OnProductsJs2(event){
this.Products=event.target.value;
console.log('this.Show Available product in Dmart'+this.ShowProducts);
alert('show products in dmart'+ShowProducts);
}
}
=============================================
<!--
@description :
@author : [email protected]
@group :
@last modified on : 03-29-2023
@last modified by : [email protected]
-->
<template>
<lightning-card variant="Narrow" title="Lwc if example show products" icon-
name="standard:account">
<p class="slds-p-horizontal_small">Card Body Narrow (custom component)</p>
<lightning-input type="checkbox" variant="standard" name="check" label="show
available products" value={showavailableGroceryproductDetails}
onchange={OnProductsJ1} placeholder="type here..."></lightning-input>
<template lwc:if={showavailableGroceryproductDetails}>
<p>Dals <br/>
Pulses<br/>
Dry Fruits<br/>
DMart Grocery<br/>
Cooking Oil<br/>
Ghee Vanaspati<br/>
Flours Grains<br/>
Rice Rice Products<br/>
Masala Spices</p>
</template>
<template lwc:else>
<p>Products are out of stock</p>
</template>

<p slot="footer">Condition Renderingr</p>

</lightning-card>
<lightning-card variant="Narrow" title="LWC If Example Dmart products
selling" icon-name="standard:account">
<p class="slds-p-horizontal_small">Card Body Narrow (elections)</p>
<lightning-input type="number" variant="standard" name="Dmart"
label="Bundle Products"
placeholder="please enter slected products" value={Products}
onchange={OnProductsJs2}></lightning-input>
<template lwc:if={ShowProducts}>
<p>Grocery Staples
Daily Essentials
Dairy Frozen
DMart Brands
Home Personal Care
Bed Bath
Home Appliances
Crockery
Footwear
Luggage
Toy Games
Plastic Containers
Kids Apparel
Womens Apparel
Mens Apparel
Fruits Vegetables
D Mart Products Full Catalogue List [Updated]
GROCERY

</p>
</template>
<template lwc:else>
<p>Dmart is Closed</p>
</template>

<p slot="footer">Card Footer</p>


</lightning-card>

</template>
-----------------------------------------------------------------------------------
--------------------------------
// if (this.ShowProducts > 35){
// this.ShowProducts = true;
// }else{
// this.ShowProducts = false;
// }
==============================
<aura:application extends="force:slds">
<!-- <c:lwcHello></c:lwcHello> -->
<!-- <c:lwcBinding></c:lwcBinding> -->
<c:lwcIfExapmle3rdclass></c:lwcIfExapmle3rdclass>

</aura:application>
===================================================================================
=================================
CALUCLATOR LWC
<template>
<div class="slds-p-around_medium">
<lightning-card variant="Brand" title="SalesforceStart CALUCLATOR" icon-
name="custom:custom46">
<lightning-button-icon icon-name="utility:down" variant="border-filled"
alternative-text="Show More" slot="actions"></lightning-button-icon>
<!-- creating button -->
<lightning-button-group slot="actions">

<lightning-button variant="brand" label="Addition"


onclick={handleSumbit}></lightning-button>
<lightning-button variant="brand" label="Subraction"
onclick={handleSumbit}></lightning-button>
<lightning-button variant="brand" label="Multiplication"
onclick={handleSumbit}></lightning-button>
<lightning-button variant="brand" label="Division"
onclick={handleSumbit}></lightning-button>
</lightning-button-group>
<!-- creating button input -->
<p class="slds-p-around_large">
<lightning-input type="number" variant="standard" name="numb1" label="Enter
Number1" value={number1} placeholder="type here number"
onchange={handleChange}></lightning-input>
<lightning-input type="number" variant="standard" name="numb2" label="Enter
Number2" value={number2} placeholder="type here number..."
onchange={handleChange}></lightning-input>
<!-- <lightning-input type="number" variant="standard" name="Result"
label="Result" value={Result} placeholder="your Results is here."></lightning-
input> -->
<!-- //show are aslo we can hide by using lightning fromatted number -->
Result:
<lightning-formatted-number value={Result}></lightning-formatted-number>

</p>
<p class="slds-p-horizontal_small">All caluclations is here</p>
<p slot="footer">SalesforceStart</p>
</lightning-card>

</div>

</template>
===================================================================================
============================================
import { LightningElement } from 'lwc';

export default class LwcCaluclator extends LightningElement {


number1;
number2;
Result;
handleSumbit(event){
const buttonLabel=event.target.label;
console.log('button labell:'+ buttonLabel);
// for identification of the clicked button
if(buttonLabel==='Addition'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) + parseInt(this.number2);
}else if(buttonLabel==='Subraction'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) - parseInt(this.number2);

}else if(buttonLabel==='Multiplication'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) * parseInt(this.number2);

}else if(buttonLabel==='Division'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) / parseInt(this.number2);
}
}
handleChange(event) {
const Cname=event.target.name;
if(Cname=== 'numb1'){
this.number1=event.target.value;
}else if(Cname=== 'numb2'){
this.number2=event.target.value;

}
}

============================================================================
<aura:application extends="force:slds">
<!-- <c:lwcHello></c:lwcHello> -->
<!-- <c:lwcBinding></c:lwcBinding> -->
<!-- <c:lwcIfExapmle3rdclass></c:lwcIfExapmle3rdclass> -->
<c:lwcCaluclator></c:lwcCaluclator>
</aura:application>
==================================================
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>

</LightningComponentBundle>

===================================================================================
===============================================
caluclator--------3rd class
import { LightningElement } from 'lwc';

export default class LwcCaluclator extends LightningElement {


number1;
number2;
Result;
handleSumbit(event){
const buttonLabel=event.target.label;
console.log('button labell:'+ buttonLabel);
// for identification of the clicked button
if(buttonLabel==='Addition'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) + parseInt(this.number2);
}else if(buttonLabel==='Subraction'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) - parseInt(this.number2);

}else if(buttonLabel==='Multiplication'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) * parseInt(this.number2);

}else if(buttonLabel==='Division'){
console.log('this.number1'+ this.number1);
console.log('this.number2'+ this.number2);
this.Result = parseInt(this.number1) / parseInt(this.number2);
}
}
handleChange(event) {
const Cname=event.target.name;
if(Cname=== 'numb1'){
this.number1=event.target.value;
}else if(Cname=== 'numb2'){
this.number2=event.target.value;

}
}

=================================================================================
html caluclator
<template>
<div class="slds-p-around_medium">
<lightning-card variant="Brand" title="SalesforceStart CALUCLATOR" icon-
name="custom:custom46">
<lightning-button-icon icon-name="utility:down" variant="border-filled"
alternative-text="Show More" slot="actions"></lightning-button-icon>
<!-- creating button -->
<lightning-button-group slot="actions">

<lightning-button variant="brand" label="Addition"


onclick={handleSumbit}></lightning-button>
<lightning-button variant="brand" label="Subraction"
onclick={handleSumbit}></lightning-button>
<lightning-button variant="brand" label="Multiplication"
onclick={handleSumbit}></lightning-button>
<lightning-button variant="brand" label="Division"
onclick={handleSumbit}></lightning-button>
</lightning-button-group>
<!-- creating button input -->
<p class="slds-p-around_large">
<lightning-input type="number" variant="standard" name="numb1" label="Enter
Number1" value={number1} placeholder="type here number"
onchange={handleChange}></lightning-input>
<lightning-input type="number" variant="standard" name="numb2" label="Enter
Number2" value={number2} placeholder="type here number..."
onchange={handleChange}></lightning-input>
<!-- <lightning-input type="number" variant="standard" name="Result"
label="Result" value={Result} placeholder="your Results is here."></lightning-
input> -->
<!-- //show are aslo we can hide by using lightning fromatted number -->
Result:
<lightning-formatted-number value={Result}></lightning-formatted-number>

</p>
<p class="slds-p-horizontal_small">All caluclations is here</p>
<p slot="footer">SalesforceStart</p>
</lightning-card>

</div>

</template>
===================================================================================
===================================================================================
==================
4th clss about for each:
import { LightningElement } from 'lwc';

export default class LWCifExample4th extends LightningElement {


lstcolors = ['orange','white','green'];

lststudents= [
{
Id:'std-1',
Name:'Teju',
Title:'salesforce dev and cpq'
},

{
Id:'std-2',
Name:'Gayathri',
Title:'salesforce dev and cpq'
},
{
Id:'std-3',
Name:'Narasimha',
Title:'salesforce admin'
}
]
}
===================================================================================
========
html foreah:
<!--
@description :
@author : [email protected]
@group :
@last modified on : 03-30-2023
@last modified by : [email protected]
-->
<template>
<lightning-card variant="Narrow" title="ForEach" icon-name="custom:custom49">
<p class="slds-p-horizontal_small">Card Body Narrow (custom component)</p>
<template for:each={lstcolors} for:item="color" for:index="index">
<li key={color}>
{color}
</li>
</template>
<p slot="footer">Card Footer</p>
</lightning-card><br/><br/>
<!-- //create another ltg card-->
<lightning-card variant="Narrow" title="for:each" icon-
name="custom:custom47">
<ul class="slds-m-around_medium">
<template for:each={lststudents} for:item="std" for:index="index">
<li key ={std.Id}>
{std.Name} &nbsp; &nbsp; &nbsp; {std.title}
</li>
</template>

</ul>

<p slot="footer">Card Footer</p>


</lightning-card><br/><br/>

<lightning-card variant="Narrow" title="Iterator" icon-


name="standard:account">
<ul class="slds-m-around_medium">
<template iterator:std={lststudents}>
<li key={std.value.Id} >
<div if:true={std.first} class="list-first">

{std.value.Name} - {std.value.title}
<div if:true={std.last} class="list-last">
</div>
</div>
</li>

</template>

</ul>

<p class="slds-p-horizontal_small">iterator example</p>


<p slot="footer">Card Footer</p>
</lightning-card><br/>

</template>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>

</LightningComponentBundle>

-----------------------------------------------------------------------------------
------------
7.slot tab
child component:::::::::::::::::childcmpLwc------------
import { LightningElement,api } from 'lwc';

export default class ChildcmpLwc extends LightningElement {

handleClickslot(event){
alert('Here Iam in JavaScripController');
}

}
----------------------------------------------------------------------------------
child-html

<!--
@description :
@author : [email protected]
@group :
@last modified on : 04-09-2023
@last modified by : [email protected]
-->
<template>
<lightning-card variant="Narrow" title="UnNamed Slots" icon-
name="custom:customs47">
<lightning-button variant="Destructive" label="Slot Located?" title="Slots"
onclick={handleClickslot} slot="actions"></lightning-button>
<p class="slds-p-horizontal_small">UnNamed Slots</p>
Iam in child Component
Salesforce Start
<!-- Named Slots -->
<slot name="message"></slot>
<slot name="institutename"></slot>

<!-- UnNamed Slot -->


<slot></slot>
<p slot="footer">Card Footer</p>
</lightning-card>

</template>
-----------------------------------------------------------------
parentcomponent---parentcmplwc--------------
<!--
@description :
@author : [email protected]
@group :
@last modified on : 04-09-2023
@last modified by : [email protected]
-->
<template>
<lightning-card variant="Narrow" title="UnNamed Slots" icon-
name="custom:customs47">
<lightning-button variant="Destructive" label="Slot Located?" title="Slots"
onclick={handleClickslot} slot="actions"></lightning-button>
<p class="slds-p-horizontal_small">UnNamed Slots</p>
Iam in child Component
Salesforce Start
<!-- Named Slots -->
<slot name="message"></slot>
<slot name="institutename"></slot>

<!-- UnNamed Slot -->


<slot></slot>
<p slot="footer">Card Footer</p>
</lightning-card>

</template>
---------------------------------------------------
mETA.XML

<!--
@description :
@author : [email protected]
@group :
@last modified on : 04-08-2023
@last modified by : [email protected]
-->
<template>
<h1 style="color: blue;">This is Parent Component></h1>
<div class="slds-p-around_small">
Message : {message}<br/><br/>
Institute name:{institutename}
</div>

<!-- Calling Child Component -->


<c-childcmp-lwc></c-childcmp-lwc>
<!-- named slots -->
<div slot="institute" style="color:crimson;font-size:50px">
**Salesforce Start Training Center**
</div>
<div slot="modules" style="color:crimson;font-size:20px">
Here We are Giving differt types of modules
Admin,dev,cpq,lwc,lighntning
</div>
<div style="color:blueviolet;font-size:50px">
**Call are whatsup**

</div>
</div>

</template>
import { LightningElement,api} from 'lwc';

export default class ParentcmpLWC extends LightningElement {


@api message;
@api institutename;
// @api backgroundcolor;
// @api padding;
}
===========================================================================
lwc lighnting data service-------------
ldsexample13 JS-----------------
import { LightningElement,api } from 'lwc';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';

export default class Ldsexample13 extends LightningElement {


//force:hasRecordId=====@api recordId;
//force:hasSobject=======@api SobjectApi;
@api recordId;
@api objectApiName;

field =[LASTNAME_FIELD, PHONE_FIELD, EMAIL_FIELD];


========================================================
<!--
@description :
@author : [email protected]
@group : b
@last modified on : 04-30-2023
@last modified by : [email protected]
-->
<template>

<lightning-card variant="Narrow" title="LDS Record view Form" icon-


name="standard:account"></lightning-card>

<p class="slds-p-horizontal_small">Card Body Narrow (custom component)</p>


<lightning-datatable
key-field="id"
data={lstcon}
hide-checkbox-column=false
columns=2
onrowaction={handleRowAction}>
</lightning-datatable>
<p slot="footer">contact table</p>
</lightning-card>

</template>
=========================================================================<?xml
version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>LWC LightningDataService</masterLabel>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>

}
==================================================
<template>
<div style="color: blueviolet;">
<div class="slds-p-horizantal-medium">

<!-- Creating lightning card -->


<lightning-card icon-name="standard:account" variant="base" title = "Basic
Caluclator" style="background-color:rgb(230, 173, 190);">
<!-- creating buttons for 4 methods -->
<lightning-button-group slot="actions">
<lightning-button label="Addition" variant="Brand-outline"
onclick={handleAdd}></lightning-button>
<lightning-button label="Subraction" variant="Brand-outline"
onclick={handleSub}></lightning-button>
<lightning-button label="Multiplication" variant="Brand-outline"
onclick={handleMul}></lightning-button>
<lightning-button label="Division" variant="Brand-outline"
onclick={handleDiv}></lightning-button>
</lightning-button-group>

<div class ="slds-p-Vertical-small">


<strong>Caluclation Part</strong>
<strong>

<Lightning-input type="number" variant="Standard" name="Number1" label="Enter


Number 1" color="blue"
placeholder="Type here" value={number1} onchange={handlechange} ></Lightning-input>
<lightning-input type="number" variant="Standard" name="Number2" label="Enter
Number 2"
placeholder="type here" value={number2} onchange={handlechange} ></lightning-input>
<Lightning-input type="number" variant="Standard" name="Results" label="Result"
placeholder="type here" value={results} onchange={handlechange} >

</Lightning-input>
</strong>
</div>
<p class="slds-p-vertical-medium" slot="footer">
<strong>
Thanks for visiting please come again soon
</strong>

</p>

</lightning-card>

</div>
</div>
</template>
=============import { LightningElement } from 'lwc';

export default class LWCCaluclator extends LightningElement {


//Properties
number1;
number2;
results;
//Calling functions/buttons
handleAdd(event){
//getting the label and name from html
const butnlbl = event.target.label;
//Debugging
console.log('This number1'+this.number1);
console.log('This number2'+this.number2);
console.log("results+" + this.results);

this.results = parseInt(this.number1) + parseInt(this.number2);


}
handleSub(event){
const btnlbl = event.target.label;
this.results = parseInt(this.number1) - parseInt(this.number2);
console.log('This number1'+this.number1);
console.log('This number2'+this.number2);
console.log("results+"+ this.results);

}
handleMul(event){
const btnlbl = event.target.label;
this.results = parseInt(this.number1) * parseInt(this.number2);
console.log('Number1' +this.number1);
console.log('Number2' + this.number2);
console.log("Result of multiplication:"+ this.results);

handleDiv(event){
const btnlbl = event.target.label;
this.results = parseInt(this.number1) / parseInt(this.number2);
console.log('Result++++++'+ this.results);
}
handlechange(event){
const fname = event.target.name;
if(fname === 'Number1'){
this.number1 = event.target.value;
console.log('number 2');

}else if(fname === 'Number2'){


this.number2 = event.target.value;
console.log('number 2');

}
}
}

You might also like