Posts

Showing posts from December, 2019

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';