EP-33 | Wrapper Class data | Custom Table | Checkbox | Selected Records | get List Index in LWC ☁️⚡️

Kapil September 04, 2021

  LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

Please check complete code below from LWC Stack EP-33

In this blog you will find code for below points, to understand it better do watch below video tutorial :

✔️ How to pass wrapper class data to LWC ✔️ Use checkbox to select data ✔️ Use custom table ✔️ Get index from custom table ✔️ Get selected data ✔️ Pass selected data back to wrapper class in Apex


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
  <div style="padding: 10px">
    <div style="padding: 10px">
      <table
        class="
          slds-table
          slds-table_cell-buffer
          slds-table_bordered
          slds-table_col-bordered
        "
        border="1"
        width="100%"
      >
        <thead>
          <tr class="slds-line-height_reset">
            <td>
              <lightning-input
                type="checkbox"
                onchange={handleAllChange}
              ></lightning-input>
            </td>
            <td style="font-weight: bold">Account Name</td>
            <td style="font-weight: bold">Phone</td>
          </tr>
        </thead>
        <template for:each={accList} for:item="acc">
          <tr key={acc.Id} class="slds-hint-parent">
            <td>
              <lightning-input
                type="checkbox"
                checked={acc.isSelected}
                onchange={handleCheckChange}
                value={acc.index}
              ></lightning-input>
            </td>
            <td>{acc.AccountName}</td>
            <td>{acc.Phone}</td>
          </tr>
        </template>
      </table>
    </div>
    <br />
    <lightning-button
      variant="brand"
      label="Get Selected Accounts"
      onclick={getSelectedAccounts}
    ></lightning-button>
  </div>
</template>

Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { wire, LightningElement } from "lwc";
import getAccList from "@salesforce/apex/wrapperTable.getAccounts";

export default class WrapperTable extends LightningElement {
  selectedAccounts = [];
  accList;
  @wire(getAccList)
  wiredRecord({ error, data }) {
    if (error) {
      let message = "Unknown error";
      if (Array.isArray(error.body)) {
        message = error.body.map((e) => e.message).join(", ");
      } else if (typeof error.body.message === "string") {
        message = error.body.message;
      }
    } else if (data) {
      this.accList = JSON.parse(data);
    }
  }
  handleAllChange(event) {
    for (var i = 0; i < this.accList.length; i++) {
      this.accList[i].isSelected = event.target.checked;
    }
  }
  handleCheckChange(event) {
    this.accList[event.target.value].isSelected = event.target.checked;
  }
  getSelectedAccounts(event) {
    for (var i = 0; i < this.accList.length; i++) {
      if (this.accList[i].isSelected) {
        this.selectedAccounts.push(this.accList[i]);
      }
    }
    console.log("###Selected Accounts" + this.selectedAccounts.length);
    console.log("###Stringify : " + JSON.stringify(this.selectedAccounts));
  }
}

APEX

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public with sharing class wrapperTable {
    public wrapperTable() {

    }
    @AuraEnabled(cacheable=true)
	public static String getAccounts(){
        Integer rowIndex = 0;
        List<accountWrap> accWrapList = new List<accountWrap>();
		try {
            List<Account> accList = [SELECT Id, Name, Phone FROM Account limit 10];
            for(Account a : accList){
            accWrapList.add(new accountWrap(a.Id,a.Name,a.Phone,rowIndex));
            rowIndex++;
            }
            return JSON.serialize(accWrapList);
		} catch (Exception e) {
			throw new AuraHandledException(e.getMessage());
		}
	}
    public class accountWrap{
        public String Id;
        public String AccountName;
        public String Phone;
        public Boolean isSelected;
        public Integer index;
	    public accountWrap(String Id, String AccountName, String Phone, Integer index){
            this.Id = Id;
            this.AccountName = AccountName;
            this.Phone = Phone;
            this.isSelected = false;
            this.index = index;
		}
            
    }
}

Output



Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments