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!!
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:
Thanks Stephan
I have updated the blog. For more information on this, you can refer my reply on developer community here https://developer.salesforce.com/forums/ForumsMain?id=9060G0000005VbsQAE
My bet is on the inner working of try to replace it with:
and remove the
See what happens!
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!
Please could you help me, how we can add styling to
can i know any examples which has recordeditform in one component and recordviewform in another component on saving of edit form i need to display the view form.