0

I am creating a Lightning Component for a Case Record page to display a banner. I want to import some of the Case fields so I can conditionally show and hide the banner.
There are no actions to launch this - the banner just displays when the page renders.

In the example below the recordId is outputting, but the custom formula text field Support Level is undefined. I confirmed there value is set on my test Cases.

Should I not put this under a connected callback?

JS

import {LightningElement, api, wire} from 'lwc';
import {getFieldValue,getRecord} from 'lightning/uiRecordApi';

import field_SupportLevel from '@salesforce/schema/Case.Support_Level__c';

export default class CaseBannner extends LightningElement {
  @api recordId;

  @wire(getRecord, {recordId: '$recordId', fields: [field_SupportLevel]}) case;

  get supportLevel() {
    return (getFieldValue(this.case.data, field_SupportLevel));
  }

  showPremium;
  renderedCallback(){
    if(this.supportLevel === 'Premium'){
      this.showPremium = true;
    }
    console.log('recordId = ' + this.recordId);
    console.log('supportLevel = ' + this.supportLevel);
  }
}

HTML

<template>
  <div if:true={showPremium} class="slds-m-bottom_x-small">
    <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_success" role="alert">
      <span class="slds-icon_container slds-m-right_x-small" title="Description of icon when needed">
        <lightning-icon icon-name="utility:opportunity" size="x-small" variant="inverse"></lightning-icon>
      </span>
        <h2>Premium Customer</h2>
    </div>
  </div>
</template>

1 Answer 1

1

In your code, the issue might be that the renderedCallback lifecycle hook is executing before the @wire function fetches the record data, resulting in this.case.data being undefined at that point. The renderedCallback may not be the ideal place to handle this logic.

To ensure that the banner is displayed correctly, you can use the connectedCallback lifecycle hook to handle the logic once the component is connected to the DOM and the record data is available.

or else try like below

@wire(getRecord, { recordId: '$recordId', fields: [field_SupportLevel] })
  wiredCase({ error, data }) {
    if (data) {
      this.supportLevel = getFieldValue(data, field_SupportLevel);
      if (this.supportLevel === 'Premium') {
        this.showPremium = true;
      }
      console.log('recordId = ' + this.recordId);
      console.log('supportLevel = ' + this.supportLevel);
    } else if (error) {
      // Handle error
    }
  }
1
  • thanks! I had previously tried using a connectedCallback with no success. I implemented your suggestion and this worked! May 19, 2023 at 12:47

You must log in to answer this question.

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