Blog

lightning:outputField rendering issue when using with lightning:recordViewForm

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!!

SFDX Debug

Stream logs to CLI with apex:log:tail

Line Item Content

CPQ Custom Quote Lines

View File Document

Modify CPQ PDF Header and Footer

comments (4)

  1. Stephan H. Wissel

    Your sample with the non-working code is incomplete? You have 2 nested aura:if open, but close only one. Also the outer if wouldn’t show anything when not in edit mode. Might be a copy/paste error into the blog entry. Did you try:

  2. Stephan H. Wissel

    My bet is on the inner working of try to replace it with:

    and remove the

    See what happens!

  3. Stephan H. Wissel

    aarrghhh…. the comment system ate my markup. Add your own angle brackets by replaceing { and }:

    My bet is on the inner working of {aura:set attribute=”else”} try to replace it with:
    {/aura:if}
    {aura:if isTrue=”{! !v.editMode}”}
    and remove the
    {/aura:set}

    See what happens!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Think we can help you? Reach out

%d bloggers like this: