October 2, 2020

iterator:it in Salesforce LWC

HTML:

<template>
    <lightning-card title = "Search Accounts" icon-name = "custom:custom63">
        <div class = "slds-m-around_medium">  
            <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" >
            </lightning-input>  
            <template if:true = {accounts}>                  
                <div style = "height: 300px;">
                    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
                        <tr>
                            <th scope = "col" class="thCSS">Name</th>
                            <th scope = "col" class="thCSS">Industry</th>
                        </tr>
                        <template iterator:it = {accounts}>
                            <tr key = {it.value.Id}>
                                <template if:true = {it.value.customBool}>
                                    <td class = "greenBG">{it.value.Name}</td>
                                    <td class="greenBG">{it.value.Industry}</td>
                                </template>
                                <template if:false = {it.value.customBool}>
                                    <td class = "greyBG">{it.value.Name}</td>
                                    <td class = "greyBG">{it.value.Industry}</td>
                                </template>
                            </tr>
                        </template>
                    </table>
                </div>                  
     
            </template>      
            <template if:true = {error}>  
                {error}>                  
            </template>  
        </div>  
    </lightning-card>  
</template>

JavaScript:

import { LightningElement } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';

export default class Sample extends LightningElement {
     
    accounts;
    error;
 
    handleKeyChange( event ) {
         
        const searchKey = event.target.value;
 
        if ( searchKey ) {
 
            fetchAccounts( { searchKey } )   
            .then(result => {
                
                let rows = JSON.parse( JSON.stringify( result ) );
                
                for ( let i = 0; i < rows.length; i++ ) {  

                    let dataParse = rows[i];
                    
                    if ( i % 2 == 0 )
                        dataParse.customBool = true;
                    else
                        dataParse.customBool = false;
                    
                }
                    
                this.accounts = rows;
                console.log( 'Accounts are ' + this.accounts );
 
            })
            .catch(error => {
 
                this.error = error;
 
            });
 
        } else
        this.accounts = undefined;
 
    }

}

meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

.css:

.greyBG {
    color: white;
    background: grey;
    font-weight: bold;
}

.greenBG {
    color: white;
    background: green;
    font-weight: bold;
}

.thCSS {
    text-align: center;
    font-weight: bold;
    font-size: large;
}

Output:



No comments:

Post a Comment