How To Iterate Array/List In Lightning Web Components (LWC)

How To Iterate Array/List In Lightning Web Components (LWC)

salesforcepoint → Friday, 10 July 2020

How To Iterate List Of Items In LWC

LWC iteration: In this post we will see how to use iteration in Lightning Web Components template. Like aura:iteration in Aura, we have "for:each" in lwc. By using "for:each" we can iterate set of elements/items in lwc html template. We can access element by using for:item and we can get index value with for:index .

Syntax: 

 <template for:each={itemList} for:item="item" for:index="index">  
  {item}  
 </template>  

Iteration in lwc html Example: Iterate List of Accounts.

Create apex class: IterationInLwcController

 public with sharing class IterationInLwcController {  
   @AuraEnabled(cacheable = true)  
   public static List<Account> fetchAccounts(){  
     return [SELECT Id,Name,Phone,Type,Industry,Rating,Website FROM Account LIMIT 100];  
   }  
 }  

Create New Lightning Web Component: iterationInLwc

iterationInLwc.html
If you getting list from wired property then, we need o use list.data to "for:each". Because wired property contains data and error. 

 <template>  
   <lightning-card title="Iteration In LWC">  
     <div class="slds-p-around_small">  
       <template for:each={accounts.data} for:item="account" for:index="index">  
         <div class="slds-p-left_small" key={account.Id}>  
           {account.Name}  
         </div>  
       </template>  
     </div>  
   </lightning-card>  
 </template>  

iterationInLwc.js

 import { LightningElement, wire } from 'lwc';  
 import fetchAccounts from '@salesforce/apex/IterationInLwcController.fetchAccounts';  
 export default class IterationInLwc extends LightningElement {  
   @wire(fetchAccounts) accounts;  
 }  

Output: 

How To Add Hyper Link For Name Column In lightning-datatable in LWC

How To Add Hyper Link For Name Column In lightning-datatable in LWC

salesforcepoint → Tuesday, 23 June 2020

Lightning Web Component (LWC) Examples: Add Hyper Link Url For Name Column/Field In lightning Data Table Example

Hello guys, in this post we are  going to see how to add hyper link url for lwc data table. As we know that if we use lightning-datatable tag we can show list of records data in table. But for name field if we use type:"text" we can't show clickable hyper link for record name on lightning Data Table. If we want display any field or column with link we need to make some tweaks on data what we are going to display on table. So that we can show link and once we click on that it will takes you to respective record page. Check below example code.

Hyper Link For Name field In lightning-datatable in LWC:

Create apex class: OpportunityController

 public with sharing class OpportunityController {  
   @AuraEnabled(cacheable=true)  
   public static List<opportunity> fetchOpportunityList(){  
     return [SELECT Id, Name, StageName,Amount From Opportunity LIMIT 100];  
   }  
 }  

Create Lightning Web Component with name lwcDataTableHyperLink:

lwcDataTableHyperLink.js

 import { LightningElement, wire, track } from "lwc";  
 import getOpportunities from "@salesforce/apex/OpportunityController.fetchOpportunityList";  
 const COLS = [  
  {  
   label: "Name",  
   fieldName: "recordLink",  
   type: "url",  
   typeAttributes: { label: { fieldName: "Name" }, tooltip:"Name", target: "_blank" }  
  },  
  { label: "Stage", fieldName: "StageName", type: "text" },  
  { label: "Amount", fieldName: "Amount", type: "currency" }  
 ];  
 export default class LwcDataTableHyperLink extends LightningElement {  
  cols = COLS;  
  error;  
  @track oppList = [];  
  @wire(getOpportunities)  
  getOppList({ error, data }) {  
   if (data) {  
    var tempOppList = [];  
    for (var i = 0; i < data.length; i++) {  
     let tempRecord = Object.assign({}, data[i]); //cloning object  
     tempRecord.recordLink = "/" + tempRecord.Id;  
     tempOppList.push(tempRecord);  
    }  
    this.oppList = tempOppList;  
    this.error = undefined;  
   } else if (error) {  
    this.error = error;  
    this.oppList = undefined;  
   }  
  }  
 }  

If we see above code we are not assigning wire function data directly to oppList property, instead we are modifying every record to assign link for Name column (tempRecord.recordLink = "/" + tempRecord.Id;).

lwcDataTableHyperLink.html

 <template>  
   <lightning-card title="Data Table In LWC">  
     <div class="slds-box">  
       <lightning-datatable  
       data={oppList} columns={cols} key-field="Id">  
       </lightning-datatable>  
     </div>  
   </lightning-card>  
 </template>  

