Posts
How to get the selected record details in Lightning Webcomponents
- Get link
- Other Apps
How to display the error messages in Lightning webcomponents
- Get link
- Other Apps
How to use regular expressions in Lightning Webcomponents
- Get link
- Other Apps
How to disable the input fields in Lightning Webcomponents with test class
- Get link
- Other Apps
How to change the button style in lwc with test class
- Get link
- Other Apps
How to test the html content in Lightning Webcomponents
- Get link
- Other Apps
Button Functionality with test class in Lightning Web components
- Get link
- Other Apps
Dynamic search functionality in Lightning Web Component with event
- Get link
- Other Apps
How to pass multiple values from Child component to Parent component in LWC
- Get link
- Other Apps
How to apply CSS in Lightning Web Component through Javascript
- Get link
- Other Apps
How to pass the data from parent to child in LWC
- Get link
- Other Apps
delete-multiple-records-using-checkbox-lightning-WebComponent
- Get link
- Other Apps
Create-parent-child-records in Lightning WebComponent
- Get link
- Other Apps
Delete Multiple Records Using Checkbox In Lightning Webcomponent
- Get link
- Other Apps
How to display the data with imperative method in LWC
- Get link
- Other Apps
How to Use Wrapper Class In Lightning WebComponent
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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> <lightning-button label="Sub" variant="brand" onclick={doSub}> </lightning-button> <lightning-button label="mul" variant="brand" onclick={doMul}> </lightning-button> <lightning-button label="div" variant="brand" onclick={doDiv}> </lightning-button> </template> simplecalculator.js =================== import { LightningElement,track } from 'lwc';
Lightning quick action
- Get link
- Other Apps
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
- Get link
- Other Apps
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
- Get link
- Other Apps
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