0

So I have a component on the record page (let's say Account), and I want to show or hide this component based on the field value in this record (lets say checkbox TestCheckbox__c). Tried to do it in the following way:

<template>
<lightning-card title="Lightning Web Component" icon-name="custom:custom14" if:true={show}>
    <div class="slds-var-m-around_medium">
        <h2>Hello World!</h2>
    </div>
</lightning-card>
import { LightningElement, api, wire } from 'lwc';
import canShow from '@salesforce/apex/AccountComponentController.canShow';
export default class AccountComponent extends LightningElement {
@api recordId;
show;

@wire(canShow, {recordId: '$recordId'}) 
showed({ error, data }) {
    console.log('### data:');console.log(data);console.log('### error:');console.log(error);
    if (data) {
        this.show = data;
    }
}
}

Controller:

public without sharing class AccountComponentController {

@AuraEnabled(cacheable=true)
public static Boolean canShow(String recordId){
    Account account = [SELECT Id, TestCheckbox__c FROM Account WHERE Id = :recordId];
    return account.TestCheckbox__c;
}

}

It works ok when the page is loaded, but the problem is that once the field of the records is updated, it would not refresh the component, and so, even if it should not be shown anymore, the component is still there. After page refresh it's, of course, displayed correctly again, but I want it to be refreshed dynamically.

1
  • Not sure is it's a valid approach, but I was able to make it work after wired get record: @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD, ACCOUNT_CHECKBOX] }) account; and passed the additional property to another wired method: @wire(canShow, {recordId: '$recordId', record: '$account'}) showed({ error, data }) {...}
    – Oleksii
    May 23 at 13:02
3

There is a better way to handle the component visibility. Try lightning page component visibility feature for the same. This will show or hide component based on the updated value dynamically.

Refernce: https://help.salesforce.com/articleView?id=sf.lightning_page_components_visibility.htm&type=5

enter image description here

2
  • Unfortunatelly this is not an option. The example provided is very simplified, but in reality, the conditions should be based on couple of fields, including date field, which is not possible in this way.
    – Oleksii
    May 23 at 18:19
  • You have not mentioned about date field requirement, that is why shared this solution. Yes, with date field you cannot use this feature, as a workaround i would suggest to create a formula field to handle date related requirement and use that in combination with the other fields which are available in visibility field options. May 24 at 6:14
2

A simple approach would be to put a component visibility on the component using Lightning App Builder. There can be two scenario:-

  1. If you are looking to show/hide whole component, You don't need to write any logic for this in your LWC.
  2. If you are looking to show/hide any specific content of the LWC, Your current logic would automatically work as component visibility will make sure to reload your component.

To know more on Component Visibility, See this.

1
  • Unfortunatelly this is not an option. The example provided is very simplified, but in reality, the conditions should be based on couple of fields, including date field, which is not possible in this way.
    – Oleksii
    May 23 at 18:19
1

Salesforce OOTB components are not reactive to changes in the db. However, you can make your components reactive by using the lightning emp api or Change Data Capture

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.