Output:

 <aura:application extends="force:slds">  
   <c:lwcDataTableHyperLink/>  
 </aura:application>  

How to fire child LWC component function from Parent Aura Component

How to fire child LWC component function from Parent Aura Component

salesforcepoint → Saturday, 20 June 2020

Fire child lwc component function from Aura component function:

In this post we will learn how to fire or call function which is in child lwc component when some event occurred on parent lightning aura component.


If we want to call child lwc component function then

• Child LWC component function should be public (decorated with @api). 
• On parent aura function we need to get child component by using aura:id  and then we can invoke child function (We should give same function name defined in child lwc). 

Check below example code, On parent aura component we have lightning button called "Click Me", once we click on button, "Parent aura function Invoked" and  checkbox on child component will be checked which is unchecked by default.

childLwc.js

 import { LightningElement, track, api } from 'lwc';  
 export default class ChildLwc extends LightningElement {  
   @track checkBoxChecked = false;  
   @api childFunction(){  
    console.log("Child LWC Component method invoked");  
    this.checkBoxChecked = true;  
  }  
 }  

childLwc.html

 <template>  
   <div class="slds-box">  
     <p>I am from Child LWC Component</p><br/>  
     <lightning-input type="checkbox" label="Parent function Invoked"   
      checked={checkBoxChecked} name="input1"></lightning-input>  
   </div>  
 </template>  

LwcInAuraCmp.cmp

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,  
               flexipage:availableForRecordHome,  
               force:hasRecordId,force:lightningQuickAction" access="global" >  
  <div class="slds-box">  
     <p>This is parent lightning component</p>  
     <lightning:button variant="brand" label="Click Me" onclick="{! c.handleClick }" />  
   </div>  
   <c:childLwc aura:id="childLwc"></c:childLwc>  
 </aura:component>  

LwcInAuraCmpController.js

 ({  
  handleClick : function(component, event, helper) {  
     console.log("Parent aura component method invoked");  
     component.find('childLwc').childFunction();   
  }  
 })  

TestApp

 <aura:application extends="force:slds">  
   <c:LwcInAuraCmp/>  
 </aura:application>  

Output:

Once we click "Click Me" button, checkbox on child lwc component will be checked automatically.

On Console:

Related Posts: Fire child LWC component function from parent LWC function

How to invoke/call child lightning web component function from parent lightning web component

How to invoke/call child lightning web component function from parent lightning web component

salesforcepoint →

Call child LWC component function from parent LWC function

In this post we will see how to fire or invoke function which is in child component when some event occurred on parent component in lwc.

In our project requirements we may get a situation to call Child Lightning web component function from corresponding parent Lwc component when some event occurs like button click.
If we want to call child component function then

• Child LWC component function should be public (decorated with @api). 
• On parent function we need to get child component by name(using template.querySelector)  and then we should invoke child function (We should give same function name defined in child). 

Check below example, On parent component we have button called "Click Me", once that button clicked, "Parent function Invoked" checkbox on child component will be checked which is unchecked by default.

childLwc.js

 import { LightningElement, track, api } from 'lwc';  
 export default class ChildLwc extends LightningElement {  
   @track checkBoxChecked = false;  
   @api childFunction(){  
    console.log("Child LWC Component method invoked");  
    this.checkBoxChecked = true;  
  }  
 }  

childLwc.html

 <template>  
   <div class="slds-box">  
     <p>I am from Child LWC Component</p><br/>  
     <lightning-input type="checkbox" label="Parent function Invoked"   
      checked={checkBoxChecked} name="input1"></lightning-input>  
   </div>  
 </template>  

parentLwc.js

 import { LightningElement } from 'lwc';  
 export default class ParentLwc extends LightningElement {  
  onButtonClick(){  
    console.log("Parent LWC component function invoked")  
   this.template.querySelector("c-child-lwc").childFunction();  
  }  
 }  

parentLwc.html

 <template>  
   <div class="slds-box">  
     <p>Parent LWC componenet</p>  
     <lightning-button variant="brand"   
     label="Click Me"  
     onclick={onButtonClick} class="slds-m-left_x-small"></lightning-button>  
   </div>  
   <c-child-lwc></c-child-lwc>  
 </template>  

Output:

Once we click on "Click Me" Button, Checkbox on child will be checked automatically.


On console:

Related Posts: Invoke child lwc component function from Parent lightning component function.