Posts

How to get the selected record details in Lightning Webcomponents

Image

How to display the error messages in Lightning webcomponents

Image

How to use regular expressions in Lightning Webcomponents

Image

How to disable the input fields in Lightning Webcomponents with test class

How to change the button style in lwc with test class

How to test the html content in Lightning Webcomponents

Simple test class in Lightning Webcomponents

Button Functionality with test class in Lightning Web components

Dynamic search functionality in Lightning Web Component with event

Image

How to pass multiple values from Child component to Parent component in LWC

Image

How to apply CSS in Lightning Web Component through Javascript

renderedCallback in Lightning Webcomponent

render in Lightning Webcomponent

errorCallback in Lightning Webcomponent

connectedCallback in Lightning Webcomponent

Constructor in Lightning Webcomponent

How to pass the data from parent to child in LWC

Dynamic search in Lightning Webcomponent

Dynamic validation in Lightning Webcomponent

Image

Custom validation in Lightning web component

Image

delete-multiple-records-using-checkbox-lightning-WebComponent

Create-parent-child-records in Lightning WebComponent

Delete Multiple Records Using Checkbox In Lightning Webcomponent

Image

How to update the records with a button in LWC

Image
Add caption

How to display the data with imperative method in LWC

Image

How to delete the records with a button in LWC

Image

How to Use Wrapper Class In Lightning WebComponent

Image
Apex Class ========== public  class ContactController {     @AuraEnabled(cacheable=true)     public  static List<WrapperClass> displayConRecords()     {         List<WrapperClass> wrapperConList=new List<WrapperClass>();         for(Contact con:[select Id,LastName,Email,Phone from Contact LIMIT 10])         {             WrapperClass wrap=new WrapperClass();             wrap.LastName=con.LastName;             wrap.Email=con.Email;             wrap.Phone=con.Phone;             wrapperConList.add(wrap);         }         return wrapperConList;     }     public class WrapperClass     {         @AuraEnabled         public String LastName;         @AuraEnabled         public String Email;         @AuraEnabled         public String Phone;     }   } displayContacts.html ==================== <template>     <table class="slds-table slds-table_cell-buffer slds-table_header-hidden">         <tr>             &l

How to pass the user input from Child to Parent in Salesforce LWC

Image
video link ======= https://www.youtube.com/watch?v=Hh3nEIk9sws&t=227s childComponent.html =================== <template>     <lightning-input type="text"  style="width:15%;" label="FirstName" placeholder="Enter the FirstName"  onchange={handleChangeFirstName}>     </lightning-input> </template> childComponent.js ================= import { LightningElement,api } from 'lwc'; export default class ChildComponent extends LightningElement {     @api firstname;     handleChangeFirstName(event){         this.firstname=event.target.value;         const sampleEvent=new CustomEvent('inputcarryevent',{             detail:this.firstname         });         this.dispatchEvent(sampleEvent);     } } parentComponent.html ==================== <template>     <c-child-component oninputcarryevent={handlechange}>     </c-child-component>     FirstName is:{firstname}

How to display the records based on selected picklist value with event in LWC

Image
Apex class ========== public class AccountSearchController {     @AuraEnabled(cacheable=true)     public static List<Account> displayAccountRecords(String searchKey)     {         System.debug('searchKey'+searchKey);         List<Account> returnlist=new List<Account>();         for(Account acc:[select Name,Industry from Account where Industry=:searchKey])         {             returnlist.add(acc);         }         return returnlist;     } } childComponent.html =================== <template>     <template if:true={IndustryPicklistValues.data}>         <lightning-combobox name="progress"            label="Industry"            value={value}            placeholder="-Select-"            options={IndustryPicklistValues.data.values}            onchange={handleChange} >         </lightning-combobox>        </template> </template> childComponent.js ================

How to pass the value from one Component to other Component with event in LWC

Image
Video link ========= https://youtu.be/W9-ANZgxXZI Apex Class ========== public with sharing class AccountDemoController {     public AccountDemoController() {     }     @AuraEnabled(cacheable=true)     public static List<Account> displayAcntRecords(){         List<Account> acclist=[select Id,Name from Account LIMIT 5];         return acclist;     }     @AuraEnabled(cacheable=true)     public static List<Contact> displayConRecords(String accId){         System.debug('@@AccountId@@'+accId);         List<Contact> conlist=[select Id,LastName,AccountId from Contact where AccountId=:accId];         return conlist;     } } childComp2.html =============== <template> <b>Accounts</b>     <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">         <tr>             <th>Select</th>             <th>AccountName</th>         </tr>

How to delete the records with a button in LWC

