Monday, 22 June 2020

LWC Cheat Sheet


Wire

JavaScript Find method -

var age = 17;
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(ageVal => {
   return ageVal >= age;
  });
}

Calling child LWC method from parent -

const child = this.template.querySelector('c-public-method-child');
console.log(JSON.stringify(child));
child.changeSelection(this.city);

Constructor should have super in LWC js -

constructor() {
 super();
 console.log('Parent > Constructor.');
}

Importing and rendering multiple templates in LWC js -

import template1 from './lifecycleChild.html';
import template2 from './template2.html';
render() {
 console.log('Child > render.');
 return this.showTemplate2 ? template2 : template2;
}

CustomEvent firing from child to the parent

//Firing the event from the child component 
var cusEvt = new CustomEvent('mychildevent',{detail:'I am the message from child to parent.',bubbles:true});
this.dispatchEvent(cusEvt);

//Approach1: Handling the event from parent UI -
[c-child onmychildevent={handleChildEvent}][/c-child]
Note: handleChildEvent is the method in parent
handleChildEvent(event) { console.log(event.detail); }

//Approach2: Handling the event from parent JS -
constructor() {
 super();
 console.log('constructor');
 this.template.addEventListener('mychildevent',this.handleChildEvent.bind(this));
}
Note: When addEventListener is used "bubble:true" should be there in CustomEvent

Pubsub: Application Event Handling -

Download pubsub repository.

Firing the event -

  import {fireEvent} from 'c/pubsub';
  import { CurrentPageReference } from 'lightning/navigation';

  @wire(CurrentPageReference) 
  pageRef;
  
  handleClick() {
   debugger;
   fireEvent(this.pageRef,'parent2event','I am the event firing from parent2 component.');
   //Note: Event Name should be all in small characters and should not have special characters
  }
 

Handling the event -

  import {registerListener,unregisterAllListeners} from 'c/pubsub';
  import { CurrentPageReference } from 'lightning/navigation';
  
  @wire(CurrentPageReference) 
  pageRef;
  
  connectedCallback() {
   console.log('connectedCallback');
   registerListener('parent2event',this.handleAppEvent,this);
  }
  disconnectedCallback() {
   console.log('disconnectedCallback');
   unregisterAllListeners(this);
  }
  handleAppEvent(payload) {
   console.log('***payload: '+payload);
  }
 

Reusable javaScript -

Utility.js -

  const add = function(num1,num2) {
   return num1 + num2;
  }
  const substract = function(num1,num2) {
   return num1 - num2;
  }
  const multiply = function(num1,num2) {
   return num1 * num2;
  }
  const divide = function(num1,num2) {
   return num1 / num2;
  }

  export {
   add,
   substract,
   multiply,
   divide
  }
 

calling reusable js functions -

  import {add,substract,multiply,divide} from 'c/utility';
  
  constructor() {
   super();
   console.log('add: ',add(200,100));
   console.log('sub: ',substract(200,100));
   console.log('mul: ',multiply(200,100));
   console.log(`Div: ${divide(200,100)}`);
  }
 

LDS to get and create records -

  import { LightningElement, track, wire } from 'lwc';
  import {createRecord,getRecord} from 'lightning/uiRecordApi'

  const fieldsArray = ['Contact.FirstName','Contact.LastName','Contact.Email','Contact.MobilePhone'];
  export default class ContactForm extends LightningElement {   

   @track recordId;

   @wire(getRecord,{recordId:"$recordId", fields: fieldsArray})
   contact;


   firstNameChangeHandler(event) {
    this.firstName = event.target.value;
   }
   lastNameChangeHandler(event) {
    this.lastName = event.target.value;
   }
   emailChangeHandler(event) {
    this.email = event.target.value;
   }
   mobileChangeHandler(event) {
    this.mobile = event.target.value;
   }
   
   createContact() {
    debugger;
    //Field API Names along with the data
    const fields = {
     "FirstName" : this.firstName,
     "LastName" : this.lastName,
     "Email" : this.email,
     "MobilePhone" : this.mobile
    };

    var recordInput = {
     apiName : "Contact", fields
    };
     
    //Using javaScript promise concept
    createRecord(recordInput).then(response => {
     console.log('Record Id: '+response.id);
     this.recordId = response.id;
    }).catch(error => {
     console.log('Error Object: '+JSON.stringify(error));
     console.log('Error Message: '+error.body.message);
    });

   }

   get retFirstName() {
    debugger;
    console.log('contact: '+JSON.stringify(this.contact));
    if(this.contact.data) {
     return this.contact.data.fields.FirstName.value;
    }
    return undefined;
   }

   get retLastName() {
    debugger;
    if(this.contact.data) {
     return this.contact.data.fields.LastName.value;
    }
    return undefined;
   }

   get retEmail() {
    debugger;
    if(this.contact.data) {
     return this.contact.data.fields.Email.value;
    }
    return undefined;
   }

   get retMobile() {
    debugger;
    if(this.contact.data) {
     return this.contact.data.fields.MobilePhone.value;
    }
    return undefined;
   }
   
   
  }
 

Imperative Apex Call, Toast Message and Navigation Service

Apex Class - Js - Template -

7 comments:

  1. I was just examining through the web looking for certain information and ran over your blog.It shows how well you understand this subject. Bookmarked this page, will return for extra.
    360DigiTMG data analytics course

    ReplyDelete
    Replies
    1. Great Article Cloud Computing Projects

      Networking Projects

      Final Year Projects for CSE

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. You should talk it's shocking. Your blog survey would extend your visitors. I was fulfilled to find this site.I expected to thank you for this phenomenal read!!
    data science certification

    ReplyDelete
  3. I think I have never watched such online diaries ever that has absolute things with all nuances which I need. So thoughtfully update this ever for us.
    difference between analysis and analytics

    ReplyDelete
  4. It's acceptable to check this sort of site. I figure I would such a great amount from you.
    data science course in noida

    ReplyDelete
  5. Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing.data science course in Hyderabad

    ReplyDelete
  6. Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work.data science course in Hyderabad

    ReplyDelete