4

Here are my Components: Child Component html :

<template>
    <lightning-card>
        <div class="slds-m-around_medium " onload={handleLoad}>    
            <div class="slds-form-element">
                <lightning-input label="Search" value={searchKey}  minlength="1"
                                 onkeyup={handleLoad}>   
                </lightning-input>
            </div>
            <template if:true={records.data}>
                <template for:each={records.data} for:item="record">
                    <div class="zoom slds-pill-container" key={record.Id} data-contact-id={record.Id} >
                        {record.Name}
                    </div>
                </template>
            </template>
            <template if:false={records.data}>  
                <p>No {selectedsobject} data available.</p>  
            </template>  
            <template if:true={error}>
                Error fetching {selectedsobject} records.. 
            </template>
        </div>
    </lightning-card>
</template>

childComponent.js

import { LightningElement,track,wire,api } from 'lwc';
import getsearchContactList from '@salesforce/apex/ContactController.getsearchContactList';

export default class ContactController extends LightningElement {

    @track records;
    @track error;
    @api recordId;
    @api selectedsobject;
    @api wherefield;
    @api searchKey = '';
    @track recordKey = '';


    @wire(getsearchContactList, {recordKey: '$recordKey' , searchKey: '$searchKey' , selectedsobject: '$selectedsobject' , wherefield:'$wherefield'}) 
    records ;

    handleLoad(event) {

        this.searchKey = event.target.value;
        getsearchContactList({

            selectedsobject : this.selectedsobject, 
            wherefield : this.wherefield
        })

    }
    connectedCallback(){
        this.recordKey = this.recordId;
    }
}

and here is the Parent Component

<template>

<c-childcomponent selectedsobject="Contact" where-field="AccountId" ></c-childcomponent>

</template>
  • 2
    Welcome to SFSE. Pls use {} for code formatting – salesforce-sas Sep 26 '19 at 14:01
  • Thank You Salesforce-sas for Editing my Question. and yes this is my first Question :) – Padam Sep 26 '19 at 14:03
5

Lightning page can provide recordId only to the top most custom LWC/AURA component. You need to pass down the record id down the hierarchy.

Make a Component Aware of Its Record Context: Define @api recordId in parent component in JS file.

Now, pass the record id to child:

<c-childcomponent record-id={recordId} selectedsobject="Contact" where-field="AccountId" ></c-childcomponent>
  • 1
    Thank you so much Salesforce-SAS. This worked like a Charm. You are the Best :) – Padam Sep 26 '19 at 14:21
  • Using the above child LWC component, 1 last scenario I am working on is to embed LWC in Aura and pass the parameters in LWC. All other paramertes are working except recordId {<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global"> <aura:attribute name="recordId" type="String" /> <c:childcomponent selectedsobject="Contact" recordId="{!v.recordId}" wherefield="AccountId" /> </aura:component>} – Padam Sep 26 '19 at 16:52
  • what you are asking is not clear to me as its comment, i suggest you create another question with detailed explanation so that anybody from community can answer – salesforce-sas Sep 26 '19 at 16:57
  • Still trying to see how can I use {} to format code on this site ,here is the question :salesforce.stackexchange.com/questions/279592/… :) – Padam Sep 26 '19 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.