function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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