For Developers

lightning:outputField rendering issue when using with lightning:recordViewForm

2 min read
CloudAnswers photo
CloudAnswers
Share
TODO

Background:

lightning:outputField is the recommended tag for lightning:recordViewForm to display field value of the record.

<lightning:recordViewForm recordId="001XXXXXXXXXXXXXXX" objectApiName="Contact">
    <div class="slds-box slds-theme\_default">
        <lightning:outputField fieldName="Name" />
        <lightning:outputField fieldName="Phone"/>
        <lightning:outputField fieldName="Email" />
        <lightning:outputField fieldName="Birthdate" />
        <lightning:outputField fieldName="LeadSource" />
    </div>
</lightning:recordViewForm>

Problem: It gives an error if we populate the data conditionally using aura:if tag.

 <aura:if isTrue="{!v.editMode}">
        <lightning:recordEditForm recordId="{!v.sourceRecordFields.AccountId}" onsuccess="{!c.handleAccountSaved}" objectApiName="Account">
            <lightning:messages />
            <lightning:inputField fieldName="Name" />
            <lightning:inputField fieldName="Phone" />
            <lightning:inputField fieldName="Rating" />
            <lightning:inputField fieldName="Description" />
            <lightning:button variant="brand" type="submit" name="save" label="Save" class="slds-m-top\_medium"/>
        </lightning:recordEditForm>
        <aura:set attribute="else">
        <lightning:recordViewForm recordId="{!v.sourceRecordFields.AccountId}" objectApiName="Account">
            <lightning:outputField fieldName="Name" />
            <lightning:outputField fieldName="Phone" />
            <lightning:outputField fieldName="Rating" />
            <lightning:outputField fieldName="Description" />
            <lightning:button variant="brand" onclick="{!c.editAccount}" name="edit" label="Edit" class="slds-m-top\_medium"/>
        </lightning:recordViewForm>
     </aura:set>
</aura:if>

So, as soon as {!v.editMode} returns false, we get the following error for lightning:outputField.

Cannot read property 'querySelectorAll' of null

Solution: We will use separate lightning:recordEditForm components for editing and viewing the record. And, we will use javascript and CSS to show and hide conditionally.

{Component}.cmp:

<div id="editableDiv" style="display:none;">
   <lightning:recordEditForm recordId="{!v.sourceRecordFields.AccountId}" onsuccess="{!c.handleAccountSaved}" objectApiName="Account">
      <lightning:messages />
      <lightning:inputField fieldName="Name" />
      <lightning:inputField fieldName="Phone" />
      <lightning:inputField fieldName="Rating" />
      <lightning:inputField fieldName="Description" />
      <lightning:button variant="brand" type="submit" name="save" label="Save" class="slds-m-top\_medium"/>
   </lightning:recordEditForm>
</div>
<div id="viewableDiv" style="display:block">
   <lightning:recordViewForm recordId="{!v.sourceRecordFields.AccountId}" objectApiName="Account">
      <lightning:outputField fieldName="Name" />
      <lightning:outputField fieldName="Phone" />
      <lightning:outputField fieldName="Rating" />
      <lightning:outputField fieldName="Description" />
      <lightning:button variant="brand" onclick="{!c.editAccount}" name="edit" label="Edit" class="slds-m-top\_medium"/>
   </lightning:recordViewForm>
</div>

{ComponentController}.js:

({
  editAccount: function (cmp, event, helper) {
    helper.showEditableDiv(cmp);
  },

  handleAccountSaved: function (cmp, event, helper) {
    helper.hideEditableDiv(cmp);
  },
});

{ComponentHelper}.js:

({
   showEditableDiv : function(cmp) {
     var elementEdit = document.getElementById('editableDiv');
     elementEdit.style.display = 'block';
     var elementView = document.getElementById('viewableDiv');
     elementView.style.display = 'none';
   },

   hideEditableDiv : function(cmp) {
     var elementEdit= document.getElementById('editableDiv');
     elementEdit.style.display = 'none';
     var elementView = document.getElementById('viewableDiv');
     elementView.style.display = 'block';
   }
})
``` 

**PS**: This is a temporary solution and can be used until Salesforce delivers a fix for it.

**Happy coding**!!

CloudAnswers photo
CloudAnswers
Share

About CloudAnswers

Salesforce apps, powerful components, custom development, and consulting. Our experienced team helps you to create and modify workflow processes in salesforce.

Related Articles

For Developers

Designing User Security and Visibility in Salesforce

Trust and security are at the top of Salesforce's priority list. The platform has everything you need if you're looking to construct a robust user security paradigm. However, this security approach has flaws that an attacker can exploit to gain access to your data. The Salesforce Architect has the duty to ensure that these features are set up correctly.

March 16, 2022

7 Min Read

For Developers

Batch Apex Error Event - CloudAnswers Hackathon

A hackathon is an event usually put together by a tech organization. The event brings programmers together over a specific period to collaborate on a project.

June 28, 2021

5 Min Read

For Developers

Deploy a Hasura GraphQL API for Salesforce in minutes

Salesforce API limits can stop you from using Salesforce data. Get around that, by using open-source Hasura GraphQL API for Salesforce.

January 12, 2021

3 Min Read