lightning:outputField rendering issue when using with lightning:recordViewForm

Background:

lightning:outputField is the recommended tag for lightning:recordViewForm to display field value of 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: Unfortunately it gives error if we populate 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 error for lightning:outputField.

Solution:  Lets talk about solution. Here javascript and css plays good role 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';
}
 
})


Note: This is temporary solution and can be use until Salesforce fix it.

Happy coding!!

Thanks
Gulshan Raj
Sr. Developer

https://www.cloudanswers.com/