+ Start a Discussion
The new LearnerThe new Learner 

how to show the related list along with pageniation

Hi  Experts,
 
I have requirement as follows , need to create a dropdown of accounts and on selecting specific account get a related list of contact with a specific field of that account with pagination
CharuDuttCharuDutt
Hii The New Learner
Try Below Code
<template>
    <lightning-card title='Multi Object Custom LookUp'>
        <div class="slds-form-element ">
            <div class="slds-form-element__control">
                <div class="slds-combobox_container">
                    <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
                        aria-haspopup="listbox" role="combobox">
                        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
                            role="none">
                            <template if:false={selectedRecord}>
                                <div class="bb">
                                    <lightning-input id="combobox-id-1" placeholder={placeholder}
                                        onchange={searchRecords} value={searchString} aria-controls="listbox-id-1" style="border: hidden;">
                                    </lightning-input>
                                    <span
                                        class="slds-icon_container slds-icon-utility-down SearchIcon slds-input__icon slds-input__icon_right">
                                        <lightning-icon icon-name="utility:search" size="x-small"
                                            alternative-text="search"></lightning-icon>
                                    </span>
                                    <template if:true={isLoading}>
                                        <lightning-spinner size="small" variant="brand"></lightning-spinner>
                                    </template>
                                </div>
                            </template>

                            <template if:false={selectedRecord}>
                                <template if:true={showRecordsList}>
                                    <div id="listbox-id-1"
                                        class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox">
                                        <ul class="slds-listbox slds-listbox_vertical recordListBox"
                                            role="presentation">
                                            <template for:each={records} for:item="recList">
                                                <li role="presentation" class="slds-listbox__item" key={recList.id}>
                                                    <div class="slds-media slds-listbox__option 
                                slds-listbox__option_entity 
                                slds-listbox__option_has-meta" data-filter={recList.id} data-id={recList.Name}
                                                        role="option" onclick={handleSelect}>
                                                        <lightning-icon class=" slds-m-around_x-small"
                                                            icon-name='standard:account' alternative-text="objectIcon">
                                                        </lightning-icon>
                                                        <span class="slds-media__body">
                                                            <span
                                                                class="slds-listbox__option-text slds-listbox__option-text_entity slds_optiontxt slds-m-top_small">{recList.Name}</span>
                                                        </span>
                                                    </div>
                                                </li>

                                            </template>
                                        </ul>
                                    </div>
                                </template>
                            </template>
                            <div>
                                <template if:true={selectedRecord}>
                                    <div class='slds-m-around_x-small'>
                                        <div class="slds-combobox__form-element slds-input-has-icon 
                                    slds-input-has-icon_left-right" role="none">
                                            <span class="slds-icon_container
                                        slds-icon-standard-account 
                                        slds-combobox__input-entity-icon" title="Account">
                                                <lightning-icon icon-name={iconname} size="x-small"></lightning-icon>
                                            </span>
                                            <input class="slds-input slds-combobox__input
                                   slds-combobox__input-value" id="combobox-id-5" aria-controls="listbox-id-5"
                                                autocomplete="off" role="textbox" type="text"
                                                placeholder="Select an Option" readonly="" value={selectedRecord.Name}
                                                disabled />
                                            <button class="sicon_container slds-button slds-button_icon 
                                           slds-input__icon slds-input__icon_right" title="Remove selected option"
                                                onclick={handleRemove}>
                                                <lightning-icon icon-name="utility:close" size="x-small">

                                                </lightning-icon>
                                                <span class="slds-assistive-text">Remove selected option</span>
                                            </button>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <template if:true={newRecordForm}>
            <div class="slds-box slds-theme_shade">
                <div class="slds-modal slds-fade-in-open slds-backdrop">
                    <div class="slds-modal__container">
                        <!--HEADER Section-->

                        <div class="slds-modal__header">
                            <lightning-button-icon icon-name="utility:close" alternative-text="Close this window"
                                size="large" variant="bare-inverse" onclick={closeModal} class="slds-modal__close">
                            </lightning-button-icon>
                            <h2>Create New Record</h2>
                        </div>
                        <!---Body Section-->
                        <div class="slds-modal__content slds-p-around_medium">
                            <lightning-record-form object-api-name={selectedObject} layout-type="Full" columns="2"
                                onsuccess={handleSuccess}>
                            </lightning-record-form>
                        </div>
                        <!------Footer Section
                        <div class="slds-modal__footer">  
                          </div>
                        -->
                    </div>
                </div>
            </div>
        </template>


          <div class="slds-m-around_medium">
          <lightning-datatable 
             key-field="Id" 
             data={data}               
             columns={columns} 
             sorted-by={sortedBy}
             sorted-direction={sortedDirection} 
             onsort={sortColumns} 
             onrowaction={handleRowAction}>
          </lightning-datatable>
          </br>
          <lightning-layout horizontal-align="space">
             <lightning-layout-item flexibility="auto">
                <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}>
                </lightning-button>
             </lightning-layout-item>
             <lightning-layout-item flexibility="auto">
                Page {page} of {totalPage} total no of records-{totalRecountCount}
             </lightning-layout-item>
             <lightning-layout-item flexibility="auto">
                <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right"
                   onclick={nextHandler}></lightning-button>
             </lightning-layout-item>
          </lightning-layout>
       </div>
    </lightning-card>
