Update on Case Record Detail Page should automatically render my LWC render or re-render

Question

I am trying to build a custom component which I will place on the right side of the case detail page. Whenever, I update a particular field on the Case, based on that change, the custom component should render.

Many Thanks!

Answer 1

To hide or show an entire component, you can do this in the Lightning App Builder. Highlight your component, and on the right hand side, you'll see an option to show the component dynamically. You can enter conditions to determine if the component should be shown.

To make your component reactive, make your component context-aware by using the appropriate public property (@api recordId), then wire the getRecord method.

Note JavaScript is 100% case sensitive, so make sure you don't try to use recordid, RECORDID, or anything else.

If you bind the template to a getter, it will automatically be reactive:

import { LightningElement, wire } from 'lwc';
import { getRecord, getValue } from 'lightning/uiRecordApi';
import CASE__STATUS from '@salesforce/schema/Case.Status';

export default class MyComponent extends LightningElement {
  @api recordId;
  @wire(getRecord, { recordId: '$recordId', fields: [CASE__STATUS] }) caseRecord;
  get caseSubject() {
    return getValue(this.caseRecord.data, CASE__STATUS);
  }
}

Alternatively, you can handle those updates inside a wired function.

import { LightningElement, wire } from 'lwc';
import { getRecord, getValue } from 'lightning/uiRecordApi';
import CASE__STATUS from '@salesforce/schema/Case.Status';

export default class MyComponent extends LightningElement {
  @api recordId;
  caseStatus;

  @wire(getRecord, { recordId: '$recordId', fields: [CASE__STATUS] }) wiredCaseUpdate(result) {
    this.caseStatus = getValue(result.data, CASE__STATUS) || '-- None --';
  }
}

The latter method allows you to use if statements or any other kind of JavaScript to implement your business requirements.