*).
html
<template>
<!-- lightning button for open modal window -->
<!--Use template if:true to display/hide popup based on isModalOpen value-->
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_4-of-12 slds-m-bottom--medium">
<lightning-Input type="search" placeholder="Search..." value={accountName}
name="accountName" class="accountName" onchange={handleChangeAccName}></lightning-
input>
</div>
<div class="slds-col slds-size_6-of-12 slds-m-top--medium" style="margin-top: 19px; margin-
left: 10px;">
<lightning-button label="Search Account Name" size="small" variant="brand"
onclick={handleAccountSearch} icon-name="utility:search" icon-position="right"></lightning-
button>
</div>
</div>
<template if:true={contacts.data}>
<lightning-datatable
key-field="Id"
data={contacts.data}
columns={columns1}
>
</lightning-datatable>
</template>
<lightning-card title="Account Records" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={Accounts.data}>
<lightning-datatable
key-field="Id"
data={Accounts.data}
columns={columns}
onrowaction={openModal}
>
</lightning-datatable>
</template>
</div>
</lightning-card>
<template if:true={isModalOpen}>
<!-- Modal/Popup Box LWC starts here -->
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Box LWC header here -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-
hyphenate">Modal/PopUp Box header LWC</h2>
</header>
<!-- Modal/Popup Box LWC body starts here -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<template if:true={getAllAccounts.data}>
<lightning-datatable
key-field="Id"
data={getAllAccounts.data}
columns={columns1}
>
</lightning-datatable>
</template>
</div>
<!-- <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p><b>Modals/Popup Box are used to display content in a layer above the app.
</b></p>
<p><b>This paradigm is used in cases such as the creation or editing of a record, as well
as various types of messaging and wizards.
</b></p>
</div>-->
<!-- Modal/Popup Box LWC footer starts here -->
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={closeModal}
title="Cancel">Cancel</button>
<button class="slds-button slds-button_brand" onclick={submitDetails}
title="OK">OK</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
<!-- <c-paginator onprevious={previousHandler2} onnext={nextHandler2}
onselected={changeHandler2} onfirstpage={firstpagehandler} onlastpage={lastpagehandler}></c-
paginator>-->
</template>
*).js
import { LightningElement, wire, track, api } from 'lwc';
import getAccountList from '@salesforce/apex/dspyAccounts.getAccountList';
import getNext from '@salesforce/apex/dspyAccounts.getNext';
import getPrevious from '@salesforce/apex/dspyAccounts.getPrevious';
import TotalRecords from '@salesforce/apex/dspyAccounts.TotalRecords';
import relatedContact from '@salesforce/apex/dspyAccounts.relatedContact';
import retrieveContactData from '@salesforce/apex/dspyAccounts.retrieveContactData';
const COLS = [
{label: 'Account ID', fieldName: 'Id'},
{label: 'Account Name', fieldName: 'Name'},
{label: 'Industry', fieldName: 'Industry'},
{label: 'Rating', fieldName: 'Rating'},
{label: 'Phone', fieldName: 'Phone'},
{type: "button", typeAttributes: {
label: 'View Contact',
name: 'View',
title: 'View',
disabled: false,
value: 'View',
iconPosition: 'left'
}}
];
const COLS1=[{ label: 'Contact Name', fieldName: 'Name', type: 'text'},
{ label: 'Phone', fieldName: 'Phone', type: 'phone'},
{ label: 'Email', fieldName: 'Email', type: 'email'}
];
export default class DisplayAccounts extends LightningElement {
@track columns = COLS;
@track columns1=COLS1;
@track v_Offset=0;
@track v_TotalRecords;
@track page_size = 10;
@api accName;
@track currentAccountName;
@track searchAccountName;
@track isModalOpen = false;
@track recid;
@track results;
@track error;
//@api getAllAccounts;
handleChangeAccName(event){
this.currentAccountName = event.target.value;
handleAccountSearch(){
this.searchAccountName = this.currentAccountName;
openModal(event) {
//this.currentAccountName = event.target.value;
// this.searchAccountName = this.currentAccountName;
this.recid= event.detail.row.Id;
//console.log(recId);
//console.log(event.target.dataset.id);
//console.log(contacts1);
this.isModalOpen = true;
@wire (retrieveContactData,{keySearch:'$searchAccountName'})contacts;
/*@wire (relatedContact,{accountid:'$recid'})contacts1({ error, data }) {
console.log('hello');
console.log(data);
this.results = data;
this.error = error;
}*/
@wire(relatedContact,{accountid:'$recid'}) getAllAccounts;
// wiredAccount({error, data}){
// if(data){
// this.getAllAccounts = data;
// //this.getAllAccounts.data = data;
// //this.isData = true
// //console.log("Api Data" + this.isData)
// //console.log(this.getAllAccounts)
// console.log('hello world');
// console.log(data);
// }
// if(error){
// console.error(error)
// }
// }
//@wire (retrieveContactData,{keySearch:'$recName'})contacts;
closeModal() {
// to close modal set isModalOpen tarck value as false
this.isModalOpen = false;
submitDetails() {
// to close modal set isModalOpen tarck value as false
//Add your code to call apex method or do some processing
this.isModalOpen = false;
// @wire (retrieveContactData,{keySearch:'$searchAccountName'})contacts;
@wire(getAccountList, { v_Offset: '$v_Offset', v_pagesize: '$page_size' }) Accounts;
//Executes on the page load
/*connectedCallback() {
TotalRecords().then(result=>{
this.v_TotalRecords = result;
});
previousHandler2(){
getPrevious({v_Offset: this.v_Offset, v_pagesize: this.page_size}).then(result=>{
this.v_Offset = result;
if(this.v_Offset === 0){
// this.template.querySelector('c-paginator').changeView('trueprevious');
}else{
// this.template.querySelector('c-paginator').changeView('falsenext');
});
nextHandler2(){
getNext({v_Offset: this.v_Offset, v_pagesize: this.page_size}).then(result=>{
this.v_Offset = result;
if(this.v_Offset + 10 > this.v_TotalRecords){
// this.template.querySelector('c-paginator').changeView('truenext');
}else{
// this.template.querySelector('c-paginator').changeView('falseprevious');
});
changeHandler2(event){
const det = event.detail;
this.page_size = det;
firstpagehandler(){
this.v_Offset = 0;
// this.template.querySelector('c-paginator').changeView('trueprevious');
// this.template.querySelector('c-paginator').changeView('falsenext');
lastpagehandler(){
this.v_Offset = this.v_TotalRecords - (this.v_TotalRecords)%(this.page_size);
// this.template.querySelector('c-paginator').changeView('falseprevious');
// this.template.querySelector('c-paginator').changeView('truenext');
}*/
*).cls
public class dspyAccounts {
@AuraEnabled
public static Integer TotalRecords(){
return [Select count() from Account];
@AuraEnabled(cacheable=true)
public static List<Account> getAccountList(Integer v_Offset, Integer v_pagesize){
return [Select Id,Name,Rating,Industry,Phone from Account limit :v_pagesize OFFSET
:v_Offset];
@AuraEnabled(cacheable=true)
public static List<Contact> retrieveContactData(string keySearch){
List<Contact> contactList = [Select Name,Email,Phone From Contact Where
Account.Name=:keySearch];
return contactList;
@AuraEnabled(cacheable=true)
public static List<Contact> relatedContact(Id accountid)
list<Contact> con1= [Select Name,Email,Phone from Contact where AccountId=:accountid];
return con1;
}
@AuraEnabled(cacheable=true)
public static Integer getNext(Integer v_Offset, Integer v_pagesize){
v_Offset += v_pagesize;
return v_Offset;
@AuraEnabled(cacheable=true)
public static Integer getPrevious(Integer v_Offset, Integer v_pagesize){
v_Offset -= v_pagesize;
return v_Offset;