</template>


###################################################################################################################


// import { LightningElement,api,track,wire } from 'lwc';
// import fetchListView2 from '@salesforce/apex/CustomListViewInLwcCtrl.fetchListView2';
// const columns = [
//     { label: 'Label', fieldName: 'Name'},
//     { label: 'AnnualRevenue', fieldName: 'AccountName'},
// ];
// export default class PracticeComponent extends LightningElement {
//     columns = columns;
//     @track tableData;
  
//     @wire(fetchListView2)
//     wireddata({ error, data }){
//     if (data) 
//     {    var ObjData = JSON.parse(JSON.stringify(data));
       
//     alert('Before====> '+ JSON.stringify(ObjData));
        
        
//     alert(ObjData[0].Account.Name);
//      ObjData.forEach(Record => {
         
//         Record.AccountName =  Record.Account != undefined ? Record.Account.Name: '';
//         });
//         alert('After====> '+ JSON.stringify(ObjData));
//         this.tableData = ObjData;
        
//         }
//     else if (error) {
//             this.error = error;
//             this.data = undefined;
//         }
//     }
// }

import { LightningElement,api,track,wire } from 'lwc';
import fetchRecords from '@salesforce/apex/LookupController.fetchRecords';
import controller from '@salesforce/apex/LwcCtrl.controller';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
const columns = [{ label: 'Id', fieldName: 'Id' },
    { label: 'Label', fieldName: 'Name' },
    { label: 'AccountName', fieldName: 'AccountName'},
    { label: 'AccountRating', fieldName: 'AccountRating'},
];
export default class PracticeComponent extends LightningElement {
    @api iconname = 'standard:account';
    columns = columns;
    data;
    @track errors;
    @track selectedRecord;
    @track records=[];
    srchObject;
    searchString;
    selectedObject;
    selectedObjectlabel;
    placeholder = 'Search';
    isLoading = false;
    showRecordsList = false;
    newRecordForm = false;
    wiredActivities;
    
    wiredActivities;
    searchRecords(event) {
        this.searchString = event.target.value;
        const inputVal = this.searchString;
        const obj = "Account";//this.selectedObject;
        fetchRecords({
            objectName: obj,
            searchString: inputVal
        })
            .then(result => {
                console.log(' Records Are ', result);
                this.isLoading = true;
                this.records = result;
                this.showRecordsList  = true;
                this.isLoading = false;
                this.errors = undefined;
            })
            .catch((error) => {
                console.log('Error' + error);
            });
    }
    handleSelect(event) {
        
        const recId2 = event.target.dataset.id;
        alert(recId2);
        const selectedRec = this.records.find(
            record => record.Name === recId2
        );
        alert(' Selected Record '+ JSON.stringify(selectedRec));
        this.selectedRecord = selectedRec;
        this.searchString = null;
        controller({recId: selectedRec.Name})
        .then( (result) => {
           var ObjData = JSON.parse(JSON.stringify(result));
       
        alert('Before====> '+ JSON.stringify(ObjData));
        
        ObjData.forEach(record => {
         
        record.AccountName =  record.Account != undefined ? record.Account.Name: '';
        record.AccountRating =  record.Account != undefined ? record.Account.Rating: '';
        });
        alert('After====> '+ JSON.stringify(ObjData));
        this.data = ObjData;
        })
    }
    handleRemove() {
        this.selectedRecord = undefined;
        this.showRecordsList = false;
        this.errors = undefined;
        this.records = undefined;
    }
    blurRecordList(){
        this.showRecordsList = false;
    }
    closeModal(){
        this.newRecordForm = false;
    }
}


###################################################################################################################

 @AuraEnabled(cacheable=true)
    public static list<contact> Contact(string recId){

        list<contact> lstListView = [SELECT Id, Name,Account.Name,Account.Rating,AccountId FROM contact WHERE Account.Name = :recId];
    return lstListView;
    }
Pleaser Mark It As Best Answer If It Helps
Thank You! 
The new LearnerThe new Learner
Hi Charu,

Thanks for the reply, However, I need to create a dropdown of accounts and on selecting specific account get a related list of contact with a specific field of that account with pagination, I have tried ur code, in the search box I have tried to open the record but it was showing below error.

Just make small modification as below  because it throwing an error that LwcCtrl.controller is not there so i commented and added below lines kindly correct me

import fetchRecords from '@salesforce/apex/LookupController.Contact';
//import controller from '@salesforce/apex/LwcCtrl.controller';


 wiredActivities;
    searchRecords(event) {
        this.searchString = event.target.value;
        const inputVal = this.searchString;
        const obj = "Account";//this.selectedObject;
        Contact({
            objectName: obj,
            searchString: inputVal
        })
            .

User-added image