lightning:outputField rendering issue when using with lightning:recordViewForm
2 min readBackground:
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**!!
Related Articles
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
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
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