1

Based on the field values of the Account, I want to display/hide parts of the component when it loads for the first time. I have tried so many things unsuccessfully and am hoping someone can help me find a way to do this.

The component sits on the standard Account page, and gets the Account's values from the recordId passed. I added a custom formula field on Account called isOrg__c which is a checkbox (true/false). Regardless of what the value in Org__c is, it sees it as false/undefined.

 <div class="slds-form-element__control slds-m-around_medium">
  <lightning-record-view-form
    record-id={recordId}
    object-api-name="Account">
    <p>Current Verification Status</p>
    <div class="slds-grid slds-box">
      <div class="slds-col slds-size_1-of-2">
        <lightning-output-field field-name="Name"></lightning-output-field>
        <lightning-output-field field-name="isOrg__c"></lightning-output-field>
        <template if:false={isOrg__c}>
          <lightning-output-field field-name="PersonEmail"></lightning-output-field>
        </template>
        <template if:true={isOrg__c}>
          This is an ORG!!!!
        </template>
      </div>
      <div class="slds-col slds-size_1-of-2">
        <lightning-output-field field-name="Membership_Status__c"></lightning-output-field>
        <lightning-output-field field-name="Identity_Status__c"></lightning-output-field>
      </div>
    </div>
  </lightning-record-view-form>
</div>

I added the field to the display to make sure what the value is - it is set to true (checked), so why is it displaying the Email field, and not the 'This is an ORG' text?

enter image description here enter image description here

The JS code:

import { LightningElement, wire, track, api } from "lwc";
import { NavigationMixin } from "lightning/navigation";
import { getRecord, createRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { getObjectInfo } from "lightning/uiObjectInfoApi";
import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";

import ACCOUNT_OBJECT from "@salesforce/schema/Account";
import ISORGFIELD from "@salesforce/schema/Account.isOrg__c";

const FIELDS = [
  "Account.Id",
  "Account.FirstName",
  "Account.LastName",
  "Account.PersonEmail",
  "Account.isOrg__c",
  "Account.isPersonAccount"
];
const DELAY = 300;

export default class VerifyAccount extends NavigationMixin(LightningElement) {

  @track error;
  @track record;
  @track isPerson;
  @track isOrg;

  //Account variables
  @track fname;
  @track lname;
  @track aemail;
  @track aid;

  @api recordId;

  @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
  wiredAccount({ error, data }) {
    if (data) {
      this.record = data;
      this.aid = this.record.fields.Id.value;
      this.fname = this.record.fields.FirstName.value;
      this.lname = this.record.fields.LastName.value;
      this.aemail = this.record.fields.PersonEmail.value;
      this.isPerson = this.record.fields.isPersonAccount.value;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.record = undefined;
    }
  }

  handleLoad(event) {
    this.isOrg = event.detail.data.isOrg__c;
  }

}
1
  • Can you share with us the js code that you tried?
    – Klecool
    May 13, 2020 at 2:55

1 Answer 1

1

{isOrg__c} is trying to refer to a variable in your controller isOrg__c. Presumably, you haven't defined it. Try:

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ISORGFIELD from '@salesforce/schema/Account.isOrg__c';

export default class XYZ extends LightningElement {
  @api recordId; 
  @wire(getRecord, { recordId: '$recordId', fields: [ISORGFIELD] }) record;
  get isOrg() {
    return getFieldValue(this.record.data, ISORGFIELD);
  }
  get isLoaded() {
    return !!this.record.data;
  }
}

   <template if:true={isLoaded}
    <template if:false={isOrg}>
      <lightning-output-field field-name="PersonEmail"></lightning-output-field>
    </template>
    <template if:true={isOrg}>
      This is an ORG!!!!
    </template>
  </template>

Alternatively, the following change should work:

import { LightningElement, api } from 'lwc';
import { getFieldValue } from 'lightning/uiRecordApi';
import ISORGFIELD from '@salesforce/schema/Account.isOrg__c';


export default class XYZ extends LightningElement {
  @api recordId;
  isOrg = false;
  handleLoad(event) {
    this.isOrg = getFieldValue(event.detail.records[this.recordId], ISORGFIELD);
  }
}

<lightning-record-edit-form onload={handleLoad} ...
13
  • I'll try that. Why does it not use the field straight from the Account? It obviously has the value as it displays it. Can't one use the field value like this in a condition?
    – Irene
    May 13, 2020 at 3:27
  • @Irene No, because the lightning-record-view-form has the data, but anything in a {...} refers to data in your own component. A bit of a round-about way, but that's how it works. Note that getRecord should immediately return a cached copy of the record anyways, so it shouldn't matter. The rest of the stuff demonstrated here is just how you'd load a field and make conditions on it, much different than you would in Aura.
    – sfdcfox
    May 13, 2020 at 3:31
  • @Irene Actually, checking the docs, you could probably read the data from the lightning-record-view-form load event, which would save you a bit of boilerplate... Let me edit.
    – sfdcfox
    May 13, 2020 at 3:33
  • I'm getting ' [Cannot read property 'isOrg__c' of undefined]' if I try with the handleLoad(event)?
    – Irene
    May 13, 2020 at 3:50
  • 1
    @salesforce-sas No worries, by the way, it happens to all of us. Also, congrats on 15k in such a short period of time. Your contributions are definitely appreciated.
    – sfdcfox
    May 13, 2020 at 4:26

You must log in to answer this question.

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