0

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!

1 Answer 1

0

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.

5
  • It seems, I have not done a good job explaining the problem. On Case Record Detail page (standard), If I am changing a picklist field (e.g. type) value from its current value to another value. Then, upon this change based on the new 'type' value, it should automatically trigger an event that has to be captured by custom component react accordingly. Is any such thing possible? Thank you!
    – vishnu.b
    May 2, 2023 at 10:48
  • @vishnu.b Components only respond to saved database changes. There's no way to know that a user simply changed a value on screen.
    – sfdcfox
    May 2, 2023 at 11:07
  • Understood. Could this be possible through a platform event or change data capture, So that the my custom component can listen to the change event and react accordingly?
    – vishnu.b
    May 2, 2023 at 12:17
  • @vishnu.b If you use getRecord, those changes should automatically be streamed to your component. That aside, lightning-empapi grants you access to both PE and CDC events, you just have to subscribe to whichever you want.
    – sfdcfox
    May 2, 2023 at 13:53
  • yeah, @sfdcfox, I am currently trying that. Thank you :)
    – vishnu.b
    May 2, 2023 at 15:02

You must log in to answer this question.

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