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

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

Save DOM Element As Image Attachment In Salesforce

Use a dom-to-image Javascript library that can turn arbitrary DOM nodes into a vector (SVG) or raster (PNG or JPEG) image in Salesforce.

April 8, 2021

3 Min Read

For Developers

Embed Image In Conga Document Using Salesforce ID

Learn how you can embed an image uploaded as a Salesforce Attachment in a Conga Document. Use the Conga IMAGE tag you can embed images.

February 25, 2021

4 Min Read