function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Pedro Garcia GPedro Garcia G 

lightning:recordViewForm in Aura:app

Hi...

I've created an aura:component to render a custom object using lightning:recordViewForm. I pass the recordId but it show me an error: Error in fetching record or record metadata. [Invalid record id].
Even that, the lightning:recordViewForm render the fields.

aura:app
<aura:application extends="force:slds" >
    
    <c:CASConfig></c:CASConfig>
    
</aura:application>

aura:component
<aura:component controller="CASConfig"  access="global"  >
		
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <aura:attribute name="hasCasRecord" type="boolean" default="true"/>
    <aura:attribute name="casConfig" type="CAS_Config__c" />
<lightning:card title="CAS API key">
    <lightning:recordViewForm aura:id="viewForm" recordId="{!v.casConfig.Id}" objectApiName="CAS_Config__c">
        <div class="slds-media">
            
            <div class="slds-media__body">
                
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="x_api_key__c"/><h2>hola</h2>
                    </lightning:layoutItem>
                    
                </lightning:layout>
            </div>
        </div>
    </lightning:recordViewForm>
    </lightning:card>    
    

</aura:component>

js controller
({
    doInit : function(component, event, helper) {

		var action = component.get("c.getCasConfig");
		action.setCallback(this, function(response) {
			var state = response.getState();
			if (state === "SUCCESS") {
             
				var storeResponse = response.getReturnValue();

                if($A.util.isEmpty(storeResponse)){
                   component.set("v.hasCasRecord", false);

                }
                else{

                    component.set("v.casConfig", storeResponse);
                    
                }
                component.set("v.casConfigId", storeResponse.Id);
                alert(storeResponse.Id);
             	console.log('1.5>>>'+JSON.stringify(storeResponse));
                console.log('1.6>>>'+$A.util.isEmpty(storeResponse));
                console.log('1.7>>>'+storeResponse.Id);

			}
			
         });
         $A.enqueueAction(action);

	}
})

User-added image
Best Answer chosen by Pedro Garcia G
Maharajan CMaharajan C
Hi pedro,


Just include the aura:if in outside the lightning:recordViewForm to render the Form once the ID is generated in callback.


Component:

<aura:component controller="CASConfig"  access="global"  >
        
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <aura:attribute name="hasCasRecord" type="boolean" default="true"/>
    <aura:attribute name="casConfig" type="CAS_Config__c" />
    <aura:attribute name="formLoaded" type="boolean" default="false"/>
    
    <lightning:card title="CAS API key">
    <aura:if isTrue="{!v.formLoaded}">
    <lightning:recordViewForm aura:id="viewForm" recordId="{!v.casConfig.Id}" objectApiName="CAS_Config__c">
        <div class="slds-media">
            
            <div class="slds-media__body">
                
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="x_api_key__c"/><h2>hola</h2>
                    </lightning:layoutItem>
                    
                </lightning:layout>
            </div>
        </div>
    </lightning:recordViewForm>
    <aura:if>
    </lightning:card>    
 </aura:component>


JS Controller:

({
    doInit : function(component, event, helper) {

        var action = component.get("c.getCasConfig");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
             
                var storeResponse = response.getReturnValue();

                if($A.util.isEmpty(storeResponse)){
                   component.set("v.hasCasRecord", false);

                }
                else{

                    component.set("v.casConfig", storeResponse);
                    
                }
                component.set("v.casConfigId", storeResponse.Id);
                alert(storeResponse.Id);
                 console.log('1.5>>>'+JSON.stringify(storeResponse));
                console.log('1.6>>>'+$A.util.isEmpty(storeResponse));
                console.log('1.7>>>'+storeResponse.Id);
                component.set("v.formLoaded", True);               /// Set the formLoaded boolean to true

            }
            
         });
         $A.enqueueAction(action);

    }
})

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi pedro,


Just include the aura:if in outside the lightning:recordViewForm to render the Form once the ID is generated in callback.


Component:

<aura:component controller="CASConfig"  access="global"  >
        
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <aura:attribute name="hasCasRecord" type="boolean" default="true"/>
    <aura:attribute name="casConfig" type="CAS_Config__c" />
    <aura:attribute name="formLoaded" type="boolean" default="false"/>
    
    <lightning:card title="CAS API key">
    <aura:if isTrue="{!v.formLoaded}">
    <lightning:recordViewForm aura:id="viewForm" recordId="{!v.casConfig.Id}" objectApiName="CAS_Config__c">
        <div class="slds-media">
            
            <div class="slds-media__body">
                
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="x_api_key__c"/><h2>hola</h2>
                    </lightning:layoutItem>
                    
                </lightning:layout>
            </div>
        </div>
    </lightning:recordViewForm>
    <aura:if>
    </lightning:card>    
 </aura:component>


JS Controller:

({
    doInit : function(component, event, helper) {

        var action = component.get("c.getCasConfig");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
             
                var storeResponse = response.getReturnValue();

                if($A.util.isEmpty(storeResponse)){
                   component.set("v.hasCasRecord", false);

                }
                else{

                    component.set("v.casConfig", storeResponse);
                    
                }
                component.set("v.casConfigId", storeResponse.Id);
                alert(storeResponse.Id);
                 console.log('1.5>>>'+JSON.stringify(storeResponse));
                console.log('1.6>>>'+$A.util.isEmpty(storeResponse));
                console.log('1.7>>>'+storeResponse.Id);
                component.set("v.formLoaded", True);               /// Set the formLoaded boolean to true

            }
            
         });
         $A.enqueueAction(action);

    }
})

Thanks,
Maharajan.C
This was selected as the best answer
Pedro Garcia GPedro Garcia G
Thanks!