Image
Video link ======== https://www.youtube.com/watch?v=7rXycIcjHPM&t=71s Apex Class ========== public with sharing class AccountCls {     @AuraEnabled(cacheable=true)     public static List<Account> displayAccounts() {         List<Account> acclist=[select Id,Name from Account LIMIT 10];         return acclist; } } deleteAccountsData.html ======================= <template>     <template if:true={accounts}>         <table class="slds-table slds-table_cell-buffer slds-table_header-hidden"> <thead class="slds-assistive-text"> <tr class="slds-line-height_reset">   <th class="" scope="col"> <div class="slds-truncate" title="Account Name">Account Name</div>   </th>   <th class="" scope="col"> <div class="slds-truncate" title="Action">Actio

How to display the records based on selected picklist value in LWC

Image
AccountSearchController ======================= public class AccountSearchController {     @AuraEnabled(cacheable=true)     public static List<Account> displayAccountRecords(String searchKey)     {         System.debug('searchKey'+searchKey);         List<Account> returnlist=new List<Account>();         for(Account acc:[select Name,Industry from Account where Industry=:searchKey])         {             returnlist.add(acc);         }         return returnlist;     } } displayAccounts.html ==================== <template> <template if:true={IndustryPicklistValues.data}> <lightning-combobox name="progress"   label="Industry"   value={value}   placeholder="-Select-"   options={IndustryPicklistValues.data.values}   onchange={handleChange} > </lightning-combobox> </template><br/><br/> <template if:true={records}> <table>

How to display the Contacts based on Account Name in Lightning WebComponent

Image
Video link ========= https://www.youtube.com/watch?v=IkKFPHy29FU&t=16s Apex Class ========== public with sharing class AccountController {     @AuraEnabled(cacheable=true)     public  static List<Account> getAccounts()     {         List<Account> acclist=[select Id,Name from  Account LIMIT 5];         return acclist;     }     @AuraEnabled(cacheable=true)     public static List<Contact> getAllContacts(String searchKey)     {         System.debug('Entered into contact method');             List<Contact> returnconlist=new List<Contact>();         for(Contact con:[select LastName,Account.Name from Contact where Account.Name=:searchKey])         {             returnconlist.add(con);             System.debug('Contact list size'+returnconlist);         }         if(returnconlist.isEmpty())         {             System.debug('No Records found'+returnconlist.size());         }         return returnconl

Dynamic Search in Lightning WebComponent

Image
Video link ======== https://www.youtube.com/watch?v=i2_Zgw5OI_A&t=14s Apex class ========== public with sharing class ContactSearchController {     @AuraEnabled(cacheable=true)     public static List<Contact> getAllContacts(String searchKey)     {         List<Contact> returnconlist=new List<Contact>();         String searchWord='%'+searchKey+'%';         for(Contact con:[select LastName from Contact where LastName like:searchWord])         {             returnconlist.add(con); }         if(returnconlist.isEmpty())         {             System.debug('No Records found'+returnconlist.size());         }         return returnconlist;         } }      conSearch.html ============== <template>     <lightning-card title="ContactSearchFunctionality" icon-name="custom:custom63">         <lightning-input label="Enter LastName"  style="width:50%;" placeholde

How to get the selected RecordId in Lightning Web Component

Image
Video link ======== https://www.youtube.com/watch?v=7VDPA8S7Uss&t=23s displayContacts.html ==================== <template>     <template for:each={contacts.data} for:item="con"> <p key={con.Id}> {con.LastName} </p> <lightning-button label="Click me" variant="brand" onclick={handleClick} value={con.Id}>         </lightning-button> </template> <template if:true={contacts.error}> Error in processing the data </template> </template> displayContacts.js ================== import { LightningElement,wire} from 'lwc'; import getAllContacts from '@salesforce/apex/ContactController.getAllContacts'; export default class DisplayContacts extends LightningElement {     @wire(getAllContacts) contacts;     handleClick(event)     {         const currentId=event.target.value;         alert('====CurrentRecordId is===='+currentId);    

How to display the data in Lightning Web Component

Image
Video link ======== https://www.youtube.com/watch?v=lnE2z9ZfMfc&t=80s displayContacts.html ==================== <template>     <template for:each={contacts.data} for:item="con"> <p key={con.Id}> {con.LastName} </p> </template> <template if:true={contacts.error}> Error in processing the data </template> </template> displayContacts.js ================== import { LightningElement,wire} from 'lwc'; import getAllContacts from '@salesforce/apex/ContactController.getAllContacts'; export default class DisplayContacts extends LightningElement { @wire(getAllContacts) contacts; } Apex class ========== public with sharing class ContactController {     @AuraEnabled(cacheable=true)     public  static List<Contact> getAllContacts()     {         List<Contact> conlist=[select LastName,Email,Phone from Contact LIMIT 5];         return conlist;     } }

How to show and hide the form in Lightning WebComponent

