0

I built a LWC to try to display related placement record information in a table on the case record, where the cell background-color for each placement record to change based on the status of the placement record recieved from the controller. When the placement status is "Pending" the background color needs to YELLOW and GREEN if the placements status is "Confirmed". The end result should be similar to: NeededResult

When I deployed the below LWC and deployed it to case lightning record page I keep getting an error with the following message: "Cannot read property 'recordId' of undefined".

How can I properly pass the Case recordId from my LWC to the Apex controller?

My LWC HTML:

<template>
  <div>
    <table>
      <tr>
        <th style="padding: 5px 10px; border: 1px solid black">Courses</th>
        <template for:each={placements.data} for:item="placement">
          <td key={placement.Id} class={placement.Placement_Status__c}>
            {placement.Course__c.Name}
          </td>
        </template>
      </tr>
    </table>
  </div>
</template>

My LWC js:

import { LightningElement, api, track, wire } from "lwc";
import getPlacements from "@salesforce/apex/getPlacementData.getPlacements";

/** The delay used when debouncing event handlers before invoking Apex. */
const DELAY = 300;

export default class PlacementSummarylwc extends LightningElement {
  @api recordId;

  @wire(getPlacements, { caseid: this.recordId })
  placements;
}

My LWC Controller Class:

public with sharing class getPlacementData {

    @AuraEnabled(cacheable=true)
    public static List<Placement__c> getPlacements(Id caseid){
        try {
            return[ SELECT Id, Course__r.Name, Placement_Status__c FROM Placement__c WHERE Case__r.Id = :caseid ];
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

My LWC CSS:

.THIS .Pending {
  background-color: #fffb00;
}

.THIS .Confirmed {
  background-color: #00c32b;
}

My LWC Config file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Case</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
1
@wire(getPlacements, { caseid: this.recordId })

In this context, where you're defining a class, you don't have an instance this to reference. Instead, use a reactive reference to bind the input to the wire:

@wire(getPlacements, { caseid: '$recordId' })

See the documentation on wire adapters for more.

2
  • I applied this change and it removed the error but it is not showing any data. I know the query in the controller is working. I tested this out in developer console and it works when case ID is provided. – Varun Panchal Mar 13 at 22:38
  • @Varun, it looks like your HTML {placement.Course__c.Name} should be {placement.Course__r.Name}. Also, along those lines, in your Apex you can just reference the lookup field when comparing IDs: WHERE Case__c = :caseid ]; – gale-force-wizard Mar 14 at 18:22

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.