Problem : I have my LWC inside an Order page, but can't retrieve the recordid which is undefined.

Here's a screenshot of my LWC:

  • the header is the standard part with data stored in SF
  • below the Collapse/Expand link, is custom and I retrive data from an API without storing it in SF enter image description here

Here's my code:

JS file:

import { LightningElement, track, api } from 'lwc';
import getCustomerOrder from '@salesforce/apex/icCTRLCustomerOrder.getCustomerOrder';

export default class IcOrderDetails extends LightningElement {

@track customerOrder;
@track doDetail;
@track paymentDetail;
@track doDetails;
@api recordId;
    console.log('recordId ', this.recordId);
    let customerOrderNumber = 'XXXXXX';

    .then(data => {

        this.customerOrder = data;
        this.doDetails = data.paymentDetails;
        console.log('this.customerOrder ', this.customerOrder);

        for(let i = 0; i < data.doDetails.length; i++){
            this.doDetail = data.doDetails[i]; 
            for(let j = 0; j < data.doDetails[i].doLineItems.length; j++) {
                this.doLineItem = data.doDetails[i].doLineItems[j]; 


        for(let i = 0; i < data.paymentDetails.length; i++){
            this.paymentDetail = data.paymentDetails[i];

    }).catch(error => {
        window.console.log('callout error ', JSON.stringify(error));


Meta file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

HTML file:

 <lightning-record-view-form record-id={recordId} object-api-name="Order">
  <template if:true={customerOrder}>
      <div class="slds-form" role="list" >
        <div class="slds-form__row">
          <div class="slds-form__item" role="listitem">
            <div class="slds-form-element slds-form-element_readonly slds-form-element_horizontal slds-hint-parent">
              <span class="slds-form-element__label">
                Shipping Address</span>
              <div class="slds-form-element__control">
                <div class="slds-form-element__static">
                  <template if:true={doLineItem.shippingInfo}>

                    {doLineItem.shippingInfo.shippingAddress.firstName} {doLineItem.shippingInfo.shippingAddress.lastName}
              <br />{doLineItem.shippingInfo.shippingAddress.addressLine1} {doLineItem.shippingInfo.shippingAddress.addressLine2}
              <br />{doLineItem.shippingInfo.shippingAddress.city} {doLineItem.shippingInfo.shippingAddress.stateProv} {doLineItem.shippingInfo.shippingAddress.postalCode}
  </template >

I've looked at multiple posts but already did the solutions that were given. What did I miss ?

ETA complete JS file

  • I assume this code is a simplified version. You may have simplified too far, as you could be running into an order of operations issue but have shown little of your component which consumes this variable.
    – Adrian Larson
    Jul 29, 2021 at 15:32
  • yeah it's a simplified version, you're right let me edit my question
    – chloe
    Jul 29, 2021 at 15:34

1 Answer 1


I got it. I had everything right but was trying to retrieve the recordid from the wrong component.

My component is inside another and it's this one which is on the record page.

Hope I can help someone so they won't waste as much time as me today...

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .