+ Start a Discussion
PaulTPaulT 

Lightning Out - recordEditForm/recordViewForm

The recordEditForm and recordViewForm, while not supported in Lightning Out, do work apart from two errors, neither of which appear to affect the functionality.

Is there any way of preventing these error from displaying so that we can use these components?

The steps to reproduce this: https://github.com/paulroberttaylor/lightning-out-recordeditform
Best Answer chosen by PaulT
GulshanRajGulshanRaj
Hello,

What I understood is after clicking on edit, the  <lightning:outputField still searching for binding data with  <lightning:recordViewForm. I have a simple solution by displaying and hiding using javascript and style within div. Here is the code:

AccountEditor.cmp
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="editMode" type="Boolean" default="false" />
    <aura:attribute name="sourceRecord" type="Object" />
    <aura:attribute name="sourceRecordFields" type="Object" />
    <aura:attribute name="error" type="String" />
    
    <force:recordData aura:id="currentRecord"
                      recordId="{!v.recordId}"
                      fields="AccountId"
                      targetRecord="{!v.sourceRecord}"
                      targetFields="{!v.sourceRecordFields}"
                      targetError="{!v.error}" />
    
    <h2>recordId: {!v.recordId}</h2>
    <h2>AccountId: {!v.sourceRecordFields.AccountId}</h2>
     <lightning:card >
         <div id="editableDiv" style="display:none;">
            <lightning:recordEditForm onload="{!c.handleAccountLoaded}"
                                      onsubmit="{!c.handleAccountSubmitted}"
                                      onsuccess="{!c.handleAccountSaved}"
                                      recordId="{!v.sourceRecordFields.AccountId}"
                                      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>
    </lightning:card>
    
</aura:component>

and AccountEditorController.js
({
    editAccount: function(cmp, event, helper) {
        //cmp.set('v.editMode', true);
        var element= document.getElementById('editableDiv');
        element.style.display = 'block';
        
        var element= document.getElementById('viewableDiv');
        element.style.display = 'none';
    },
    handleAccountLoaded: function(cmp, event, helper) {
        // do stuff while loading, like showing a spinner
    },
    handleAccountSubmitted: function(cmp, event, helper) {
        // do stuff while submitting, like showing a spinner
    },
    handleAccountSaved: function(cmp, event, helper) {
        //cmp.set('v.editMode', false);
        var element= document.getElementById('editableDiv');
        element.style.display = 'none';
        
        var element= document.getElementById('viewableDiv');
        element.style.display = 'block';
    }
})

Thanks & Regards
Gulshan Raj
Sr. Developer

User-added image