formFunctionality.html ====================== <template>    <template if:true={booleanvar}> <lightning-button label="cancel" onclick={handleCancel}> </lightning-button><br/>     <lightning-input label="FirstName" placeholder="Enter FirstName"> </lightning-input> <lightning-input label="LastName" placeholder="Enter LastName"> </lightning-input> <lightning-input label="Email" placeholder="Enter Email"> </lightning-input> <lightning-input label="Mobile" placeholder="Enter Mobile"> </lightning-input>     </template>    <template if:false={booleanvar}> <lightning-button label="ShowForm" variant="brand" onclick={handleClick}> </lightning-button>     </template> </template> formFunctionality.js ==================== import {

How to apply CSS in Lightning WebComponent

Image
sampleStyling.html ================== <template>     <div align="center">   <h1 class="FirstName">BrahmaNaidu</h1>   <h1 class="LastName">Mandalapu</h1> <div class="demo"> sfdcscenarios.blogspot.com </div> </div> </template> sampleStyling.css ================= .FirstName {     color:red; } .LastName {     color:blue; } .demo {     color:yellowgreen; }

How to get the source of button in Lightning webcomponent

Image
buttonFunctionality.html ======================== <template>     <lightning-button-group> <lightning-button label="Refresh" onclick={handleClick}> </lightning-button> <lightning-button label="Edit" onclick={handleClick}> </lightning-button> <lightning-button label="Save" onclick={handleClick}> </lightning-button> </lightning-button-group> </template> buttonFunctionality.js ====================== import { LightningElement,track } from 'lwc'; export default class buttonFunctionality extends LightningElement {     handleClick(event)     {         const buttonalabel=event.target.label;         alert(buttonalabel);     } } LighntingApplication ==================== <aura:application extends="force:slds">     <c:buttonFunctionality/> </aura:application>

Simple calculator in Lightning Webcomponent

Image
simplecalculator.html ====================== <template>     <lightning-input label="Number1" name="number1" onchange={handleEvent}>     </lightning-input>     <lightning-input label="Number2" name="number2" onchange={handleEvent}>     </lightning-input>     <br/>     <lightning-button label="Add" variant="brand"  onclick={doAdd}>     </lightning-button>&nbsp;     <lightning-button label="Sub" variant="brand"  onclick={doSub}>     </lightning-button>&nbsp;     <lightning-button label="mul" variant="brand"  onclick={doMul}>     </lightning-button>&nbsp;     <lightning-button label="div" variant="brand"  onclick={doDiv}>     </lightning-button> </template> simplecalculator.js =================== import { LightningElement,track } from 'lwc';

Lightning quick action

Apex class ========== public class AccountController {   @AuraEnabled     public static List<Contact> displaycons(Id accountId)     {         List<Contact> conlist=[SELECT LastName FROM Contact WHERE AccountId = :accountId];         System.debug('===Conlist size==='+conlist.size());         return conlist;     }     @AuraEnabled     public static List<Opportunity> displayOpptys(Id accId)     {         List<Opportunity> opplist=[select Name from Opportunity where AccountId=:accId];         System.debug('===Opportunity list size==='+opplist.size());         return opplist;     } } SpinnerComponent.cmp ==================== <aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId"                 controller="AccountController" >     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   <div class="slds-form--stacked

How to edit the records in Lightning component

Image
Apex class ========== public class ContactCTRL4 {    @AuraEnabled    public static List<Contact> displayConRecords()    {        return [select LastName,Email from Contact LIMIT 10];    }     @AuraEnabled     public static list<Contact> updateConRecords(List<Contact> condata)     {         try         {             update condata;         }         catch(Exception e)         {             System.debug('unable to update the record due to '+e.getMessage());         }         return condata;     } } compoment ========= <aura:component  controller="ContactCTRL4">     <aura:attribute name="conlist" type="list"/>     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>     <aura:attribute name="isEdit" type="boolean"/>     <aura:if isTrue="{!!v.isEdit}">         <lightning:button label="Ed

How to display the contact records based on Account with radio button in salesforce lightning

Image
Apex class ========== public class AccountController {     @AuraEnabled     public static List<Account> displayAccRecords()     {         return [select Id,Name from Account LIMIT 5];     }     @AuraEnabled     public static List<Contact> displayConRecords(String accId)     {         List<Contact> returnconlist=new List<Contact>();         for(Contact con:[select Id,AccountId,FirstName, LastName from Contact where AccountId=:accId])         {             if(con!=null)             {                 returnconlist.add(con);             }         }         return returnconlist;     } } Accountcomponent.cmp ==================== <aura:component implements="force:appHostable, forceCommunity: availableForAllPageTypes" access="global" controller="AccountController" >     <aura:attribute name="accData" type="list"/>     <aura:attribute name="conData" type="list