0

I have an issue that seems to show that I am missing something in LWC

I have a big Parent component lets call it A This component A has two child component B and C. Both B and C component are using a D component

For some reason even if I am using the same code, one of them is returning Undefined.

Here is my code : Component B:

<td class="slds-size_3-of-12" data-label="Prospecting">
    <div class="lineReturn" title="Prospecting">
         <template if:false={isEdited}> 
                {item.Next_Step_picklist__c}
         </template>
         <template if:true={isEdited}>
             <c-edit-picklist 
                   unique-key={item.Id}    
                   object-api-name="Opportunity"
                   pick-listfield-api-name="Next_Step_picklist__c"
                   selected-value={item.Next_Step_picklist__c}
                   onpicklistchange={handlePicklistChange}>
             </c-edit-picklist>
         </template>
  </div>

Component C:

<td class="slds-size_2-of-12" data-label="Prospecting">
    <div  title="Prospecting">
        <template if:false={isEdited}> 
             {item.Status}
        </template>
        <template if:true={isEdited}>
            <c-edit-picklist 
                 unique-key={item.Id}
                 object-api-name="Lead"
                 pick-listfield-api-name="Status"
                 selected-value={item.Status}
                 onpicklistchange={handlePicklistChange}>
            </c-edit-picklist>
      </template>
  </div>

Component D:

import { LightningElement, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';

export default class EditPicklist extends LightningElement {
    
    value = 'inProgress';
    recordTypeId
    @api objectApiName
    @api selectedValue
    @api uniqueKey
    @api pickListfieldApiName; 


    handleChange(event) {
        console.log("change triggered")
        let tempValue = event.target.value;
        this.value = tempValue
        console.log(tempValue)
        let selectedValue = tempValue;
        let key = this.uniqueKey;
        console.log(key)

        const pickValueChangeEvent = new CustomEvent('picklistchange', {
            detail: { selectedValue, key },
        });
        console.log(pickValueChangeEvent)
        console.log('ReadytoDispatch')
        this.dispatchEvent(pickValueChangeEvent);

    }

    options = [
        { label: 'Default 1', value: 'Default1' },
        { label: 'Default 2', value: 'Default2' },
        { label: '--None--', value: "" }
    ]; 

    @wire(getObjectInfo, { objectApiName: '$objectApiName' })
    getRecordTypeId({ error, data }) {
        if (data) {
            this.record = data;
            this.error = undefined;
            if(this.recordTypeId === undefined){
                this.recordTypeId = this.record.defaultRecordTypeId;
            }
            console.log("Default Record Type Id", JSON.stringify(this.record.defaultRecordTypeId));
        } else if (error) {
            this.error = error;
            this.record = undefined;
            console.log("this.error",this.error);
        }
    }

    @wire(getPicklistValuesByRecordType, { recordTypeId: '$recordTypeId', objectApiName: '$objectApiName' })
    wiredOptions({ error, data }) {
        if (data) {
            console.log("picklist in status", this.pickListfieldApiName)
            this.record = data;
            this.error = undefined;
            let temp_option = []
            this.record.picklistFieldValues[this.pickListfieldApiName].values.forEach((element, index) => {
                var op = {label: element.value, value: element.value }
                temp_option.push(op)
            })
            
            // if (this.objectApiName === 'Opportunity') {
            //     this.record.picklistFieldValues.StageName.values.forEach((element, index) => {
            //         var op = {label: element.value, value: element.value }
            //         temp_option.push(op)
            //     })
            //   } else{
            //     this.record.picklistFieldValues.Status.values.forEach((element, index) => {
            //         var op = {label: element.value, value: element.value }
            //         temp_option.push(op)
            //     }) 
            //   }
            console.log("options", this.options)
            this.options = temp_option
          
            
        } else if (error) {
            this.error = error;
            this.record = undefined;
            console.log("this.error",this.error);
        }
    }

}

As you can see: in my console.log("picklist in status", this.pickListfieldApiName) for one of the compoent I get the valued printed and for the second one it get Undefined... Could you pleae help me to fix it ??

Thx you

Console: enter image description here

8
  • 1
    I think the issue that you don't have Record Types for one of the objects – ytiq May 4 at 12:05
  • In fact .. but that is the issue .. in one component the object-api-name="Opportunity" and in the other it is object-api-name="Lead". However when I consolelog it it is always Opportunity never lead .. and it is why the RecordID is non existant and then I get undefined – Ben2pop May 4 at 12:58
  • The question is how do I make a generic component that is called twice a the same time with different parameters... thx you – Ben2pop May 4 at 12:59
  • you need to make recordTypeId @api and pass to both components – ytiq May 5 at 6:25
  • I am not sure to understand. atAPI is to make a parameter available to another component within the same DOM. the recordTypeID is calculated within the component and not passed to another one .. why should it be atAPI ? I tried it and put @api recordTypeId but not working ... – Ben2pop May 5 at 6:38

Your Answer

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

Browse other questions tagged or ask your own question.